TypeScript 学习笔记(二)：接口与类型别名、字面量类型

一、接口的定义

在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

二、接口的用途

接口的用途就是对行为和动作进行规范和约束，跟抽象类有点像，但是，接口中不能有方法体，只允许有方法定义。

三、接口用法：

1. 使用interface来定义接口：

  interface Info {
    
    
    firstName: string;
    lastName: string;
  }
  const getFullName = ({
     
      firstName, lastName }: Info) => {
    
    
    return `${
      
      firstName} ${
      
      lastName}`;
  };
  console.log(getFullName({
    
     firstName: '123', lastName: '1231' }));

注意在定义接口的时候，你不要把它理解为是在定义一个对象，而要理解为{}括号包裹的是一个代码块，里面是一条条声明语句，只不过声明的不是变量的值而是类型。声明也不用等号赋值，而是冒号指定类型。每条声明之前用换行分隔即可，或者也可以使用分号或者逗号，都是可以的。

2. 可选属性

接口设置可选属性，在属性名后面加个?即可：

interface Vegetables {
    
    
  color?: string;
  type: string;
}

3. 多余属性检查

getVegetables({
    
    
  type: "tomato",
  size: "big" // 'size'不在类型'Vegetables'中
});

我们看到，传入的参数没有 color 属性，但也没有错误，因为它是可选属性。但是我们多传入了一个 size 属性，这同样会报错，TypeScript 会告诉你，接口上不存在你多余的这个属性。只要接口中没有定义这个属性，就会报错，但如果你定义了可选属性 size，那么上面的例子就不会报错。

4. 绕开多余属性检查

什么是接口的多余参数检查

interface Baseinfo {
    
    
    name:string,
    sex?:string
}
// 人 
function printPesonInfo(parmasinfo: Baseinfo) {
    
    
    console.log(`姓名：${
      
      parmasinfo.name }`)
}

// 如果直接传递参数，且传递的参数key未在接口中定义会提示错误
printPesonInfo( {
    
    name:'wang',age:13} ) // 报错的

在这里插入图片描述

使用类型断言

类型断言就是用来明确告诉 TypeScript，我们已经自行进行了检查，确保这个类型没有问题，希望 TypeScript 对此不进行检查，所以最简单的方式就是使用类型断言：

interface Baseinfo {
    
    
    name:string,
    sex?:string
}
// 人 
function printPesonInfo(parmasinfo: Baseinfo) {
    
    
    console.log(`姓名：${
      
      parmasinfo.name }`)
}

// 利用类型断言，告诉编译器我们传递的参数 就是Baseinfo 接口的东西
printPesonInfo( {
    
    name:'wang',age:13} as Baseinfo ) // wang

索引签名

interface Baseinfo {
    
    
    name:string,
    sex?:string,
    [other:string]:any
}
// 人 
function printPesonInfo(parmasinfo: Baseinfo) {
    
    
    console.log(`姓名：${
      
      parmasinfo.name }`)
}

// 接口中的索引签名other 就会收到age
printPesonInfo( {
    
    name:'wang',age:13}) // wang

利用类型兼容性

interface Baseinfo {
    
    
    name:string,
    sex?:string,
}
// 人 
function printPesonInfo(parmasinfo: Baseinfo) {
    
    
    console.log(`姓名：${
      
      parmasinfo.name }`)
}

let paramsinfo = {
    
    name:'wang',age:13} 
// 类型兼容性就是我们定义的paramsinfo 不管有都少东西，只要包含接口中定义的即可
printPesonInfo(paramsinfo) // 姓名：wang

5. 只读属性

关键字：readonly

const NAME: string = "Lison";
NAME = "Haha"; // Uncaught TypeError: Assignment to constant variable
 
const obj = {
    
    
  name: "lison"
};
obj.name = "Haha";
 
interface Info {
    
    
  readonly name: string;
}
const info: Info = {
    
    
  name: "Lison"
};
info["name"] = "Haha"; // Cannot assign to 'name' because it is a read-only property

6. 函数类型

接口可以描述普通对象，还可以描述函数类型，我们先看写法：

interface AddFunc {
    
    
  (num1: number, num2: number): number;
}

