The Basic Primitive Types

In TypeScript, always use lowercase for primitive types such as string, number, and boolean. Avoid capitalized forms like String, Number, and Boolean.

• string: This represents textual data.
• number: TypeScript simplifies numeric types; you don't need to differentiate between int, float, or double as they all fall under the number type.
• boolean: This type can only be true or false.
• null: Represents a non-existent object.
• undefined: Indicates an uninitialized variable.

Arrays and Their Annotations

Arrays can be defined in two ways:

1. Using the syntax number[] or string[] for homogeneous data types.
2. Using generics like Array<number> for heterogeneous structures.

Function Type Expressions

When passing functions as props between components, specifying their type is essential. For instance, when passing a state setter function, you might define it as (prevState: string) => void. In this context, void indicates that the function does not return any value.

Object Types and Properties

Object types in TypeScript are defined by their properties. For example:

const color: { name: string, hexCode: string } = {

name: 'white',

hexCode: '#fff'

}

You can also specify optional properties by appending a ? to the property name:

const color: { name: string, hexCode: string, rgba?: string } = {

name: 'white',

hexCode: '#fff'

}

Remember to check for undefined when accessing optional properties.

Union Types Explained

TypeScript supports union types, allowing you to combine multiple types. For example:

let id: string | number = 0;

This approach introduces the concept of Narrowing, which will be explored further in future discussions.

Literal Types in TypeScript

Literal types allow you to specify exact values for strings, numbers, and booleans. They are particularly useful in union types, especially in React for limiting prop values:

justifyContent: 'right' | 'left' | 'center';

Avoiding the 'any' Type

While the any type can bypass type-checking errors, it's best to avoid it as much as possible. Using any can lead to unforeseen type and logical errors in your code.

Function Type Annotations

TypeScript enables you to annotate both input and output types of functions. Parameter type annotations come right after the parameter name:

function getSquare(num: number) {

console.log(num * num);

}

This helps ensure that the correct argument types are passed to the function.

Return type annotations are placed after the parameter list:

function getSquare(num: number): number {

return num * num;

}

These annotations serve both documentation and error prevention purposes.

This video discusses the concepts of Type, Type Inference, and Type Annotations in TypeScript, which are vital for mastering the language.