A Complete Guide - TypeScript Working with Multiple Types

Top 10 Questions and Answers: TypeScript Working with Multiple Types

1. What are union types in TypeScript, and how do you use them?

let id: number | string;
id = 101;
id = "TS101";

In this example, the variable id can be either a number or a string.

2. Can you explain intersection types in TypeScript?

Answer: Intersection types allow you to combine multiple types into one. An intersection type contains all members of the types it intersects. You use the & operator to define intersection types:

type Employee = { name: string; id: number;
}; type Engineer = { skills: string[];
}; type FullTimeEmployee = Employee & Engineer; const emp: FullTimeEmployee = { name: "John", id: 202, skills: ["TypeScript", "React"]
};

Here, FullTimeEmployee requires a combination of properties from both Employee and Engineer.

3. How do you create a type guard in TypeScript?

Answer: Type guards help TypeScript narrow down the type within a conditional block. You can implement a user-defined type guard by defining a function that returns a type predicate (parameterName is Type):

function isString(input: any): input is string { return typeof input === "string";
} let sample: string | number = "Hello"; if (isString(sample)) { // TypeScript now knows that 'sample' is a string within this block console.log(sample.toUpperCase());
}

4. Can you provide an example of using the typeof type guard in TypeScript?

Answer: Yes, the typeof operator can be used as a type guard to narrow down the type of a variable:

function printValue(value: string | number) { if (typeof value === "string") { console.log(`String value: ${value}`); } else if (typeof value === "number") { console.log(`Number value: ${value}`); }
} printValue("Hello"); // Output: String value: Hello
printValue(42); // Output: Number value: 42

5. What are literal types in TypeScript, and how do they work with union types?

Answer: Literal types restrict a variable to a specific value. When combined with union types, literals allow for defining a finite set of acceptable values:

type Direction = "Up" | "Down" | "Left" | "Right"; let move: Direction; move = "Up"; // Valid
move = "Right"; // Valid
// move = "Diagonal"; // Error: Type '"Diagonal"' is not assignable to type 'Direction'

6. How can you use the in operator as a type guard in TypeScript?

Answer: The in operator checks if a property exists within an object, serving as a type guard:

type Fish = { swim: () => void;
}; type Bird = { fly: () => void;
}; function move(animal: Fish | Bird) { if ("swim" in animal) { return animal.swim(); } return animal.fly();
}

7. What are the benefits of using type aliases in TypeScript?

Answer: Type aliases provide a way to name a type for easier reference and readability. Benefits include:

• Reusability: Create a reusable definition.
• Simplification: Simplify complex types.
• Readability: Make type definitions more understandable.

Example:

type UserID = number | string; function printUserId(id: UserID) { console.log(id);
} printUserId(101); // Number type
printUserId("TS101"); // String type

8. Can you explain the differences between interface and type in TypeScript and when to use each?

Answer: Both interface and type in TypeScript can define object shapes, but they have key differences:

• Extending: Interfaces can be extended using the extends keyword, while types are extended using intersections (&).
• Declaration Merging: Interfaces can be declared multiple times and merged, while types cannot.

Interface Example:

interface User { name: string;
} interface Admin extends User { role: string;
}

Type Example:

type User = { name: string;
}; type Admin = User & { role: string;
};

Use interfaces when you need declaration merging or intend to use extends. Use types for utility types or when creating simple object shapes.

9. How do you work with optional types in TypeScript?

Answer: Optional types are used to denote that a property or parameter may or may not be present. In TypeScript, you achieve this by appending a question mark (?) to the property name in an interface or object type:

interface Person { firstName: string; lastName?: string;
} const person1: Person = { firstName: "John" }; // Valid
const person2: Person = { firstName: "John", lastName: "Doe" }; // Also valid

10. Can you explain how to use tuple types in TypeScript, and why they are useful?

Answer: Tuple types allow you to define an array with a fixed number of elements, where each element may have a different type. Tuples are useful for arrays of fixed sizes with known types for each index:

type UserLogin = [string, number]; // [username, userId] const johnDoe: UserLogin = ["john.doe", 101]; function loginUser(loginDetails: UserLogin) { console.log(`Logged in user: ${loginDetails[0]}, ID: ${loginDetails[1]}`);
} loginUser(johnDoe);

Tuple example:

type Response = [number, string, boolean]; const fetchData = (): Response => [200, "Success", true];

Tuples are particularly handy in APIs that return fixed-size arrays of varying types, enhancing readability and type safety.