Home » Typescript
Category:

Typescript

Typescript

TypeScript null & undefined: A Comprehensive Tutorial with Code Examples

written by utmoker71

TypeScript null & undefined: A Comprehensive Tutorial with Code Examples

In TypeScript, null and undefined are important concepts that represent “nothing” or the absence of a value. Understanding how they work, how TypeScript treats them, and how to handle them properly in your code can help prevent common runtime errors.

This tutorial will guide you through the use of null and undefined, along with best practices and examples.

1. Introduction to null and undefined

In TypeScript (as in JavaScript), null and undefined are two special types used to represent the absence of a value:

undefined: Indicates that a variable has been declared but not assigned a value.
null: Indicates an intentional absence of any object or value.

Example 1: null and undefined in TypeScript

let value1: undefined = undefined;
let value2: null = null;

console.log(value1); // Output: undefined
console.log(value2); // Output: null

2. Differences Between null and undefined

While both null and undefined represent “nothing,” they are not the same:

undefined is the default value assigned to variables that are declared but not initialized.
null is a value that represents the intentional absence of any object value, and it must be explicitly assigned.

Example 2: Differences Between null and undefined

let uninitializedValue: undefined; // Implicitly undefined
let nullValue: null = null; // Explicitly null

console.log(typeof uninitializedValue); // Output: "undefined"
console.log(typeof nullValue); // Output: "object"

The typeof operator treats null as an object due to a quirk in JavaScript, whereas undefined is treated as its own type.

3. TypeScript’s strictNullChecks Option

When the strictNullChecks option is enabled in your TypeScript configuration (tsconfig.json), variables of types like string or number will not allow null or undefined unless explicitly specified. This is a crucial feature for type safety.

Example 3: With strictNullChecks Enabled

let name: string = "John";
// name = null; // Error: Type 'null' is not assignable to type 'string'
// name = undefined; // Error: Type 'undefined' is not assignable to type 'string'

If strictNullChecks is disabled, null and undefined can be assigned to any type.

Enabling strictNullChecks:
In tsconfig.json:

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

4. Handling null and undefined with Union Types

If you want to explicitly allow null or undefined for certain variables, you can use union types to define multiple valid types.

Example 4: Union Types with null and undefined

let username: string | null = null;
let age: number | undefined;

username = "Alice";  // Valid
age = 25;            // Valid
age = undefined;     // Valid

// username = 123; // Error: Type 'number' is not assignable to type 'string | null'

In this example, username can be either a string or null, and age can be a number or undefined.

5. Optional Parameters and Default Values

In TypeScript, function parameters can be marked as optional by appending a ?. This means that the parameter can be undefined if no value is provided.

Example 5: Optional Parameters

function greet(name?: string): string {
    if (name) {
        return `Hello, ${name}!`;
    } else {
        return "Hello!";
    }
}

console.log(greet("John"));  // Output: Hello, John!
console.log(greet());        // Output: Hello!

You can also provide default values for parameters to avoid dealing with undefined inside the function body.

Example 6: Default Parameter Values

function greetWithDefault(name: string = "Guest"): string {
    return `Hello, ${name}!`;
}

console.log(greetWithDefault("John")); // Output: Hello, John!
console.log(greetWithDefault());       // Output: Hello, Guest!

6. Nullish Coalescing (??)

The nullish coalescing operator (??) is a feature in TypeScript that returns the right-hand operand if the left-hand operand is null or undefined. It's a great way to provide fallback values.

Example 7: Nullish Coalescing

let userInput: string | null = null;
let defaultName = "Anonymous";

let name = userInput ?? defaultName;  // "Anonymous" because userInput is null

console.log(name);  // Output: Anonymous

In this example, ?? ensures that name will be “Anonymous” if userInput is either null or undefined.

7. Safe Access with Optional Chaining (?.)

Optional chaining (?.) is a feature that allows you to safely access deeply nested object properties or methods that might be null or undefined.

Example 8: Optional Chaining

type User = {
    name: string;
    address?: {
        city: string;
    };
};

let user: User = {
    name: "Alice",
    address: undefined
};

console.log(user.address?.city);  // Output: undefined (safe access)

Without optional chaining, attempting to access user.address.city would throw an error if address is undefined.

8. Best Practices for Dealing with null and undefined

Enable strictNullChecks: Enabling strictNullChecks ensures that you explicitly handle null and undefined and avoid accidental errors.

Use Optional Chaining (?.): Safely access nested properties without worrying about null or undefined.
Default Values with Nullish Coalescing (??): Use ?? to provide fallback values for potentially null or undefined variables.
Avoid Using null When Possible: In many cases, using undefined (the default) is sufficient and less confusing than null.
Use Union Types for Explicit Nullability: If a variable can be null or undefined, use union types like string | null or number | undefined.

Conclusion

Understanding how null and undefined work in TypeScript, along with the tools TypeScript provides to handle them (strictNullChecks, optional chaining, and nullish coalescing), will help you write safer, more robust code.

Whether you’re dealing with optional values or working with deeply nested objects, TypeScript provides mechanisms to ensure that you handle these potential pitfalls effectively.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Casting: A Comprehensive Tutorial with Code Examples

written by utmoker71

TypeScript casting allows you to override the type system and tell the compiler that a variable is of a certain type, even when TypeScript cannot automatically infer the type or when the type needs to be narrowed down manually.

Casting is especially useful when working with DOM manipulation, external libraries, or when dealing with complex types.

This tutorial will guide you through the concepts of TypeScript casting, showing how and when to use it with examples.

1. What Is Type Casting in TypeScript?

In TypeScript, type casting (also known as type assertion) allows you to inform the compiler about the specific type of a value when the compiler is unable to infer it correctly. Casting is useful when dealing with uncertain or ambiguous types such as any, unknown, or when working with third-party libraries.

Syntax:

There are two main ways to cast types in TypeScript:

as Syntax:

let value = someVariable as SomeType;

Angle Bracket Syntax:

let value = someVariable;

Both styles work similarly, but the as syntax is more common, especially when working with JSX (since angle brackets are used for elements).

2. Types of Type Casting

Type Assertion using as Syntax
Type assertion allows you to inform the compiler of a specific type using the as keyword.

Example 1: Casting a Variable to a Type

let value: any = "Hello, TypeScript";
let strLength: number = (value as string).length;

console.log(strLength);  // Output: 16

In this example, value is of type any, and by casting it to string using as, we can safely access the .length property.

Type Assertion using Angle Bracket Syntax
You can also cast using angle brackets (<>), though this style is less common.

Example 2: Angle Bracket Syntax

let value: any = "Hello, TypeScript";
let strLength: number = (value).length;

console.log(strLength);  // Output: 16

The functionality is the same, but the syntax uses angle brackets.

3. Casting Scenarios

