首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >TypeScript:接口与类型

TypeScript:接口与类型
EN

Stack Overflow用户
提问于 2016-05-15 09:53:53
回答 12查看 382.3K关注 0票数 1.4K

这些语句(接口和类型)之间的区别是什么?

代码语言:javascript
复制
interface X {
    a: number
    b: string
}

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

回答 12

Stack Overflow用户

发布于 2018-10-07 02:38:15

2019更新

当前的答案和

官方文档

已经过时了。对于那些刚接触TypeScript的人来说,如果没有例子,他们所使用的术语是不清楚的。下面是最新的差异列表。

1.对象/函数

两者都可用于描述对象的形状或函数签名。但是语法不同。

接口

代码语言:javascript
复制
interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}

类型别名

代码语言:javascript
复制
type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2.其他类型

与接口不同,类型别名还可以用于其他类型,如基元、联合和元组。

代码语言:javascript
复制
// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

3.扩展

两者都可以扩展,但语法也不同。此外,请注意接口和类型别名并不是互斥的。接口可以扩展类型别名,反之亦然。

接口扩展接口

代码语言:javascript
复制
interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

类型别名扩展类型别名

代码语言:javascript
复制
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

接口扩展类型别名

代码语言:javascript
复制
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

类型别名扩展接口

代码语言:javascript
复制
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

4.实现

类可以以完全相同的方式实现接口或类型别名。但是请注意,类和接口被认为是静态蓝图。因此,它们不能实现/扩展命名联合类型的类型别名。

代码语言:javascript
复制
interface Point {
  x: number;
  y: number;
}

class SomePoint implements Point {
  x = 1;
  y = 2;
}

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

class SomePoint2 implements Point2 {
  x = 1;
  y = 2;
}

type PartialPoint = { x: number; } | { y: number; };

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x = 1;
  y = 2;
}

5.声明合并

与类型别名不同,接口可以定义多次,并且将被视为单个接口(所有声明的成员将被合并)。

代码语言:javascript
复制
// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };
票数 1.3K
EN

Stack Overflow用户

发布于 2020-08-25 21:05:05

何时使用

泛型转换

使用

将多个类型转换为单个泛型类型时。

示例:

代码语言:javascript
复制
type Nullable = T | null | undefined
type NonNull = T extends (null | undefined) ? never : T

类型别名

我们可以使用

用于为长的或复杂的类型创建别名,这些类型很难阅读,也不方便反复键入。

示例:

代码语言:javascript
复制
type Primitive = number | string | boolean | null | undefined

创建这样的别名可以使代码更简洁、更具可读性。

类型捕获

使用

在类型未知时捕获对象的类型。

示例:

代码语言:javascript
复制
const orange = { color: "Orange", vitamin: "C"}
type Fruit = typeof orange
let apple: Fruit

在这里,我们得到未知类型的

,称其为

然后使用

创建新的类型安全对象

..。

何时使用

多态性

一个

是实现数据形状的契约。使用该接口清楚地表明,它旨在实现并用作有关如何使用对象的约定。

示例:

代码语言:javascript
复制
interface Bird {
    size: number
    fly(): void
    sleep(): void
}

class Hummingbird implements Bird { ... }
class Bellbird implements Bird { ... }

尽管您可以使用

为了实现这一点,Typescript更多地被看作是一种面向对象的语言,而

在面向对象语言中占有特殊的位置。使用它可以更容易地阅读代码

当您在团队环境中工作或为开源社区做出贡献时。对于来自其他面向对象语言的新程序员来说,这也很容易。

官方打字稿

文档

还说:

..。我们建议您使用

超过一个

如果可能,请使用别名。

这也表明

更多用于创建类型别名,而不是创建类型本身。

声明合并

类的声明合并功能。

用于将新属性和方法添加到已声明的

..。这对于第三方库的环境类型声明很有用。当第三方库缺少某些声明时,可以使用相同的名称再次声明该接口,并添加新的属性和方法。

示例:

我们可以扩展上面的

接口以包含新声明。

代码语言:javascript
复制
interface Bird {
    color: string
    eat(): void
}

就是这样!记住什么时候使用什么比迷失在两者之间的细微差别中要容易得多。

票数 81
EN

Stack Overflow用户

发布于 2017-02-16 20:13:40

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

一个不同之处在于,接口创建了一个到处都可以使用的新名称。类型别名不会创建新名称-例如,错误消息不会使用别名。

票数 26
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37233735

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档