Indexed Access Types

Indexed access types trong TypeScript cung cấp cách để truy cập kiểu của property hoặc phần tử mảng.

ts
type A = { foo: number };
type Foo = A["foo"];
     
type Foo = number

ts
type A = { foo: number };
type Foo = A["foo"];
     
type Foo = number

Cú pháp Indexed Access Types

Indexed access types sử dụng bracket notation với kiểu.

ts
ObjectType["propertyName"];
ArrayType[number];

ts
ObjectType["propertyName"];
ArrayType[number];

Object Types và Indexed Access Types

Indexed access types cũng có thể sử dụng với union type.

ts
type Person = { name: string; age: number };
type T = Person["name" | "age"];
    
type T = string | number

ts
type Person = { name: string; age: number };
type T = Person["name" | "age"];
    
type T = string | number

Kết hợp với type operator keyof, bạn có thể lấy union type của tất cả các property trong object.

ts
type Foo = { a: number; b: string; c: boolean };
type T = Foo[keyof Foo];
    
type T = string | number | boolean

ts
type Foo = { a: number; b: string; c: boolean };
type T = Foo[keyof Foo];
    
type T = string | number | boolean

Nếu chỉ định tên property không tồn tại trong object type, compiler sẽ báo lỗi.

ts
type Account = { name: string };
type T = Account["password"];
Property 'password' does not exist on type 'Account'.2339Property 'password' does not exist on type 'Account'.

ts
type Account = { name: string };
type T = Account["password"];
Property 'password' does not exist on type 'Account'.2339Property 'password' does not exist on type 'Account'.

Array Types và Indexed Access Types

Indexed access types cũng có thể dùng để truy cập kiểu phần tử của array type. Để truy cập kiểu phần tử, thêm [number] vào array type.

ts
type StringArray = string[];
type T = StringArray[number];
    
type T = string

ts
type StringArray = string[];
type T = StringArray[number];
    
type T = string

Cũng hoạt động với array type có phần tử là union type.

ts
type MixedArray = (string | undefined)[];
type T = MixedArray[number];
    
type T = string | undefined

ts
type MixedArray = (string | undefined)[];
type T = MixedArray[number];
    
type T = string | undefined

Kết hợp với type operator typeof, bạn có thể trích xuất kiểu phần tử từ giá trị mảng.

ts
const array = [null, "a", "b"];
type T = (typeof array)[number];
    
type T = string | null

ts
const array = [null, "a", "b"];
type T = (typeof array)[number];
    
type T = string | null

Tuple Types và Indexed Access Types

Indexed access types cũng có thể dùng để truy cập kiểu phần tử của tuple type. Để truy cập kiểu phần tử của tuple, sử dụng numeric literal type trong bracket notation.

ts
type Tuple = [string, number];
type T = Tuple[0];
    
type T = string

ts
type Tuple = [string, number];
type T = Tuple[0];
    
type T = string

Kết hợp với type operator typeof, bạn có thể trích xuất kiểu phần tử từ giá trị tuple.

ts
const stateList = ["open", "closed"] as const;
type State = (typeof stateList)[number];
      
type State = "open" | "closed"

ts
const stateList = ["open", "closed"] as const;
type State = (typeof stateList)[number];
      
type State = "open" | "closed"

Chia sẻ kiến thức

Indexed access types của TypeScript có thể tham chiếu kiểu của property và phần tử mảng

・Cú pháp 1: ObjectType["propertyName"]
・Cú pháp 2: ArrayType[number]
・Kết hợp với keyof có thể lấy kiểu của tất cả property
・Kết hợp với typeof có thể lấy kiểu phần tử từ giá trị mảng

Từ 『Survival TypeScript』

Đăng nội dung này lên X