Casting to a Specific Type
TypeScript sometimes cannot infer the type of a variable, especially when working with APIs or libraries where the types are not well-defined. In such cases, casting becomes useful.

Example 3: Casting an Object

type User = {
    name: string;
    age: number;
};

let user: any = { name: "Alice", age: 25 };
let typedUser = user as User;

console.log(typedUser.name); // Output: Alice

Here, user is initially typed as any, but we cast it to the User type so that we can use type-safe access to the properties name and age.

Casting with DOM Elements

When working with the DOM, TypeScript often cannot infer the exact type of an HTML element, requiring casting to interact with specific element types.

Example 4: Casting HTML Elements

const inputElement = document.getElementById("username") as HTMLInputElement;
inputElement.value = "TypeScript User";

In this example, document.getElementById returns an HTMLElement, but we know it's an HTMLInputElement. Casting helps us access properties like .value, which are specific to input elements.

4. Force Casting (unknown and any)

In TypeScript, the any and unknown types are used to describe values that could be of any type. You often need to cast these types to work with them in a meaningful way.

Example 5: Casting any

let randomValue: any = "I could be anything";
let valueLength: number = (randomValue as string).length;

console.log(valueLength);  // Output: 18

Example 6: Casting unknown

Unlike any, unknown is safer because it requires explicit casting to be used. TypeScript forces you to narrow down the type before using it.

let value: unknown = "This is a string";
if (typeof value === "string") {
    let strValue = value as string;
    console.log(strValue.toUpperCase());  // Output: THIS IS A STRING
}

In this example, we must cast unknown to string before calling string methods like .toUpperCase().

5. Type Narrowing vs. Type Casting

Type narrowing is TypeScript’s automatic mechanism for deducing types based on control flow analysis. Type casting is used when TypeScript is unable to infer types, or when you want to manually inform the compiler about the type of a variable.

Example 7: Type Narrowing vs. Casting

function process(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());  // TypeScript narrows the type to 'string'
    } else {
        console.log(value.toFixed(2));     // TypeScript narrows the type to 'number'
    }
}

In this example, TypeScript narrows down the type based on the condition using typeof.

However, if you're sure of the type but TypeScript cannot deduce it, casting becomes necessary:

function processValue(value: unknown) {
    let str = value as string;
    console.log(str.toUpperCase());  // Casts 'unknown' to 'string'
}

6. Common Use Cases for Type Casting

Example 8: Casting with Third-Party Libraries

Sometimes, when working with libraries that don’t have complete TypeScript type definitions, you may need to cast to expected types.

import * as _ from "lodash";  // Assume this doesn't have complete types
let result: any = _.find([1, 2, 3], (n: number) => n > 2);
let numberResult = result as number;

Example 9: Safely Accessing Nested Properties

You can use casting when accessing deep properties where TypeScript cannot infer the types accurately.

type Person = { name: string, address?: { city: string } };

let person: any = { name: "John" };
let city = (person.address as { city: string }).city;  // Unsafe if address is undefined

A safer approach might be using optional chaining with casting:

let city = person.address?.city as string;

Conclusion

Type casting in TypeScript is a valuable tool for controlling the type system and handling complex situations.

While TypeScript's type inference is quite powerful, there are cases when casting is necessary, especially when working with any, unknown, or third-party libraries.

Always aim to cast as little as possible and rely on TypeScript’s type inference and narrowing features when possible to maintain type safety.

By understanding the proper use of type casting and narrowing, you can write safer, more maintainable TypeScript code.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Functions: A Comprehensive Tutorial with Code Examples

written by utmoker71

Functions are a core concept in TypeScript, just as in JavaScript, but TypeScript enhances functions by providing static types and advanced type features like type inference, overloads, and more.

In this tutorial, we’ll cover TypeScript functions in depth and provide several examples to illustrate different aspects of function types.

1. Basic Function Syntax

In TypeScript, you can define functions similarly to how you would in JavaScript, but with optional type annotations for parameters and return types.

Example 1: Basic Function with Types

function add(x: number, y: number): number {
    return x + y;
}

console.log(add(2, 3)); // Output: 5

Here, x and y are parameters of type number, and the function is expected to return a value of type number. If you omit the return type, TypeScript infers it automatically based on the return value.

2. Function Parameters

You can explicitly define types for function parameters to ensure type safety, which is one of TypeScript’s key features.

Example 2: Function Parameter Types

function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("John")); // Output: Hello, John!

In this example, the greet function takes a single parameter name of type string and returns a string.

3. Optional and Default Parameters

TypeScript allows you to define optional and default parameters in functions. Optional parameters are denoted by a question mark ?, while default parameters are assigned default values.

Example 3: Optional and Default Parameters

function logMessage(message: string, user?: string): void {
    if (user) {
        console.log(`${user}: ${message}`);
    } else {
        console.log(message);
    }
}

