Typescript Type Annotations

Learn how to specify types for variables, function parameters, and return values.

In TypeScript, type annotations allow you to specify types for variables, function parameters, and return values, which improves code readability and catches potential errors. Here’s a breakdown of how to use them:

1. Variable Type Annotations

You can define the type of a variable by using a colon (:) followed by the type after the variable name.

1let username: string = "Amir";
2let age: number = 30;
3let isDeveloper: boolean = true;
4

In this example:

username is a string.
age is a number.
isDeveloper is a boolean.

If you try to assign a different type to these variables, TypeScript will throw an error.

2. Function Parameter Type Annotations

You can specify types for each parameter in a function, ensuring that only the correct types can be passed.

1function greet(name: string, age: number): string {
2    return `Hello, ${name}. You are ${age} years old.`;
3}
4

Here:

name must be a string.
age must be a number.

If you pass a different type to name or age, TypeScript will give an error.

3. Function Return Type Annotations

You can specify the type of value a function should return by adding a type annotation after the parameter list.

1function add(a: number, b: number): number {
2    return a + b;
3}
4

In this example:

The function add takes two parameters, a and b, both of type number.
The return type of add is also specified as number.

If you return a non-number value from this function, TypeScript will throw an error.

4. Optional and Default Parameters

You can mark a parameter as optional by adding a question mark (?) after the parameter name, or provide a default value. Optional parameters have a type of type | undefined.

1function greetUser(name: string, title?: string): string {
2    return title ? `${title} ${name}` : `Hello, ${name}`;
3}
4
5function logMessage(message: string = "No message provided"): void {
6    console.log(message);
7}
8

In greetUser:

title is optional; if it’s not provided, it will be undefined.

In logMessage:

message has a default value and does not require an argument.

By using type annotations, TypeScript ensures you write consistent and reliable code, reducing runtime errors.

Javascript Objects (key-value pairs, accessing properties, nested objects)

Typescript Primitive Types