Thông báo: Sau khi viết bài, bảng mục lục có thể được tạo tự động. Cách tạo xem trong tài liệu trợ giúp bên phải.

Website công cụ cho front-end (nơi lưu trữ hình ảnh miễn phí, API và AI chat): http://luckycola.com.cn/

Lời mở đầu

Mục tiêu học tập:

1. Cú pháp và ví dụ về loại điều kiện
2. Cú pháp và ví dụ về loại điều kiện phân tán
3. Loại là gì? Trọng tải hàm là gì?

1. Cú pháp và ví dụ về loại điều kiện

1. Cú pháp loại điều kiện

Loại điều kiện trong TS có thể so sánh với biểu thức 3 ngôi trong JS.

// Cú pháp
T extends U ? X : Y; // Ý nghĩa: Nếu T là kiểu con của U (T là kiểu hẹp, U là kiểu rộng), thì chọn X, ngược lại chọn Y

2. Ví dụ sử dụng loại điều kiện

// Công cụ loại
type IsString<T> = T extends string ? true : false;

type T0 = IsString<number>; // false
type T1 = IsString<string>; // true
type T2 = IsString<'ab'>; // true
type T3 = IsString; // false
type T4 = IsString<boolean>; // false
// Đặc biệt với any và never
type T5 = IsString<any>; // boolean
type T6 = IsString<never>; // never

// Công cụ loại
// Sử dụng trong danh sách điều kiện
type TypeName<T> = T extends string ? 'string' :
                  T extends number ? 'number' : 
                  T extends boolean ? 'boolean' :
                  T extends undefined ? 'undefined' :
                  T extends Function ? 'function' :
                  'object';
                 
type T11 = TypeName<string>; // 'string'
type T12 = TypeName<string | ((x: number) => void)>; // 'string' | 'function'
type T14 = TypeName<number | string[] | undefined>;// 'number' | 'object' | 'undefined'

2. Cú pháp và ví dụ về loại điều kiện phân tán

1. Cú pháp loại điều kiện phân tán

1. Cú pháp giống như loại điều kiện bình thường, khác biệt nằm ở đặc tính của tham số kiểu T.

2. Lưu ý rằng, đối với tham số kiểu T, ngoại trừ T[], [T], Promise, các kiểu khác đều là "tham số trần", tức là cần phải thực hiện khớp phân tán.

// Cú pháp giống như loại điều kiện bình thường, khác biệt nằm ở đặc tính của tham số kiểu T.
T extends U ? X : Y;
// Lưu ý rằng, đối với tham số kiểu T, ngoại trừ T[], [T], Promise<T>, các kiểu khác đều là "tham số trần", tức là cần phải thực hiện khớp phân tán.

A ｜ B ｜ C extends U ? X : Y; // Tương đương với cách viết sau:
A extends U ? X : Y | B extends U ? X : Y | C extends U ? X : Y 

2. Ví dụ ứng dụng loại điều kiện phân tán

Ví dụ với tham số trần:

// Tham số trần thực hiện khớp phân tán
type Naked<T> = T extends boolean ? 'Y' : 'N';
type N1 = Naked<string>; // 'N'
type N2 = Naked<boolean>; // 'Y'

Ví dụ với tham số không phải trần:

// Tham số không phải trần thực hiện khớp
type WrapperTuple<T> = [T] extends [number | string] ? 'Y' : 'N';
type WrapperArray<T> = T[] extends boolean[] ? 'Y' : 'N';
type WrapperPromise<T> = Promise<T> extends Promise<boolean> ? 'Y' : 'N';

type W1 = WrapperTuple<string | number>;// 'Y'
type W2 = WrapperArray<string | number>;// 'N'
type W3 = WrapperPromise<string | number>;// 'N'

3. Nguyên lý hoạt động của Exclude

type Exclude = T extends U ? never : T; 

type T20 = Exclude<'a' | 'b' | 'c', 'a' | 'b'>;// 'c'
// ('a' extends 'a' | 'b' ? never : 'a') => 'never'
// ('b' extends 'a' | 'b' ? never : 'b') => 'never'
// ('c' extends 'a' | 'b' ? never : 'c') => 'c'
// Kết quả cuối cùng = 'c'

4. NonFunctionpropertyNames

Hàm này lấy ra các khóa của một đối tượng trừ đi các hàm.

// Lấy ra các khóa của một đối tượng trừ đi các hàm
type NonFunctionpropertyNames<T> = {
  [K in keyof T]: T[K] extends Function ? never : K
}[keyof T];

type user = {
  namd: string,
  age: number,
  id: boolean,
  fn: Function
};

type Names = NonFunctionpropertyNames<user>;// "namd" | "age" | "id"

type NonFunctionProperties<T> = Pick;
type Properyies = NonFunctionProperties<user>;//{ namd: string; age: number;id: boolean;}

3. Loại là gì? Trọng tải hàm là gì?

1. Bản chất của loại là sự biểu diễn tập hợp dữ liệu

// Bản chất của loại là sự biểu diễn tập hợp dữ liệu
interface Vector1D {
  x: number;
}

interface Vector2D {
  x: number,
  y: string
}

type SubtypeOf = T extends U ? true : false;
type A = SubtypeOf;// true

2. Trọng tải hàm

// Các cách khai báo trọng tải hàm

// Cách 1: Trọng tải hàm thông thường
// Khai báo trọng tải
function greet(person: string): string;
function greet(person: string[]): string[];
// Khai báo thực thi
function greet(x: unknown): unknown {
  if (typeof x === 'string') {
    return x;
  } else if (Array.isArray(x)) {
    return x;
  };
  throw new Error('never');
}

// Cách 2: Trọng tải hàm trong lớp

class Calculator {
  // Khai báo trọng tải phương thức
  add(x: number, b: number): number;
  add(x: string, b: string): string;
  add(x: string, b: number): string;
  add(x: number, b: string): string;
  // Khai báo thực thi
  add(x: number | string, y: number | string) {
    if (typeof x === 'string' || typeof y === 'string') {
      return (<string>x).toString() + (y as string).toString();
    }
    return x + y
  }
}