Advanced type conversion techniques in TypeScript: mapped types, conditional types, and type inference

Welcome to this great technical blog post! As a powerful statically typed language, TypeScript provides many advanced techniques for type conversion. This article will give you an in-depth understanding of three advanced type conversion techniques in TypeScript: mapped types, conditional types, and type inference. These techniques will enable you to be more flexible and efficient when writing type-safe code. Are you ready? Let's enter this wonderful world together!

1. Mapping type

Mapped types are a very powerful technique in TypeScript that allow us to create new types based on existing types. One of its applicable scenarios is when dealing with the properties of objects. For example, if we want to make all properties of an object optional, we can use mapping types to achieve this:

type MakePropertiesOptional<T> = { [K in keyof T]?: T[K] };

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

type OptionalUser = MakePropertiesOptional<User>;

const user: OptionalUser = {
  id: 1,
  name: "John",
  age: 25,
};

In the above example, we defined a MakePropertiesOptionalmap type that accepts a type parameter Tand uses to keyof Tget Tall the properties of . We then initerate through the properties using the keyword and convert each property into an optional property. In this way, we successfully made Userall properties of type optional.

2. Condition type

Conditional typing is a technique in TypeScript for selecting types based on conditions. One of its applicable scenarios is when selecting different types according to different conditions. lengthFor example, we want to determine the type returned based on whether a certain type has a property:

type LengthOrUndefined<T> = T extends { length: number } ? T['length'] : undefined;

const strLength: LengthOrUndefined<string> = 5;
const arrLength: LengthOrUndefined<number[]> = undefined;

In the above example, we defined a conditional type LengthOrUndefinedthat accepts a type parameter T. By using a conditional expression T extends { length: number }, we check Tif has lengththe attribute. If it is, we return it T['length'], otherwise we return it undefined. In this way, we select different return types based on different types of conditions.

3. Type inference

Type inference is an important feature in TypeScript, which can automatically infer the type of variables based on context. This prevents us from explicitly specifying the type when declaring the variable, but letting TypeScript automatically infer it based on the assignment statement. For example:

const message = "Hello, TypeScript!";

function getLength(str: string) {
  return str.length;
}

const length = getLength(message);

In the above example, we declared a variable messageand initialized it to a string. Then, we define a function getLengththat takes a string argument and returns its length. When calling getLengththe function, we messagepass it as a parameter and TypeScript will automatically infer messagethe type of stringand pass it to the function.

This article only brings you a small selection of advanced type conversion techniques in TypeScript. Mapped types, conditional types, and type inference are powerful tools provided by TypeScript that can help you write safer and more efficient code. Whether you're working with object properties, selecting types based on conditions, or letting TypeScript automatically infer types, these techniques can make your code more flexible and maintainable.

Advanced type conversion techniques in TypeScript: mapped types, conditional types, and type inference

Guess you like