这里我们定义了一个AddFunc结构，这个结构要求实现这个结构的值，必须包含一个和结构里定义的函数一样参数、一样返回值的方法，或者这个值就是符合这个函数要求的函数。我们管花括号里包着的内容为调用签名，它由带有参数类型的参数列表和返回值类型组成。后面学到类型别名一节时我们还会学习其他写法。来看下如何使用：

const add: AddFunc = (n1, n2) => n1 + n2;
const join: AddFunc = (n1, n2) => ${
    
    n1} ${
    
    n2}; // 不能将类型'string'分配给类型'number'
add("a", 2); // 类型'string'的参数不能赋给类型'number'的参数

上面我们定义的add函数接收两个数值类型的参数，返回的结果也是数值类型，所以没有问题。而join函数参数类型没错，但是返回的是字符串，所以会报错。而当我们调用add函数时，传入的参数如果和接口定义的类型不一致，也会报错。

你应该注意到了，实际定义函数的时候，名字是无需和接口中参数名相同的，只需要位置对应即可。

四、接口的高阶用法

1. 索引类型

我们可以使用接口描述索引的类型和通过索引得到的值的类型，比如一个数组[‘a’, ‘b’]，数字索引0对应的通过索引得到的值为’a’。我们可以同时给索引和值都设置类型，看下面的示例：

  interface RoleDic {
    
    
    [id: number]: string;
  }
  const role1: RoleDic = {
    
    
    0: "superadmin",
    1: "admin"
  };
  console.log(role1);
  const role2: RoleDic = {
    
    
    s: "superadmin",  // error 不能将类型"{ s: string; a: string; }"分配给类型"RoleDic"。
    a: "admin"
  };
  console.log(role2);
  const role3: RoleDic = ["super_admin", "admin"];
  console.log(role3);

role2 报错信息：
在这里插入图片描述
上面的例子中 role3 定义了一个数组，索引为数值类型，值为字符串类型。

你也可以给索引设置readonly，从而防止索引返回值被修改。

interface RoleDic {
    
    
  readonly [id: number]: string;
}
const role: RoleDic = {
    
    
  0: "super_admin"
};
role[0] = "admin"; // error 类型"RoleDic"中的索引签名仅允许读取

这里有的点需要注意，你可以设置索引类型为 number。但是这样如果你将属性名设置为字符串类型，则会报错；但是如果你设置索引类型为字符串类型，那么即便你的属性名设置的是数值类型，也没问题。因为 JS 在访问属性值的时候，如果属性名是数值类型，会先将数值类型转为字符串，然后再去访问。你可以看下这个例子：

const obj = {
    
    
  123: "a", // 这里定义一个数值类型的123这个属性
  "123": "b" // 这里在定义一个字符串类型的123这个属性，这里会报错：标识符“"123"”重复。
};
console.log(obj); // { '123': 'b' }

在这里插入图片描述
如果数值类型的属性名不会转为字符串类型，那么这里数值123和字符串123是不同的两个值，则最后对象obj应该同时有这两个属性；但是实际打印出来的obj只有一个属性，属性名为字符串"123"，而且值为"b"，说明数值类型属性名123被覆盖掉了，就是因为它被转为了字符串类型属性名"123"；又因为一个对象中多个相同属性名的属性，定义在后面的会覆盖前面的，所以结果就是obj只保留了后面定义的属性值。

2. 继承接口

接口可以继承，这和类一样，这提高了接口的可复用性。来看一个场景：

我们定义一个Vegetables接口，它会对color属性进行限制。再定义两个接口，一个为Tomato，一个为Carrot，这两个类都需要对color进行限制，而各自又有各自独有的属性限制，我们可以这样定义：

interface Vegetables {
    
    
  color: string;
}
interface Tomato {
    
    
  color: string;
  radius: number;
}
interface Carrot {
    
    
  color: string;
  length: number;
}

