Typescript 类型运算符

1、 typeof

接受一个javascript值
返回该值的 TypeScript 类型

const obj = {
    name: 1,
    age: 12,
};

type Types = typeof obj // type Types = {name: number;age: number;}

2、 keyof

接受对象类型
返回对象所有的键名组成的联合类型

type MyObj = {
    foo: number,
    bar: string,
};

type objKeysType =  keyof MyObj // "foo"|"bar"

3、方括号

接受对象的键名或键名的类型
返回对象键值的类型

// 示例1 参数为键名
type Person = {
    age: number;
    name: string;
    alive: boolean;
};
type ValueType = Person['age']  // number
type ValueType2 = Person[keyof Person]  //  number | string | boolean

// 示例2 参数为键名的类型
const MyArray = ['a', 1, 'c'];
type ValueType3 = typeof MyArray[number] // string |number
// 等价于
type ValueType3 =（typeof MyArray)[number] 

type Obj = {
    [props: string]: number,
};
type ValueType4 = typeof Obj[string] // number

4、in

用来遍历联合类型的每一个成员类型。

type U = 'a'|'b'|'c';
type Foo = {
    [Prop in U]: number;
};
//等价于
type Foo = {  
    a: number;  
    b: number;  
    c: number;  
 }

5、extends

类似于js中的三元表达式，模式为 T extends U ？T1 : T2

type Te3 = "hello world" extends string ? true : false; // true

6、模版字符串

模板字符串可以引用的类型一共6种， 分别是 string、number、boolean、null、undefined、bigint

type World = "world"
type Hello = `hello ${World}` // hello worold

type TS = 'A' | 'B';
type US = '1' | '2';
type V = `${TS}${US}`;  // "A1" | "A2" | "B1" | "B2"

7、satisfies

用于检测 某个值是否符合指定类型

type ColorName = "red" | "green" | "blue";
type RGB = [number, number, number];
type Colors = Record<ColorName, string|RGB>

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  bleu: [0, 0, 255] // 报错
} satisfies Colors;
const greenComponent = palette.green.substring(1) // 不报错;