Lesson 1

Lesson not found

Basic Types

Lesson Progress: 0%

Basic Types

Lesson Incomplete

Lesson not found

Code Example

let firstName: string = "Alice";
console.log(firstName);

let age: number = 25;
console.log(age);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

Naming a variable name, should often be avoided in browser enviroments, since it can interfere with the built-in global variable window.name
In TypeScript, you can tell the computer what kind of data you plan to store by adding a colon and a type name, like : string or : number.
A string holds words, sentences, or any text, and it always goes inside quotation marks, like "Alice".
A number holds math values, like 25, and you do not put quotes around them.
In the example, firstName is labeled as a string and remembers the name "Alice".
Then age is labeled as a number and remembers the value 25.
console.log() shows whatever is inside the parentheses on the screen so you can see the value.

Code Example

let isLoggedIn: boolean = true;
console.log(isLoggedIn);

let isComplete: boolean = false;
console.log(isComplete);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

A boolean is a type that can only hold one of two things: true or false.
It is like a light switch that is either flipped on or off, with no in-between setting.
In the example, isLoggedIn is set to true, meaning the user is currently signed in.
The variable isComplete is set to false, meaning the task is not finished yet.
Booleans are perfect for yes-or-no questions in code, like "Is the game over?" or "Has the player won?"

Code Example

let email: string | null = null;
console.log(email);

let middleName: string | undefined = undefined;
console.log(middleName);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

In TypeScript, null means "this is intentionally empty." You set it to null on purpose.
undefined means "this has not been given a value yet." The box is there, but nothing has been placed inside.
The symbol | is called a union type and means "or." string | null means the value can either be a string or null.
In the example, email is set to null because the user did not provide an email address yet.
The variable middleName is set to undefined because no middle name was given.
Using null and undefined helps your code clearly show when something is missing on purpose versus not yet set.

Code Example

function sayHello(firstName: string): void {
  console.log("Hello, " + firstName);
}

sayHello("Alice");

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

Naming a variable name, should often be avoided in browser enviroments, since it can interfere with the built-in global variable window.name
The void type means "this function does not return anything." It does its job but does not give a value back.
In the example, sayHello prints a greeting to the screen, but there is noreturn keyword, so nothing is sent back.
The : void after the parentheses tells TypeScript that the function promises not to return any value.
When you call sayHello("Alice"), the function runs, prints the message, and then finishes quietly.
You will see void used often for functions that only display information, save data, or perform an action without giving anything back.

Code Example

let userInput: unknown = "hello";
console.log(userInput);

let data: any = 42;
data = "anything";
console.log(data);

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

unknown is a safe type for when you do not know what kind of data you will get. You must check it before using it.
In the example, userInput is labeled unknown and starts as a string, but TypeScript will not let you use it freely until you prove what it is.
any is the most flexible type. It turns off type checking completely, so you can put any kind of value inside.
In the example, data starts as the number 42, then changes to the string "anything", and TypeScript does not complain.
While any is easy to use, it removes the safety that TypeScript gives you, so try to use it only when you really need to.

Code Example

function fail(message: string): never {
  throw new Error(message);
}

Instructions

▲ ← Click the triangle to hide or reveal instructions.

The code editor is below.
The left side of the code editor is where you type your input code.
The right side of the code editor is where you see the output of your code.

Practice by typing the code example above, in the left side of the code editor below.
Then click the "Run Code" button, to run the code.
You will see the output of your code in the output section.

Typescript Code Editor

Task Incomplete

Editor Input:

Editor Output:

Click "Run Code" to see the output here

The never type means a function never finishes normally. It either throws an error or runs forever.
In the example, fail uses throw new Error(message), which immediately stops the program.
Because the function always throws, TypeScript knows it will never reach the end, so the return type is never.
You can think of never as saying "this function is not expected to complete successfully."
The never type is less common than the others, but it is useful for error handling and functions that must always stop.

Test Incomplete

Training Mode

Testing Mode

Random Order

In TypeScript, what does the colon and type name do in a variable declaration like let name: string = "Alice"?

It gives the variable a default value.It tells TypeScript what kind of data the variable can hold.It makes the variable available everywhere in the program.It hides the variable from other parts of the code.

Lesson 1

Basic Types

Lesson 1

Basic Types

Typescript Code Editor

Typescript Code Editor

Typescript Code Editor

Typescript Code Editor

Typescript Code Editor

Typescript Code Editor

In TypeScript, what does the colon and type name do in a variable declaration like let name: string = "Alice"?

Question #

1/15

Score

0/0 - 0.0 %

In TypeScript, what does the colon and type name do in a variable declaration like let name: string = "Alice"?

Question #

1/15

Score

0/0 - 0.0 %