Home

TS中类型的使用

# 类型注解

类型注解:(number | string)[]是最简单也是最常用的声明方式,

这种方式通过在元素类型后面加上 [] 来声明一个数组,其元素可以是 number 或 string 的类型(|也被称作联合类型)

let arr: (number | string)[] = [1, "a", 2, "b", 3, "c"];
let name:string = 'momo'
let isloding: boolean = true

# 数组泛型

数组泛型:Array<number | string>,这种方式使用 Array<T> 泛型来声明数组,其中 T 是数组元素的类型

let arr: Array<number | string> = [1, "a", 2, "b", 3, "c"];

# type(类型别名)

可以定义基本类型、对象类型、联合类型、元组、交叉类型。

//基本类型
type userName = string;
//对象类型
type Person = {
  name: userName;
  age: number;
  greet: () => void;
}
type MyFunction = ()=> void //函数
//联合类型
type id = string | number;  
//元组
type Person = [string , number]
let person:Person = ['momo',18]
//交叉类型
type Name = { name: string };  
type Age = { age: number };  
type Person = Name & Age;
//等同于
type Person = {
  name: userName;
  age: number;
}

还可以定义一些更复杂的类型,用途可以是结合旧类型创建新类型,提高代码的利用率

//条件类型  T extends U ? X : Y
type IsNumber<T> = T extends number ? true : false;  
type Result = IsNumber<string>; // false  

//映射类型 
type Partial<T> = {  
    [P in keyof T]?: T[P];  
};
type Person = {
  name: userName;
  age: number;
}
type PersonPartial = Partial<Person>;
let momo: PersonPartial = {  
    name: "momo" // age 属性是可选的  
};

//索引访问类型
type Prop<T, K extends keyof T> = T[K];
type PersonProps = {  
    name: string;  
    age: number;  
};  
type NameProp = Prop<PersonProps, 'name'>; // string

//推断类型
const arr = [1, 2, 3];
type ArrayType = typeof arr; // 定义ArrayType 等于 arr推荐出的类型 number[]

上面用到了in keyofextends keyof,考虑后面出一期单独介绍这几个ts高级语法

# interface(接口)

只能定义对象类型,即使函数接口也是对象的形式与type不同

//对象类型
interface Person  {
  name?: userName
  age: number
}
//函数
interface MyFunction {
  (x: number, y: number): number
}

# 类型复用

type定义的类型可以通过交叉类型(&)来进行复用,而interface定义的类型则可以通过继承(extends)来实现复用

//复用type定义的类型:
type Point = {
  x: number;
  y: number;
};

type Coordinate = Point & {
  z: number;
};

//复用interface定义的类型:
interface Point {
  x: number;
  y: number;
};

interface Coordinate extends Point {
  z: number;
}
//interface复用type定义的类型:
type Point = {
  x: number;
  y: number;
};

interface Coordinate extends Point {
  z: number;
}
//type复用interface定义的类型:
interface Point {
  x: number;
  y: number;
};

type Coordinate = Point & {
  z: number;
};

# 复用时排除和挑选想要的属性

例如,有一个已有的类型Props需要复用,但不需要其中的属性c。 Omit和Pick分别用于排除和选择类型中的属性

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Omit<Props, 'c'> {
  e: string;
}
interface Props1 extends Pick<Props, 'a' | 'b'> {
  e: string;
}

# 特性

同名接口interface会自动合并,同名类型别名type会冲突