三个接口中都有对color的定义，但是这样写很繁琐，所以我们可以用继承来改写：

 interface Vegetables {
    
    
  color: string;
}
interface Tomato extends Vegetables {
    
    
  radius: number;
}
interface Carrot extends Vegetables {
    
    
  length: number;
}
const tomato: Tomato = {
    
    
  radius: 1.2 // error  Property 'color' is missing in type '{ radius: number; }'
};
const carrot: Carrot = {
    
    
  color: "orange",
  length: 20
};

上面定义的 tomato 变量因为缺少了从Vegetables接口继承来的 color 属性，从而报错。

一个接口可以被多个接口继承，同样，一个接口也可以继承多个接口，多个接口用逗号隔开。比如我们再定义一个Food接口，Tomato 也可以继承 Food：

interface Vegetables {
    
    
  color: string;
}
interface Food {
    
    
  type: string;
}
interface Tomato extends Food, Vegetables {
    
    
  radius: number;
}
 
const tomato: Tomato = {
    
    
  type: "vegetables",
  color: "red",
  radius: 1.2
};  // 在定义tomato变量时将继承过来的color和type属性同时声明

3. 混合类型接口

JS 中，函数是对象类型。对象可以有属性，所以有时我们的一个对象，它既是一个函数，也包含一些属性。比如我们要实现一个计数器函数，比较直接的做法是定义一个函数和一个全局变量：

let count = 0;
const countUp = () => count++;

但是这种方法需要在函数外面定义一个变量，更优一点的方法是使用闭包：

// javascript
const countUp = (() => {
    
    
  let count = 0;
  return () => {
    
    
    return ++count;
  };
})();
console.log(countUp()); // 1
console.log(countUp()); // 2

// javascript
let countUp = () => {
    
    
  return ++countUp.count;
};
countUp.count = 0;
console.log(countUp()); // 1
console.log(countUp()); // 2

我们可以看到，我们把一个函数赋值给countUp，又给它绑定了一个属性count，我们的计数保存在这个 count 属性中。

我们可以使用混合类型接口来指定上面例子中 countUp 的类型：

interface Counter {
    
    
  (): void; // 这里定义Counter这个结构必须包含一个函数，函数的要求是无参数，返回值为void，即无返回值
  count: number; // 而且这个结构还必须包含一个名为count、值的类型为number类型的属性
}
const getCounter = (): Counter => {
    
     // 这里定义一个函数用来返回这个计数器
  const c = () => {
    
     // 定义一个函数，逻辑和前面例子的一样
    c.count++;
  };
  c.count = 0; // 再给这个函数添加一个count属性初始值为0
  return c; // 最后返回这个函数对象
};
const counter: Counter = getCounter(); // 通过getCounter函数得到这个计数器
counter();
console.log(counter.count); // 1
counter();
console.log(counter.count); // 2

上面的例子中，getCounter函数返回值类型为Counter，它是一个函数，无返回值，即返回值类型为void，它还包含一个属性count，属性返回值类型为number。

五、类型别名

类型别名就是给一种类型起个别的名字，之后只要使用这个类型的地方，都可以用这个名字作为类型代替，但是它只是起了一个名字，并不是创建了一个新类型。这种感觉就像 JS 中对象的赋值，你可以把一个对象赋给一个变量，使用这个对象的地方都可以用这个变量代替，但你并不是创建了一个新对象，而是通过引用来使用这个对象。

使用 type 关键字，定义类型别名：

type TypeString = string;
let str: TypeString;
str = 123; // error Type '123' is not assignable to type 'string'

类型别名也可以使用泛型：

type PositionType<T> = {
    
     x: T; y: T };
const position1: PositionType<number> = {
    
    
  x: 1,
  y: -1
};
const position2: PositionType<string> = {
    
    
  x: "right",
  y: "top"
};

使用类型别名时也可以在属性中引用自己：

type Child<T> = {
    
    
  current: T;
  child?: Child<T>;
};
let ccc: Child<string> = {
    
    
  current: "first",
  child: {
    
    
    // error
    current: "second",
    child: {
    
    
      current: "third",
      child: "test" // 这个地方不符合type，造成最外层child处报错
    }
  }
};

在这里插入图片描述

但是要注意，只可以在对象属性中引用类型别名自己，不能直接使用，比如下面这样是不对的：

type Child = Child[]; // error 类型别名“Child”循环引用自身