function greetUser(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}`;
}

logMessage("Welcome");          // Output: Welcome
logMessage("Welcome", "Alice"); // Output: Alice: Welcome

console.log(greetUser("John"));            // Output: Hello, John
console.log(greetUser("John", "Welcome")); // Output: Welcome, John

Optional parameters: user? is optional in logMessage. If no value is provided, it will be undefined.
Default parameters: greeting in greetUser has a default value of “Hello”.

4. Return Types and Type Inference

You can explicitly specify the return type of a function, but TypeScript is smart enough to infer it based on the returned value.

Example 4: Return Types

function multiply(a: number, b: number): number {
    return a * b;
}

function log(message: string): void {
    console.log(message);
}

const result = multiply(5, 3); // TypeScript infers result to be of type 'number'
log(result.toString()); // Output: 15

In the multiply function, the return type number is explicitly declared, but in many cases, TypeScript can infer the type. The log function has a return type of void because it doesn’t return a value.

5. Anonymous and Arrow Functions

TypeScript supports anonymous and arrow functions, just like JavaScript. You can use type annotations with these as well.

Example 5: Anonymous and Arrow Functions

const addNumbers = function (x: number, y: number): number {
    return x + y;
};

const multiplyNumbers = (x: number, y: number): number => x * y;

console.log(addNumbers(4, 5)); // Output: 9
console.log(multiplyNumbers(4, 5)); // Output:

Arrow functions provide a more concise syntax, especially for shorter functions.

6. Function Overloading

TypeScript allows function overloading, where multiple function signatures are declared, and a single implementation handles all of them. This is useful when a function can behave differently based on the type or number of arguments.

Example 6: Function Overloading

function getLength(value: string): number;
function getLength(value: any[]): number;
function getLength(value: string | any[]): number {
    return value.length;
}

console.log(getLength("Hello"));   // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3

In this example, the getLength function has two overloads: one for string and another for any[] (arrays). The implementation handles both cases.

7. Rest Parameters and Spread Syntax

TypeScript supports rest parameters, which allow you to pass an indefinite number of arguments into a function.

Example 7: Rest Parameters

function sumAll(...numbers: number[]): number {
    return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(sumAll(1, 2, 3));    // Output: 6
console.log(sumAll(10, 20, 30)); // Output: 60

The …numbers syntax allows us to handle any number of arguments as an array within the function.

8. Function as a Type

In TypeScript, functions can also be treated as types. You can define a function type by specifying the types of the parameters and return value.

Example 8: Function as a Type

let mathOperation: (a: number, b: number) => number;

mathOperation = function (x: number, y: number): number {
    return x + y;
};

console.log(mathOperation(5, 10)); // Output: 15

In this example, mathOperation is a variable with a function type that takes two numbers as parameters and returns a number.

9. Generic Functions

Generic functions allow you to define functions that work with a variety of types, making your code more reusable and flexible.

Example 9: Generic Functions

function identity(arg: T): T {
    return arg;
}

console.log(identity(5));   // Output: 5
console.log(identity("Hi")); // Output: Hi

In this example, the identity function is a generic function where T represents any type passed to the function. When calling the function, you can specify the type explicitly, or TypeScript can infer it.

Conclusion

Functions in TypeScript are much more powerful and flexible than those in JavaScript due to TypeScript’s type system. With features like optional and default parameters, type inference, function overloading, and generics, you can write functions that are type-safe, clear, and reusable.

By understanding and utilizing these features, you can make your TypeScript code more robust and reduce the chances of runtime errors.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Union Types: A Comprehensive Tutorial with Code Examples

written by utmoker71

Union types in TypeScript allow for increased flexibility by enabling a variable to hold more than one type of value.

Instead of restricting a variable to a single type (e.g., string, number, or boolean), a union type lets you define a combination of types.

This tutorial will walk you through the concept of union types in TypeScript, along with practical examples to illustrate their usage.

1. What Are Union Types?

In TypeScript, a union type allows a variable to hold values from two or more distinct types. Union types are declared by using the vertical bar | between the types.

Syntax:

let variable: type1 | type2 | type3;

Where type1, type2, and type3 are valid TypeScript types.

Example:

let value: string | number;
value = "Hello";  // Valid
value = 42;       // Valid
value = true;     // Error: Type 'boolean' is not assignable to type 'string | number'

In this example, value can either be a string or a number, but it cannot be a boolean.

2. Simple Examples of Union Types

Union types provide a convenient way to handle values that can have different types without losing type safety.

Example 1: Basic Union Types

let id: number | string;
id = 101;           // Valid
id = "ABC123";      // Valid
id = true;          // Error: Type 'boolean' is not assignable to type 'string | number'

Example 2: Function Parameters with Union Types

function printId(id: number | string): void {
    console.log("Your ID is: " + id);
}

printId(123);       // Valid
printId("ABC123");  // Valid
printId(true);      // Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'

3. Type Narrowing

TypeScript allows us to narrow down the type within a union using conditional logic like typeof or instanceof. This ensures the correct type is used within a block of code.

Example 3: Type Narrowing Using typeof

function printDetails(value: string | number): void {
    if (typeof value === "string") {
        console.log("String value: " + value.toUpperCase());
    } else {
        console.log("Number value: " + (value * 2));
    }
}

printDetails("Hello");  // Output: String value: HELLO
printDetails(21);       // Output: Number value: 42

In this example, TypeScript checks the type of value at runtime and narrows the union type to either string or number inside the respective if and else blocks.

4. Union Types with Functions

Union types are especially useful in function parameters and return types, enabling you to create more flexible functions.

Example 4: Function with Union Return Types

function calculate(value: number | string): number | string {
    if (typeof value === "number") {
        return value * 10;
    } else {
        return `Value is: ${value}`;
    }
}

console.log(calculate(5));        // Output: 50
console.log(calculate("Test"));   // Output: Value is: Test

This function can return either a number or a string based on the input type.

5. Union Types in Arrays

TypeScript allows you to declare arrays that can hold multiple types of values using union types.

Example 5: Arrays with Union Types

let mixedArray: (number | string)[] = [1, "Hello", 2, "World"];
mixedArray.push(3);        // Valid
mixedArray.push("Test");   // Valid
mixedArray.push(true);     // Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'

In this example, mixedArray can contain both number and string values but cannot hold any other types.

6. Union Types with Objects

You can also use union types to specify objects with different structures. This is particularly useful when you need to handle different object types in a flexible manner.

Example 6: Union Types with Objects

type Admin = {
    role: string;
    accessLevel: number;
};

type User = {
    username: string;
    isLoggedIn: boolean;
};

function printUserInfo(person: Admin | User): void {
    if ('role' in person) {
        console.log(`Admin Role: ${person.role}, Access Level: ${person.accessLevel}`);
    } else {
        console.log(`User: ${person.username}, Logged In: ${person.isLoggedIn}`);
    }
}

const admin: Admin = { role: "SuperAdmin", accessLevel: 5 };
const user: User = { username: "JohnDoe", isLoggedIn: true };

printUserInfo(admin); // Output: Admin Role: SuperAdmin, Access Level: 5
printUserInfo(user);  // Output: User: JohnDoe, Logged In: true

Here, the function handles both Admin and User object types by using the in operator to check which properties are available and then performs the relevant actions.

7. Common Use Cases for Union Types

Union types are useful in various scenarios where flexibility is required. Some common use cases include:

Example 7: Handling API Responses

APIs often return different types of data based on different conditions (e.g., success or error messages).

type SuccessResponse = {
    status: "success";
    data: string;
};

type ErrorResponse = {
    status: "error";
    message: string;
};

function handleApiResponse(response: SuccessResponse | ErrorResponse): void {
    if (response.status === "success") {
        console.log("Data: " + response.data);
    } else {
        console.log("Error: " + response.message);
    }
}

const successResponse: SuccessResponse = { status: "success", data: "Data retrieved successfully" };
const errorResponse: ErrorResponse = { status: "error", message: "Failed to retrieve data" };

handleApiResponse(successResponse);  // Output: Data: Data retrieved successfully
handleApiResponse(errorResponse);    // Output: Error: Failed to retrieve data

In this example, the function gracefully handles both success and error responses using union types.

Conclusion

Union types in TypeScript are a valuable tool for increasing flexibility while maintaining type safety. They allow a variable, parameter, or return type to accept multiple types, making your code more versatile.

By using type narrowing, you can ensure that the correct type is used in any given situation. From handling API responses to working with arrays and objects, union types are an essential feature in TypeScript for writing robust, type-safe applications.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Enums: A Comprehensive Tutorial

written by utmoker71

Enums in TypeScript are a way of giving more friendly names to sets of numeric or string values. They allow developers to define a collection of related values that can be numeric or string-based, making your code more readable and maintainable.

Enums help by providing a mechanism to associate meaningful names with values, especially when you need to represent a fixed set of constants.

This tutorial will cover the basics of enums, including how to define and use them, how numeric and string enums work, reverse mapping, and some advanced enum features in TypeScript.

1. What is an Enum?

In TypeScript, an enum is a way of defining a set of named constants. It can be either numeric or string. Enums make code easier to read and maintain by giving meaningful names to constant values.

2. Defining Numeric Enums

The most basic form of an enum is a numeric enum, where the values are automatically assigned numbers (starting from 0 by default).

Example 1: Basic Numeric Enum

enum Direction {
  Up,
  Down,
  Left,
  Right
}

console.log(Direction.Up);    // Output: 0
console.log(Direction.Down);  // Output: 1
console.log(Direction.Left);  // Output: 2
console.log(Direction.Right); // Output: 3

Explanation:

The enum Direction has four members (Up, Down, Left, Right). TypeScript automatically assigns 0 to Up, 1 to Down, and so on.
You can access the enum values using Direction.Up, which returns 0.

3. Customizing Enum Values

You can customize the values assigned to enum members. If you assign a specific value to one member, the subsequent members will continue incrementing from that value.

Example 2: Custom Enum Values

enum Direction {
  Up = 1,
  Down,
  Left = 5,
  Right
}

console.log(Direction.Up);    // Output: 1
console.log(Direction.Down);  // Output: 2 (auto-incremented)
console.log(Direction.Left);  // Output: 5
console.log(Direction.Right); // Output: 6 (auto-incremented)

Explanation:

Up is explicitly assigned the value 1. The next member (Down) is auto-incremented to 2.
Left is explicitly assigned 5, and Right is auto-incremented to 6.

4. String Enums

In string enums, each member must be explicitly assigned a string value. String enums provide better readability, especially when the values are meaningful strings instead of numbers.

Example 3: String Enums

enum Status {
  Success = 'SUCCESS',
  Error = 'ERROR',
  Loading = 'LOADING'
}

console.log(Status.Success);  // Output: 'SUCCESS'
console.log(Status.Error);    // Output: 'ERROR'
console.log(Status.Loading);  // Output: 'LOADING'

Explanation:

The Status enum assigns meaningful string values to each member.
String enums require you to manually assign a string value to each member.

5. Heterogeneous Enums (Mixing String and Numeric Values)

You can define enums that mix both numeric and string values, but this practice is generally discouraged because it can lead to confusion.

Example 4: Heterogeneous Enum

enum MixedEnum {
  No = 0,
  Yes = 'YES'
}

console.log(MixedEnum.No);  // Output: 0
console.log(MixedEnum.Yes); // Output: 'YES'

Explanation:

The MixedEnum has both numeric (0) and string (‘YES') values. While this is allowed, it should be used sparingly as it can make code harder to understand.

6. Reverse Mapping in Numeric Enums

TypeScript provides a feature called reverse mapping for numeric enums, which allows you to retrieve the name of an enum member based on its value.

Example 5: Reverse Mapping in Numeric Enums

enum Colors {
  Red,
  Green,
  Blue
}

console.log(Colors.Red);    // Output: 0
console.log(Colors[0]);     // Output: 'Red'
console.log(Colors[1]);     // Output: 'Green'
console.log(Colors[2]);     // Output: 'Blue'

Explanation:

You can access both the value and the name of a numeric enum. For example, Colors.Red returns 0, and Colors[0] returns ‘Red'.
Reverse mapping only works with numeric enums, not string enums.

7. Computed and Constant Members

Enum members can either be constant (values known at compile-time) or computed (values calculated at runtime). Constant members are simpler and evaluated when the enum is compiled, while computed members are calculated dynamically.

Example 6: Computed and Constant Members

enum Role {
  Admin = 1,
  User = 2,
  Guest = 'GUEST'.length  // Computed member
}

console.log(Role.Admin);  // Output: 1
console.log(Role.User);   // Output: 2
console.log(Role.Guest);  // Output: 5 ('GUEST'.length is 5)

Explanation:

Admin and User are constant members.
Guest is a computed member, as its value depends on the result of ‘GUEST'.length, which is evaluated at runtime.

8. Enums with Type Annotations

Enums can be used in function parameters and return types to ensure type safety.

Example 7: Using Enums in Function Parameters

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function move(direction: Direction): void {
  switch (direction) {
    case Direction.Up:
      console.log('Moving up');
      break;
    case Direction.Down:
      console.log('Moving down');
      break;
    case Direction.Left:
      console.log('Moving left');
      break;
    case Direction.Right:
      console.log('Moving right');
      break;
  }
}

move(Direction.Up);    // Output: Moving up
move(Direction.Right); // Output: Moving right

Explanation:

The function move() accepts a parameter of type Direction, ensuring that only valid enum values can be passed.
The switch statement handles each enum value, and TypeScript will give a compile-time error if an invalid value is passed to the function.

9. Using const enum

In some scenarios, you can define a const enum to optimize the performance. const enum members are inlined by the compiler at compile-time, removing the need for reverse mapping.

Example 8: Using const enum

const enum Days {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

let workday: Days = Days.Wednesday;
console.log(workday);  // Output: 2 (No reverse mapping available)

Explanation:

const enum values are replaced with their constant values at compile-time, resulting in better performance and smaller compiled code.
However, reverse mapping (e.g., Days[2]) is not available for const enum.

10. Enum as a Type

Enums can also be used as types, allowing you to restrict the possible values of a variable to those defined in the enum.

Example 9: Enum as a Type

enum TrafficLight {
  Red,
  Yellow,
  Green
}

let currentLight: TrafficLight = TrafficLight.Red;

console.log(currentLight);  // Output: 0 (the value of TrafficLight.Red)

// This will cause an error because 'Blue' is not part of the TrafficLight enum
// currentLight = TrafficLight.Blue;  // Error: Property 'Blue' does not exist on type 'typeof TrafficLight'.

Explanation:

The currentLight variable can only hold values from the TrafficLight enum, ensuring type safety.
Attempting to assign a value that is not part of the enum will result in a compile-time error.

11. Enums with Union Types

Enums can be combined with union types to create more complex type definitions. This can be useful when you want to allow both enum members and specific values.

Example 10: Enum with Union Types

enum Size {
  Small,
  Medium,
  Large
}

type ShirtSize = Size | 'Extra Large';

let size: ShirtSize = Size.Small;
console.log(size);  // Output: 0

size = 'Extra Large';
console.log(size);  // Output: 'Extra Large'

// This will cause an error because 'Tiny' is not part of the ShirtSize type
// size = 'Tiny';  // Error: Type '"Tiny"' is not assignable to type 'ShirtSize'.

Explanation:

The ShirtSize type can hold either an enum value from Size or the string ‘Extra Large'.
Attempting to assign a value not included in the union type (like ‘Tiny') will result in an error.

Conclusion

Enums in TypeScript provide a convenient way to define sets of related constants with either numeric or string values. They help make your code more readable, maintainable, and type-safe by restricting values to specific names.

Understanding how to use enums effectively will allow you to create cleaner and more robust TypeScript applications.

Key Topics Covered:

Numeric Enums: Automatically or manually assign numbers to enum members.
String Enums: Use meaningful string values for enum members.
Custom Enum Values: Customize enum values to meet your specific needs.
Reverse Mapping: Retrieve the name of a numeric enum member from its value.
Computed and Constant Members: Use both compile-time and runtime values in enums.
Enums in Functions: Use enums in function parameters and return types.
const enum: Optimize performance by inlining enum values.
Enums as Types: Use enums to restrict values in variables or function arguments.
Union Types with Enums: Combine enums with union types for more flexible type definitions.

By mastering TypeScript enums, you can make your code more robust and easier to understand, while taking advantage of type safety and clean error handling.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Tuples: A Comprehensive Tutorial

written by utmoker71

Tuples in TypeScript are a special type of array that allow you to define the number and types of elements that an array can contain. Unlike regular arrays, where all elements must be of the same type, tuples can have a fixed number of elements, each with a different type.

This allows for more control and type safety when working with structured data.

In this tutorial, we will explore the basics of tuples, including how to define them, access their elements, use optional elements, and how to leverage tuple features in TypeScript.

1. Basic Tuple Syntax

In TypeScript, you can define a tuple using square brackets [ ], specifying the types of each element in order.

Example 1: Defining a Simple Tuple

let person: [string, number];

person = ['Alice', 30];  // Valid tuple
console.log(person);  // Output: ['Alice', 30]

Explanation:

person is a tuple that can only contain a string as the first element and a number as the second element.
The order of elements is important. If the order or types are incorrect, TypeScript will raise an error.

2. Accessing Tuple Elements

You can access tuple elements using index notation, just like arrays.

Example 2: Accessing Tuple Elements

let car: [string, number] = ['Toyota', 2021];

console.log(car[0]);  // Output: 'Toyota'
console.log(car[1]);  // Output: 2021

Explanation:

Elements in the tuple car can be accessed by their index (car[0], car[1]), similar to how array elements are accessed.

3. Modifying Tuple Elements

You can modify the elements of a tuple by assigning new values, as long as the new values match the types defined in the tuple.

Example 3: Modifying Tuple Elements

let employee: [string, number] = ['Bob', 40];

// Modifying the tuple elements
employee[0] = 'Robert';  // Changing the string element
employee[1] = 41;        // Changing the number element

console.log(employee);  // Output: ['Robert', 41]

Explanation:

The tuple employee allows us to update the string and number values as long as we maintain the correct type for each position.

4. Optional Tuple Elements

TypeScript allows you to define optional elements in a tuple using the ? syntax. Optional elements can be undefined or omitted when defining the tuple.

Example 4: Defining Optional Tuple Elements

let address: [string, number, string?];

address = ['Main St', 123];            // Valid: Optional element is omitted
address = ['Main St', 123, 'Apt 4B'];  // Valid: Optional element is provided

console.log(address);  // Output: ['Main St', 123, 'Apt 4B']

Explanation:

The string? denotes that the third element of the tuple is optional.
You can either provide this optional element or omit it, and the tuple will still be valid.

5. Rest Elements in Tuples

You can define rest elements in tuples, which allow the tuple to accept a variable number of elements at the end. Rest elements are defined using … (spread syntax).

Example 5: Using Rest Elements in Tuples

let team: [string, ...string[]];

team = ['Team Leader', 'Developer', 'Designer', 'Tester'];

console.log(team);  // Output: ['Team Leader', 'Developer', 'Designer', 'Tester']

Explanation:

The …string[] rest element allows the tuple team to accept any number of additional string values after the first element.

6. Destructuring Tuples

You can use destructuring to extract values from a tuple into individual variables.

Example 6: Destructuring Tuples

let book: [string, string, number] = ['The Catcher in the Rye', 'J.D. Salinger', 1951];

// Destructure the tuple into individual variables
let [title, author, year] = book;

console.log(title);   // Output: 'The Catcher in the Rye'
console.log(author);  // Output: 'J.D. Salinger'
console.log(year);    // Output: 1951

Explanation:

Destructuring allows you to unpack the elements of the tuple book into separate variables (title, author, and year).

7. Tuples with Mixed Types

Tuples are particularly useful when you need to store different types of values in a specific order. You can mix various types like string, number, boolean, and even other tuples or arrays.

Example 7: Tuples with Mixed Types

let userProfile: [string, number, boolean] = ['Alice', 30, true];

console.log(userProfile[0]);  // Output: 'Alice'
console.log(userProfile[1]);  // Output: 30
console.log(userProfile[2]);  // Output: true

Explanation:

The tuple userProfile holds a string, a number, and a boolean. The types and order of the elements must match the tuple definition.

8. Tuples in Functions

You can use tuples as types for function parameters and return values. This is useful when a function needs to return multiple values of different types.

Example 8: Using Tuples in Functions

function getPersonInfo(): [string, number] {
  return ['Alice', 30];
}

let personInfo = getPersonInfo();
console.log(personInfo);  // Output: ['Alice', 30]

Explanation:

The function getPersonInfo() returns a tuple with a string and a number.
This allows the function to return multiple values of different types in a single call.

9. Tuples with Labels (Named Tuples)

Starting from TypeScript 4.0, you can label elements in a tuple to make their meaning clearer. This improves readability and helps with documentation.

Example 9: Labeled Tuples

let employee: [name: string, age: number, isManager: boolean];

employee = ['Bob', 40, true];

console.log(employee);  // Output: ['Bob', 40, true]

Explanation:

Labeled tuples provide names to each element in the tuple, making it clear what each element represents. This is helpful for readability but does not affect the structure or type of the tuple.

10. Readonly Tuples

Tuples can be declared as readonly, which makes them immutable. Once a tuple is defined as readonly, its elements cannot be modified.

Example 10: Defining Readonly Tuples

let position: readonly [number, number] = [10, 20];

// This will cause an error because the tuple is readonly
// position[0] = 15;  // Error: Cannot assign to '0' because it is a read-only property.

console.log(position);  // Output: [10, 20]

Explanation:

readonly tuples prevent modification of the elements, making the tuple immutable.

Conclusion

Tuples in TypeScript provide a way to define arrays with a fixed number of elements where each element can have a different type. This adds flexibility and safety when dealing with structured data. Tuples are particularly useful when you need to model related values of different types, such as coordinates, user profiles, or responses from functions.

Key Features of TypeScript Tuples:

Fixed-length arrays: Each element in a tuple has a predefined type and position.
Optional elements: Tuples can have optional elements that may or may not be present.
Rest elements: Tuples can accept a variable number of elements using rest syntax (…).
Destructuring: Easily extract values from tuples using destructuring.
Mixed types: Tuples can hold different types in a specific order.
Labeled tuples: Elements in a tuple can be labeled for better readability.
Readonly tuples: Tuples can be made immutable by using the readonly modifier.

By mastering TypeScript tuples, you can write more structured, readable, and type-safe code when dealing with collections of related data.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Arrays: A Comprehensive Tutorial

written by utmoker71

In TypeScript, arrays are used to store multiple values of the same type. TypeScript adds a level of safety to working with arrays by allowing you to specify the type of the elements in the array.

This ensures that you only store and manipulate data of the correct type, catching potential errors during development.

This tutorial will cover how to define arrays, manipulate them, and ensure type safety with practical examples. We will also explore some of the more advanced features of arrays in TypeScript, such as multi-dimensional arrays, read-only arrays, and generics.

1. Basic Array Type

In TypeScript, you can define arrays by specifying the type of the elements followed by []. This ensures that all elements in the array have the same type.

Example 1: Defining a Simple Array

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ['Alice', 'Bob', 'Charlie'];

console.log(numbers);  // Output: [1, 2, 3, 4, 5]
console.log(names);    // Output: ['Alice', 'Bob', 'Charlie']

Explanation:

numbers is declared as an array of number type, ensuring that only numbers can be added to the array.
names is declared as an array of string type, ensuring that only strings are added to the array.

2. Using the Array Generic

An alternative way to declare an array in TypeScript is to use the Array generic type.

Example 2: Using the Array Generic

let numbers: Array = [10, 20, 30, 40];
let names: Array = ['John', 'Jane', 'Jim'];

console.log(numbers);  // Output: [10, 20, 30, 40]
console.log(names);    // Output: ['John', 'Jane', 'Jim']

Explanation:

The Array syntax is equivalent to number[]. It defines an array where all elements are of type number.
Similarly, Array defines an array of strings.

3. Adding and Modifying Array Elements

You can add elements to an array using the push() method and modify elements by accessing them via their index.

Example 3: Adding and Modifying Array Elements

let fruits: string[] = ['Apple', 'Banana', 'Mango'];

// Adding elements to the array
fruits.push('Orange');
console.log(fruits);  // Output: ['Apple', 'Banana', 'Mango', 'Orange']

// Modifying an element in the array
fruits[1] = 'Blueberry';
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Mango', 'Orange']

Explanation:

The push() method adds elements to the end of the array.
Elements in the array can be accessed and modified using their index.

4. Iterating Over Arrays

You can iterate over arrays using loops like for, for…of, and forEach.

Example 4: Iterating Over Arrays

let numbers: number[] = [10, 20, 30, 40, 50];

// Using a traditional for loop
for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]); } // Using for...of loop for (let num of numbers) { console.log(num); } // Using forEach method numbers.forEach(num => {
  console.log(num);
});

Explanation:

A for loop gives you full control over the iteration.
The for…of loop simplifies iteration by automatically giving you each element.
The forEach() method provides a functional way to iterate over the array.

5. Multi-Dimensional Arrays

You can create multi-dimensional arrays in TypeScript, where each element of the array is another array.

Example 5: Defining a Two-Dimensional Array

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[0][1]);  // Output: 2
console.log(matrix[2][2]);  // Output: 9

Explanation:

matrix is a two-dimensional array where each element is an array of numbers.
You can access elements using two indices: matrix[row][column].

6. Array Methods

TypeScript arrays inherit all the methods from JavaScript arrays. You can use methods like map(), filter(), find(), reduce(), and more.

Example 6: Using Array Methods

let numbers: number[] = [1, 2, 3, 4, 5];

// Using map to create a new array with elements doubled
let doubled = numbers.map(num => num * 2);
console.log(doubled);  // Output: [2, 4, 6, 8, 10]

// Using filter to create a new array with only even numbers
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // Output: [2, 4]

// Using find to get the first number greater than 3
let firstGreaterThanThree = numbers.find(num => num > 3);
console.log(firstGreaterThanThree);  // Output: 4

Explanation:

map() applies a function to each element and returns a new array.
filter() returns a new array containing only elements that satisfy a condition.
find() returns the first element that satisfies a condition, or undefined if none is found.

7. Read-Only Arrays

TypeScript provides a readonly modifier to make arrays immutable, meaning their elements cannot be changed after initialization.

Example 7: Defining a Read-Only Array

let numbers: readonly number[] = [10, 20, 30, 40];

// This will cause an error because the array is read-only
// numbers.push(50);  // Error: Property 'push' does not exist on type 'readonly number[]'.

console.log(numbers);  // Output: [10, 20, 30, 40]

Explanation:

The readonly modifier prevents the array from being modified (e.g., adding or removing elements). This is useful when you want to ensure that the array remains constant.

8. Tuples

In TypeScript, tuples are a special type of array where you can specify the types and the number of elements that the array will contain. Tuples allow arrays with mixed types.

Example 8: Defining a Tuple

let person: [string, number] = ['Alice', 25];

console.log(person[0]);  // Output: Alice
console.log(person[1]);  // Output: 25

// Adding an extra value beyond the tuple's defined length will cause an error
// person.push(true);  // Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'.

Explanation:

The tuple person is declared to have two elements: the first must be a string, and the second must be a number.
Accessing elements works the same way as with arrays, but adding elements beyond the defined length is not allowed.

9. Array with Union Types

You can define an array that contains multiple types by using union types.

Example 9: Array with Union Types

let mixedArray: (number | string)[] = [1, 'two', 3, 'four'];

console.log(mixedArray);  // Output: [1, 'two', 3, 'four']

Explanation:

mixedArray is an array that can contain both number and string types. This is useful when the array needs to hold elements of different types.

10. Generic Arrays

You can create generic functions that work with arrays of any type by using generic types.

Example 10: Generic Array Functions

function reverseArray(items: T[]): T[] {
  return items.reverse();
}

let reversedNumbers = reverseArray([1, 2, 3, 4]);
console.log(reversedNumbers);  // Output: [4, 3, 2, 1]

let reversedStrings = reverseArray(['a', 'b', 'c']);
console.log(reversedStrings);  // Output: ['c', 'b', 'a']

Explanation:

The reverseArray function is generic and works with arrays of any type (T[]). It returns the array reversed, maintaining type safety.

Conclusion

Arrays in TypeScript provide a robust way to store and manipulate collections of data with the added benefit of type safety. By specifying the type of elements in the array, TypeScript helps catch potential bugs and ensures that operations on the array are safe and predictable.

Key Topics Covered:

Basic Array Types: Defining arrays using [] or Array.
Modifying Arrays: Adding and modifying elements.
Iterating Arrays: Using loops and array methods like forEach.
Multi-Dimensional Arrays: Handling arrays with more than one dimension.
Read-Only Arrays: Using readonly to make arrays immutable.
Tuples: Defining arrays with fixed lengths and mixed types.
Union Types: Allowing arrays to contain multiple types.
Generic Arrays: Using generics to create flexible array functions.

By mastering these concepts, you can write more reliable and maintainable TypeScript code when working with arrays.

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Special Types: A Comprehensive Tutorial

written by utmoker71

In addition to the simple types such as string, number, and boolean, TypeScript includes several special types that are designed to handle more complex or specific scenarios.

These special types provide extra flexibility when dealing with type checking, error handling, and defining structures that might involve multiple or unknown types.

This tutorial will cover the most important special types in TypeScript, including any, unknown, never, void, and more. We will also provide practical code examples to help you understand how and when to use these special types.

1. any Type

The any type in TypeScript disables type checking, allowing a variable to hold any value. It essentially reverts TypeScript back to JavaScript’s dynamic typing, but overusing any can negate the benefits of TypeScript’s type safety.

Example 1: Using the any Type

let dynamicVar: any;

dynamicVar = 'Hello';   // No error, type is string
dynamicVar = 42;        // No error, type is number
dynamicVar = true;      // No error, type is boolean

console.log(dynamicVar);  // Output: true

Explanation:

dynamicVar is declared with the type any, meaning it can hold values of any type without triggering a type error.

2. unknown Type

The unknown type is similar to any, but it is safer because you need to perform type checks before you can use a value of type unknown. This encourages safer programming practices compared to any.

Example 2: Using the unknown Type

let input: unknown;

input = 'Hello';
console.log(typeof input);  // Output: string

input = 42;

if (typeof input === 'number') {
  console.log(input + 10);  // Output: 52
}

Explanation:

The unknown type allows any value but requires type checking before performing operations. This makes it safer than any.

3. void Type

The void type is used to describe the absence of a return value. It is typically used with functions that do not return anything.

Example 3: Using the void Type

function logMessage(message: string): void {
  console.log(message);
}

logMessage('This function does not return anything');  // Output: This function does not return anything

Explanation:

void indicates that the function logMessage() does not return a value.

4. never Type

The never type represents a value that never occurs. It is used for functions that never return, such as those that throw an error or have infinite loops.

Example 4: Using the never Type

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

function infiniteLoop(): never {
  while (true) {
    // Infinite loop
  }
}

Explanation:

The never type is used for functions that either always throw an error (throwError) or never complete (infiniteLoop).

5. null and undefined Types

In TypeScript, null and undefined are their own types. They are used to represent missing or uninitialized values.

Example 5: Using null and undefined

let nullableValue: string | null = null;
let uninitializedValue: undefined = undefined;

console.log(nullableValue);      // Output: null
console.log(uninitializedValue); // Output: undefined

Explanation:

null and undefined represent the absence of a value. nullableValue is explicitly typed to be either a string or null.

6. object Type

The object type represents non-primitive types (i.e., anything that is not a number, string, boolean, null, or undefined). It is used to indicate that a variable holds a reference to an object.

Example 6: Using the object Type

function printObjectDetails(obj: object): void {
  console.log(obj);
}

printObjectDetails({ name: 'Alice', age: 30 });  // Output: { name: 'Alice', age: 30 }

Explanation:

The object type is used to indicate that the parameter obj should be an object. Any non-primitive value can be passed to the function.

7. Union Types

Union types allow a value to be one of several types. You define union types using the vertical bar (|) to combine types.

Example 7: Using Union Types

let userId: string | number;

userId = 'abc123';  // Valid, type is string
userId = 98765;     // Valid, type is number

console.log(userId);  // Output: 98765

Explanation:

userId can be either a string or a number. This is useful when a value can take on multiple types (e.g., an ID that can be either numeric or alphanumeric).

8. Literal Types

Literal types allow you to specify an exact value that a variable can have. This is often combined with union types to restrict the value to a predefined set of options.

Example 8: Using Literal Types

let status: 'success' | 'error' | 'loading';

status = 'success';  // Valid
status = 'error';    // Valid

// status = 'unknown';  // Error: Type '"unknown"' is not assignable to type '"success" | "error" | "loading"'.

Explanation:

The status variable can only have one of the three specific string values: ‘success', ‘error', or ‘loading'.

9. Intersection Types

Intersection types combine multiple types into one. A value must satisfy all types in the intersection.

Example 9: Using Intersection Types

interface User {
  name: string;
  age: number;
}

interface Admin {
  role: string;
}

type AdminUser = User & Admin;

const admin: AdminUser = {
  name: 'Alice',
  age: 30,
  role: 'Administrator'
};

console.log(admin);  // Output: { name: 'Alice', age: 30, role: 'Administrator' }

Explanation:

The AdminUser type is an intersection of the User and Admin interfaces. It must have all the properties of both types.

10. Type Aliases

Type aliases allow you to create a new name for a type. This can be useful for simplifying complex types or giving more meaningful names to types.

Example 10: Using Type Aliases

type ID = string | number;

let userId: ID;
userId = 'abc123';  // Valid
userId = 12345;     // Valid

console.log(userId);  // Output: 12345

Explanation:

The ID alias represents a union type that can be either string or number. This simplifies the code when using the same type across different variables or functions.

11. Type Assertions

Type assertions allow you to tell the TypeScript compiler to treat a value as a specific type. This is useful when you know more about the type of a value than TypeScript does.

Example 11: Using Type Assertions

let value: unknown = 'This is a string';
let stringLength: number = (value as string).length;

console.log(stringLength);  // Output: 16

Explanation:

The as keyword is used to assert that value is of type string. This allows us to access string properties like length safely.

12. null and undefined with Strict Null Checks

By default, TypeScript allows null and undefined to be assigned to any type. However, you can enable strict null checks by setting “strictNullChecks”: true in the tsconfig.json file, which ensures that null and undefined can only be assigned when explicitly allowed.

Example 12: Enabling Strict Null Checks

// Enabling "strictNullChecks": true in tsconfig.json

let name: string = 'Alice';
// name = null;  // Error: Type 'null' is not assignable to type 'string'.

let nullableName: string | null = null;  // Valid

Explanation:

With strict null checks enabled, null cannot be assigned to a variable unless its type explicitly allows it.

Conclusion

TypeScript’s special types provide powerful tools for writing flexible, safe, and expressive code. These types help handle situations where values can be dynamic, unknown, or absent, while still enforcing type safety.

By using these special types, you can ensure that your code handles edge cases and dynamic behaviors gracefully, while still benefiting from TypeScript's type checking.

Key Special Types Covered:

any: Disables type checking and allows any type of value.
unknown: Similar to any, but requires explicit type checks before usage.
void: Used for functions that do not return any value.
never: Represents values that never occur (e.g., functions that always throw an error or never return).
null and undefined: Represent the absence of a value.
object: Represents non-primitive types.
Union types: Allow values to be one of several types.
Intersection types: Combine multiple types into one.
Literal types: Restrict values to specific constants.
Type aliases: Create custom names for types.
Type assertions: Tell TypeScript to treat a value as a specific type.

Mastering these special types will help you write more robust and flexible TypeScript code, handling complex scenarios with ease!

0 comment
0 FacebookTwitterPinterestEmail
Typescript

TypeScript Simple Types: A Comprehensive Tutorial

written by utmoker71

TypeScript is a statically-typed superset of JavaScript that introduces type annotations and compile-time type checking. One of its main features is type safety, which helps prevent errors by catching issues early during development.

TypeScript includes a range of simple types (or primitive types) that can be used to describe the kind of values you expect to work with in your program.

In this tutorial, we will cover the most commonly used simple types in TypeScript, including examples of how to use them to ensure type safety.

1. Basic TypeScript Types

In TypeScript, every variable or constant can have a type annotation that describes the type of data it holds. These basic types are fundamental building blocks in TypeScript.

Here are some of the simple types we'll cover:

string
number
boolean
null
undefined
any
unknown
void
never

2. Type Annotations

TypeScript allows you to explicitly declare the type of a variable, function parameter, or return type using type annotations.

Example 1: Basic Type Annotations

let name: string = 'Alice';
let age: number = 25;
let isStudent: boolean = true;

console.log(name);  // Output: Alice
console.log(age);   // Output: 25
console.log(isStudent);  // Output: true

Explanation:

name is explicitly declared as a string.
age is explicitly declared as a number.
isStudent is explicitly declared as a boolean.

3. String Type

The string type is used to represent textual data.

Example 2: Using the string Type

let firstName: string = 'John';
let lastName: string = 'Doe';
let fullName: string = `${firstName} ${lastName}`;

console.log(fullName);  // Output: John Doe

Explanation:

The string type holds text values. In this example, we concatenate firstName and lastName to form fullName.

4. Number Type

The number type is used to represent both integers and floating-point numbers.

Example 3: Using the number Type

let score: number = 100;
let pi: number = 3.14159;
let total: number = score + pi;

console.log(total);  // Output: 103.14159

Explanation:

The number type can represent both integers and decimals.
Arithmetic operations like addition, subtraction, multiplication, and division work just like in JavaScript.

5. Boolean Type

The boolean type can hold true or false.

Example 4: Using the boolean Type

let isAvailable: boolean = true;
let isActive: boolean = false;

if (isAvailable && !isActive) {
  console.log('Item is available but not active.');
}

Explanation:

The boolean type is used for values that are either true or false.

Logical operations like && (AND), || (OR), and ! (NOT) can be applied to boolean values.

6. null and undefined Types

In TypeScript, null and undefined are their own types. They represent the absence of a value.

Example 5: Using null and undefined

let emptyValue: null = null;
let notAssigned: undefined = undefined;

console.log(emptyValue);  // Output: null
console.log(notAssigned);  // Output: undefined

Explanation:

null represents a deliberate absence of a value.
undefined represents an uninitialized value or absence of a value by default.

7. The any Type

The any type allows a variable to hold any type of value. It disables type checking for that variable, making it behave like JavaScript's dynamic typing.

Example 6: Using the any Type

let dynamicVar: any = 'Hello';
dynamicVar = 42;
dynamicVar = true;

console.log(dynamicVar);  // Output: true

Explanation:

The any type lets you assign any value to the variable, even changing its type over time. However, overusing any can reduce type safety.

8. The unknown Type

The unknown type is safer than any because you need to check its type before performing operations on it. It is useful when dealing with values from external sources or unknown inputs.

Example 7: Using the unknown Type

let inputValue: unknown;

inputValue = 'A string';
console.log(inputValue);  // Output: A string

inputValue = 42;
if (typeof inputValue === 'number') {
  console.log(inputValue + 10);  // Output: 52
}

Explanation:

The unknown type requires a type check before performing operations. This prevents unsafe operations and enforces more type safety compared to any.

9. The void Type

The void type is used for functions that don't return any value.

Example 8: Using the void Type

function logMessage(message: string): void {
  console.log(message);
}

logMessage('This is a message');  // Output: This is a message

Explanation:

The void type indicates that the function does not return a value. This is common for functions that perform side effects like logging or modifying global state.

10. The never Type

The never type represents values that never occur, such as functions that always throw an error or infinite loops.

Example 9: Using the never Type

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

function infiniteLoop(): never {
  while (true) {
    // Infinite loop
  }
}

Explanation:

The never type is used for functions that either throw errors or never finish executing (like an infinite loop).
These functions never return a value.

11. Type Inference

In TypeScript, you don’t always need to provide type annotations explicitly. The compiler can infer the type based on the value assigned to the variable.

Example 10: Type Inference in TypeScript

let inferredString = 'Hello, TypeScript!';  // Inferred as string
let inferredNumber = 123;  // Inferred as number

console.log(inferredString);  // Output: Hello, TypeScript!
console.log(inferredNumber);  // Output: 123

Explanation:

TypeScript infers the type of inferredString as string and inferredNumber as number based on the values assigned to them.

12. Union Types

Union types allow a variable to hold multiple types. You can define a union type by separating types with a vertical bar (|).

Example 11: Using Union Types

let id: number | string;

id = 123;  // Valid
id = 'ABC';  // Valid

console.log(id);  // Output: ABC

Explanation:

The id variable can hold either a number or a string.
This is useful when a value can be of multiple types (e.g., a user ID that could be numeric or alphanumeric).

Conclusion

TypeScript’s simple types provide the foundation for writing type-safe code, ensuring that variables, functions, and objects behave as expected at compile-time.

By explicitly defining types, TypeScript helps catch bugs early, improving the overall robustness of your code.

Key Simple Types Covered:

string: Represents textual data.
number: Represents numeric data (both integers and floating-point numbers).
boolean: Represents true or false.
null and undefined: Represent the absence of a value.
any: Disables type checking and allows any type of value.
unknown: Requires explicit type checking before usage, providing more safety than any.
void: Used for functions that do not return any value.
never: Represents functions that never return or always throw an error.
Union types: Allow multiple possible types for a value.

By understanding and leveraging these basic types, you can write cleaner, more maintainable TypeScript code with fewer runtime errors.

0 comment
0 FacebookTwitterPinterestEmail