TypeScript:接口与类型

TypeScript

十三西门

2020-05-28

这些语句(接口与类型)之间有什么区别?

interface X {
    a: number
    b: string
}

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

第4236篇《TypeScript:接口与类型》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
Cathy 2020.05.28

该文件已经解释了

  • 一个区别是接口创建了一个新名称,该名称在任何地方都可以使用。类型别名不会创建新名称-例如,错误消息不会使用别名。在较早版本的TypeScript中,不能从中扩展或实现类型别名(也不能扩展/实现其他类型)。从2.7版开始,可以通过创建新的交集类型来扩展类型别名
  • 另一方面,如果您无法使用接口表达某种形状,而需要使用并集或元组类型,则通常使用类型别名。

接口与类型别名

Mandy 2020.05.28

类型示例:

//为对象创建树结构。由于缺少交集(&),因此无法对界面执行相同操作

type Tree<T> = T & { parent: Tree<T> };

//键入以限制变量只分配一些值。接口没有联合(|)

type Choise = "A" | "B" | "C";

//由于类型,您可以借助条件机制来声明NonNullable类型。

type NonNullable<T> = T extends null | undefined ? never : T;

接口示例:

//您可以将接口用于OOP并使用“实现”来定义对象/类框架

interface IUser {
    user: string;
    password: string;
    login: (user: string, password: string) => boolean;
}

class User implements IUser {
    user = "user1"
    password = "password1"

    login(user: string, password: string) {
        return (user == user && password == password)
    }
}

//您可以使用其他接口扩展接口

    interface IMyObject {
        label: string,
    }

    interface IMyObjectWithSize extends IMyObject{
        size?: number
    }
小小 2020.05.28

https://www.typescriptlang.org/docs/handbook/advanced-types.html

一个区别是接口创建了一个新名称,该名称在任何地方都可以使用。类型别名不会创建新名称-例如,错误消息不会使用别名。

留姬 2020.05.28

从TypeScript 3.2(2018年11月)开始,以下内容适用:

在此处输入图片说明

番长 2020.05.28

除了已经提供的出色答案之外,在扩展类型与接口方面还存在明显差异我最近遇到了几种接口无法完成工作的情况:

  1. 无法使用接口扩展联合类型
  2. 无法扩展通用接口
Vicky 2020.05.28

根据TypeScript语言规范

与总是引入命名对象类型的接口声明不同,类型别名声明可以为任何类型的类型引入名称,包括基本类型,联合类型和交集类型。

该规范继续提到:

接口类型与对象类型文字的类型别名有很多相似之处,但是由于接口类型提供了更多的功能,因此它们通常比类型别名更可取。例如,接口类型

interface Point {
    x: number;
    y: number;
}

可以写为类型别名

type Point = {
    x: number;
    y: number;
};

但是,这样做意味着失去了以下功能:

  • 可以在extend或Implements子句中命名接口,但是自TS 2.7起,对象类型文字的类型别名不能再为true。
  • An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android