记录 typescript 的使用

266 阅读3分钟

基本使用

定义类型尽量优先inteface,type,至于两者有什么区别的话,是优先用inteface,不行再用type

定义的基本类型,都使用小写的,如number string boolean

泛型

内置工具

内置工具泛型巧用可以减少重复定义,如 ReturnType,Partial,Required,Omit,Pick

主要是在熟练的情况下,类似于ts的定义的方法处理一项任务

1. Partial
把定义的类型都转为非必填

interface People {
  age: number;
  List: string[];
  name: string;
}

const val: Partial<People>;

// 等价于

interface People {
  age?: number;
  List?: string[];
  name?: string;
}

2. Required

把定义的类型都转为必填

interface People {
  age: number;
  List?: string[];
  name?: string;
}

const val: Required<People>;

// 等价于

interface Test {
 age: number;
  List: string[];
  name: string;
}

3. Readonly

把定义的类型都转为只读

interface People {
  age: number;
  List: string[];
  name: string;
}

const val: Readonly<Test>;

// 等价于
interface People {
 readonly age: number;
 readonly List: string[];
 readonly name: string;
}

4. Pick

取出定义中的指定属性类型

interface People {
  age: number;
  List: string[];
  name: string;
}

const val: Pick<People, "age" | "List">;

// 等价于

interface People {
   age: number;
   List: string[];
}

5. Record

转化为同一种类型,主要用于转化对象的参数相同结构的定义


const val: Record<"age" | "name", string>;
// 等价于
interface Test {
  age: string;
  name: string;
}

6. Exclude

排除目标的类型的 key(第一个参数为类型,第二参数为排除的属性类型)

interface People {
  age: number;
  List: string[];
  name: string;
  phone:number
}
const val: Exclude<keyof People, "age" | "List">;

// 等价于
"region" | "phone";

7. Extract

提取目标类型的 key,只会提取存在key的类型

interface People {
  age: number;
  List: string[];
  name: string;
  phone:number
}
const val: Extract<keyof People, "age" | "name" | "name666">;

// 等价于
"age" | "name";

8. Omit

过滤不需要的属性

interface People {
  age: number;
  List: string[];
  name: string;
  phone:number
}

const val: Omit<Test, "age">;

// 等价于

interface People {
  List: string[];
  name: string;
  phone:number
}

9. NonNullable

值不能为 null 或 undefined

const val: NonNullable<undefined>;

// 等价于
const val: never;
  1. Parameters

获取函数的入参元组

function fn2(a: string[], b: number) {}

const val: Parameters<typeof fn2>;

// 等价于
const val: [string[], number];

11. ConstructorParameters

获取构造函数的入参元组

class Constructions {
  constructor(a: string, b: number) {}
}

const val: ConstructorParameters<typeof Constructions>;

// 等价于
const val: [string, number];

12. ReturnType

获取函数的返回值类型

function fn1(a: string, b: number) {
  return { a, b };
}

const val: ReturnType<typeof fn1>;

// 等价于
const val: {
  a: string;
  b: string;
};

符号

1. extends 约束或者条件类型 继承某个类型

如在左边时为约束

type People<T extends string> = {
  [P in T]: string;
};

T 只能为 string 类型

如在右边时为条件

type People<T> = T extends string ? number : T;

// 如
const val: People<"abc">;

//等价于
const val: number;

T 属于 string,返回 never

2. keyof

获取定义的 key

interface People {
  name: string;
  phone:number
}

const val: keyof People;

// val: "phone"|"name"

3. typeof

获取某个值的定义,一般用于接口返回值不明确的情况下或者遍历map的item项

interface People {
  age: number;
  List: string[];
  name: string;
  phone:number
}
const val: People;

const a: typeof val;
// 获取到定义
interface People {
  age: number;
  List: string[];
  name: string;
  phone:number
}

4. in

遍历如 for...in

它遍历是这样结构的"a"|"b"|"c",这个相当于数组

type Test<T extends keyof string|number|symbol> = {
  [P in T]: string;
};

// 如
const val: Test<"abc" | "bcd">;

//等价于
const val: { abc: string; bcd: string };

注意in只能遍历string|number|symbol

以上ts工具的用法在日常工作中已经够用了,欢迎评论区大佬补充