TypeScript 中高级应用与完美实践

TypeScript 的复合类型可以分为两类： set 和 map 。set 是指一个无序的、无重复元素的集合。而 map 则和 JS 中的对象一样，是一些没有重复键的键值对。

// set 
type Size = 'small' | 'default' | 'big' | 'large'; 
// map 
interface IA { 
    a: string 
    b: number 
} 

复合类型间的转换

// map => set 
type IAKeys = keyof IA;    // 'a' | 'b' 
type IAValues = IA[keyof IA];    // string | number 
  
// set => map 
type SizeMap = { 
    [k in Size]: number 
} 
// 等价于 
type SizeMap2 = { 
    small: number 
    default: number 
    big: number 
    large: number 
} 

map 上的操作

// 索引取值 
type SubA = IA['a'];    // string     
  
// 属性修饰符 
type Person = { 
    age: number 
    readonly name: string    // 只读属性，初始化时必须赋值 
    nickname?: string    // 可选属性，相当于 | undefined 
} 

映射类型和同态变换

在 TypeScript 中，有以下几种常见的映射类型。它们的共同点是只接受一个传入类型，生成的类型中 key 都来自于 keyof 传入的类型，value 都是传入类型的 value 的变种。

type Partial<T> = { [P in keyof T]?: T[P] }    // 将一个map所有属性变为可选的 
type Required<T> = { [P in keyof T]-?: T[P] }    // 将一个map所有属性变为必选的 
type Readonly<T> = { readonly [P in keyof T]: T[P] }    // 将一个map所有属性变为只读的 
type Mutable<T> = { -readonly [P in keyof T]: T[P] }    // ts标准库未包含，将一个map所有属性变为可写的 

此类变换，在 TS 中被称为同态变换。在进行同态变换时，TS 会先复制一遍传入参数的属性修饰符，再应用定义的变换。

interface Fruit { 
    readonly name: string 
    size: number 
} 
type PF = Partial<Fruit>;    // PF.name既只读又可选，PF.size只可选 

其他常用工具类型

由 set 生成 map

type Record<K extends keyof any, T> = { [P in K]: T }; 
  
type Size = 'small' | 'default' | 'big'; 
/* 
{ 
    small: number 
    default: number 
    big: number 
} 
 */ 
type SizeMap = Record<Size, number>; 

保留 map 的一部分

type Pick<T, K extends keyof T> = { [P in K]: T[P] }; 
/* 
{ 
    default: number 
    big: number 
} 
 */ 
type BiggerSizeMap = Pick<SizeMap, 'default' | 'big'>; 
  

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!