typescript(五) 類型轉換

1. 交叉類型-&

將多個類型合並成一個大類型

interface Bird {
  name: string,
  fly(): void
}
interface Person {
  age: number,
  talk(): void; 
}
type BirdMan = Bird & Person;
let bm: BirdMan = {name: 'lee', fly() {}, age: 1, talk(){}}

2. 獲取對象類型-typeof

let user = {name: 'lee', age: 1, talk() {}};
type User = typeof user; // 相當於 {name: string, age: number, talk():void}

3. 通過索引訪問類型的自類型

type Parent = {
  name: string,
  son: {
    name: string,
    age: number
  }
}
// 注意不能使用.運算符
let son: Parent['son'] = {name: 'lee', age: 1};

4. 限制類型的屬性選項-keyof

type Stu  = {
  score: number,
  name: string
}
type StuKey = keyof Stu; // 'score'|'name'
function getStuValue(stu: Stu, key: StuKey) {
  return stu[key]
}
let stu = {score: 90, name: 'lee'};
// ❌ Argument of type '"ddd"' is not assignable to parameter of type '"score" | "name"'.
getStuValue(stu, 'ddd');

5. 映射類型-keyof+in

type Person1 = {
  name: string,
  age: number,
  gender: boolean
}
//PersonMap是從Person1映射的類型，該類型各屬性都變為可選
type PersonMap = {
  [key in keyof Person1]?: Person1[key]
}
let p1:PersonMap = {name: 'lee'};

6. 內置的類型工具

所有的工具的第一個參數為具體的類型；可以是以下類型（interface, enum, class, type）

1. Partical

將必須項轉變為可選項。

// 原理 
 type Partival<T> = {[key in keyof T]+?: T[key]};

示例：

interface PersonA {
  user: string
}
type NewPersonA = Partial<Person>; // {user?: string}

2. Required

將可選項變為必須項

// 原理 
type Required<T> = {[key in keyof T]-?: T[key]}

示例：

class PersonB {
  name?: string
}
type NewPersonB = Required<PersonB>;
// 測試用例
let perB: NewPersonB = {name: 'lee'};

3. Readonly

修改所有屬性為只讀屬性

// 原理： 
type Readonly<T> = {readonly [key in keyof T]: T[key]}

示例：

type PersonC = {
  age: number
}
type NewPersonC = Readonly<PersonC>;
let perC: NewPersonC = {age: 10};
perC.age = 12; // ❌

4. Pick

從大類型中挑選小類型

// 原理：
type Pick<T, Key extends keyof T> = {[key in Key]: T[key]}

示例：

interface PersonD {
  gender: boolean,
  intersets: "ball" | "sing",
  age: number
}
type NewColor = Pick<PersonD, 'gender'|'age'>;
let newC: NewColor = {gender: true, age: 10};

7. 內置的條件類型工具

1. Excluede

獲取第一個參數相對第二個參數的補集

type E1 = Exclude<string|number|boolean, number>;
let e1: E1 = 'true';
let e2: E1 = true;

2. Extract

從第一個參數中抽取第二個參數指定的類型

type E2 = Extract<string|boolean|number, number>;
let e21: E2 = 1;

3. NonNullable

自動排除null/undefined

type E3 = NonNullable<null|undefined|string>;
let e3: E3 = 'qqq';

4. ReturnType

獲取函數的返回值的類型

function test() {
  return {name: 'lee'};
}
type NewType = ReturnType<typeof test>;
let newT:NewType = {name: 'ddd'} ;

應用： Redux

5. InstanceType

獲取類實例的類型

class User1 {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
type NewUser = InstanceType<typeof User1>;
let newUsr: NewUser = {name: 'ddd'}