类型别名

2023年03月02日

柏拉文

越努力，越幸运

一、认识

---

类型别名会给一个类型起个新名字。 类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。通常用type来实现类型别名.

二、别名

---

2.1 函数基础类型别名

基础函数

• 标准写法

  type Foo = { 
    (argu1: string, arug2: number) : number 
  };
  
  const foo: Foo = function (argu1, argu2) {
    return argu2;
  }

• 简介写法

  type Foo = (argu1: string, arug2: number) => number
  
  const foo: Foo = function (argu1, argu2) {
    return argu2;
  }

2.2 函数泛型类型别名

type Type<T> = {
  (str: T): T;
}

const say: Type<string> = (str) => {
  return str;
}

say('哈哈');

2.3 对象基础类型别名

type UserType = {
  name:string;
  age:number;
}

const obj : UserType = {
  name:'柏拉图',
  age:23
}

console.log(obj);

2.4 对象泛型类型别名

type UserType<T,V> = {
  name:T;
  age:V;
}

const obj : UserType<string,number> = {
  name:'柏拉图',
  age:23
}

console.log(obj);

2.5 对象可选属性类型别名

type Type = {
  name:string;
  age:number;
  sex?:string;
}

const obj:Type = {
  name:'哈哈',
  age:23,
  sex:'男',
}

2.6 对象属性函数类型别名

写法一: key(参数:参数类型):返回值类型写法

type Type = {
  name:string;
  age:number;
  say(str:string):string;
}

const obj:Type = {
  name:'哈哈',
  age:23,
  say(str){
    return str
  }
}

obj.say('哈哈');

写法二: key: (参数:参数类型) => 返回值类型写法

type Type = {
  name:string;
  age:number;
  say: (str:string) => string;
}

const obj:Type = {
  name:'哈哈',
  age:23,
  say(str){
    return str
  }
}

obj.say('哈哈');

2.7 对象不确定属性类型别名

• key 为 string 类型时: TypeScript 会将 number、string、symbol 统一转化为 string 类型

  type Type = {
    name:string;
    age:number;
    sex?:string;
    [key:string]:string|number
  }
  
  const obj:Type = {
    name:'哈哈',
    age:23,
    sex:'男',
    like:'篮球'
  }

• key 为 number 类型时: TypeScript 会将 string 类型的 number 、 number 同意转化为 number 类型，也就是说会进行数据类型转换。如果转换之后不是非 NaN 的 number 类型，那么会报错

  type Type = {
    name:string;
    age:number;
    sex?:string;
    [key:number]:string|number
  }
  const obj:Type = {
    name:'哈哈',
    age:23,
    sex:'男',
    "333":'呵呵',
    444:'呵呵'
  }

2.8 使用对象类型注解中的属性

type Type = {
  a: string;
  b: number;
};

const a: Type['a'] = '';

2.9 字符串字面量可选类型别名

type Type = "left" | "right" | "top" | "down";

enum typeList {
  left,
  right,
  top,
  down
}
const key: Type = 'left';
console.log(typeList[key]);

三、问题

---

3.1 类型别名与接口区别

• 定义类型范围不同: 接口只能定义对象类型或接口当名字的函数类型。type 可以定义任何类型，包括基础类型、联合类型、交叉类型、元组。
• 接口可以 extends 继承一个或者多个接口或类，也可以继承 type ，但是 type 类型没有 extends 继承功能
• type 交叉类型 & 可以让类型中的成员合并
• 定义两个相同名称的接口会合并声明，定义两个同名的 type 会出现编译错误。