在这里插入图片描述
因为类型别名只是为其它类型起了个新名字来引用这个类型，所以当它为接口起别名时，不能使用 extends 和 implements 。

接口和类型别名有时可以起到同样作用，比如下面这个例子：

type Alias = {
    
    
  num: number;
};
interface Interface {
    
    
  num: number;
}
let alias: Alias = {
    
    
  num: 123
};
let interface: Interface = {
    
    
  num: 321
};
alias = interface;

可以看到用类型别名和接口都可以定义一个只包含 num 属性的对象类型，而且类型是兼容的。那么什么时候用类型别名，什么时候用接口呢？可以通过两点来选择：

当你定义的类型要用于拓展，即使用 implements 等修饰符时，用接口。
当无法通过接口，并且需要使用联合类型或元组类型，用类型别名。

六、字面量类型

1. 字符串字面量类型

字符串字面量类型其实就是字符串常量，与字符串类型不同的是它是具体的值。

type Name = "Lison";
const name1: Name = "test"; // error 不能将类型“"test"”分配给类型“"Lison"”
console.log(name1);
const name2: Name = "Lison";
console.log(name2);

在这里插入图片描述
使用联合类型来使用多个字符串：

type Direction = "north" | "east" | "south" | "west";
function getDirectionFirstLetter(direction: Direction) {
    
    
  return direction.substr(0, 1);
}
getDirectionFirstLetter("test"); // error 类型“"test"”的参数不能赋给类型“Direction”的参数
getDirectionFirstLetter("east");

2. 数字字面量类型

另一个字面量类型就是数字字面量类型，它和字符串字面量类型差不多，都是指定类型为具体的值。

type Age = 18;
interface Info {
    
    
  name: string;
  age: Age;
}
const info: Info = {
    
    
  name: "Lison",
  age: 28 // error 不能将类型“28”分配给类型“18”
};

这里补充一个比较经典的逻辑错误，来看例子：

function getValue(index: number) {
    
    
  if (index !== 0 || index !== 1) {
    
    
    // error This condition will always return 'true' since the types '0' and '1' have no overlap
    // ...
  }
}

在这里插入图片描述

这个例子中，在判断逻辑处使用了 || 符，当 index !== 0 不成立时，说明 index 就是 0，则不应该再判断 index 是否不等于 1；而如果 index !== 0 成立，那后面的判断也不会再执行；所以这个地方会报错。

七、Interface 与 Type 的区别

1. 区别

接口可以重复定义的接口类型，它的属性会叠加，类型别名不行

interface Language {
    
    
  id: number
}

interface Language {
    
    
  name: string
}

let lang: Language = {
    
    
  id: 1, // ok

  name: 'name', // ok
}

// 如果使用类型别名
/** ts(2300) 重复的标志 */
type Language = {
    
    
  id: number
}

/** ts(2300) 重复的标志 */
type Language = {
    
    
  name: string
}
let lang: Language = {
    
    
  id: 1,
  name: 'name',
}

type 可以使用联合类型和交集，interface 不能使用联合类型和交集组合

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 支持类型映射，interface不支持

type Keys = "firstname" | "surname"

type DudeType = {
    
    
  [key in Keys]: string
}

const test: DudeType = {
    
    
  firstname: "Pawel",
  surname: "Grzybek"
}

// 报错
//interface DudeType {
    
    
//  [key in keys]: string
//}

2. 相同点

都允许拓展（extends）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface ， 虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name {
    
     
  name: string; 
}
interface User extends Name {
    
     
  age: number; 
}

type extends type

type Name = {
    
     
  name: string; 
}
type User = Name & {
    
     age: number  };

interface extends type

type Name = {
    
     
  name: string; 
}
interface User extends Name {
    
     
  age: number; 
}

type extends interface

interface Name {
    
     
  name: string; 
}
type User = Name & {
    
     
  age: number; 
}

总结：
interface 只能用于定义对象类型和方法，而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等，类型声明的方式适用范围显然更加广泛。

但是interface也有其特定的用处：
interface 方式可以实现接口的 extends 和 implements
interface 可以实现接口合并声明