相关文章推荐
暴走的茴香  ·  TypeScript中联合类型赋值null/ ...·  2 月前    · 
慷慨大方的皮带  ·  vue3+ts:shims-vue.d.ts·  1 月前    · 
叛逆的山楂  ·  调试 JavaScript 或 ...·  1 月前    · 
还单身的上铺  ·  “2021粤戏越精彩·广东省地方戏曲传统折子 ...·  4 月前    · 
打酱油的稀饭  ·  最新研究称欧洲快递业务量增速高于收入增速B2 ...·  6 月前    · 
爱看书的核桃  ·  【专题报道】“封国”中的意大利:条条大路何时 ...·  8 月前    · 
活泼的骆驼  ·  2024沈阳工程学院研究生招生简章_大学生必备网·  9 月前    · 
独立的火龙果  ·  曹忠明大使会见苏州市委常委、宣传部部长金洁_ ...·  11 月前    · 
Code  ›  TS 的构造签名和构造函数类型是啥?傻傻分不清楚开发者社区
构造函数 typescript
https://cloud.tencent.com/developer/article/1602920
阳刚的红茶
1 年前
作者头像
阿宝哥
0 篇文章

TS 的构造签名和构造函数类型是啥?傻傻分不清楚

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > 全栈修仙之路 > TS 的构造签名和构造函数类型是啥?傻傻分不清楚

TS 的构造签名和构造函数类型是啥?傻傻分不清楚

作者头像
阿宝哥
发布 于 2020-03-23 16:40:48
7.7K 0
发布 于 2020-03-23 16:40:48
举报

创建了一个“重学TypeScript”的微信群,想加群的小伙伴,加我微信”semlinker”,备注重学TS哟

一、构造签名

在 TypeScript 接口中,你可以使用 new 关键字来描述一个构造函数:

interface Point {
  new (x: number, y: number): Point;
}

以上接口中的 new (x: number, y: number) 我们称之为构造签名,其语法如下:

ConstructSignature: new TypeParametersopt ( ParameterListopt ) TypeAnnotationopt

在上述的构造签名中, TypeParametersopt 、 ParameterListopt 和 TypeAnnotationopt 分别表示:可选的类型参数、可选的参数列表和可选的类型注解。与该语法相对应的几种常见的使用形式如下:

new C  
new C ( ... )  
new C < ... > ( ... )

二、构造函数类型

在 TypeScript 语言规范中这样定义构造函数类型:

An object type containing one or more construct signatures is said to be a constructor type . Constructor types may be written using constructor type literals or by including construct signatures in object type literals.

通过规范中的描述信息,我们可以得出以下结论:

  • 包含一个或多个构造签名的对象类型被称为构造函数类型;
  • 构造函数类型可以使用构造函数类型字面量或包含构造签名的对象类型字面量来编写。

那么什么是构造函数类型字面量呢?构造函数类型字面量是包含单个构造函数签名的对象类型的简写。具体来说,构造函数类型字面量的形式如下:

new < T1, T2, ... > ( p1, p2, ... ) => R

该形式与以下对象字面量类型是等价的:

{ new < T1, T2, ... > ( p1, p2, ... ) : R }

下面我们来举个实际的示例:

// 构造函数字面量
new (x: number, y: number) => Point

等价于以下对象类型字面量:

{
   new (x: number, y: number): Point;
}

三、构造函数类型的应用

在介绍构造函数类型的应用前,我们先来看个例子:

interface Point {
  new (x: number, y: number): Point;
  x: number;
  y: number;
class Point2D implements Point {
  readonly x: number;
  readonly y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
const point: Point = new Point2D(1, 2);

对于以上的代码,TypeScript 编译器会提示以下错误信息:

Class 'Point2D' incorrectly implements interface 'Point'.
Type 'Point2D' provides no match for the signature 'new (x: number, y: number): Point'.

相信很多刚接触 TypeScript 不久的小伙伴都会遇到上述的问题。要解决这个问题,我们就需要把对前面定义的 Point 接口进行分离,即把接口的属性和构造函数类型进行分离:

interface Point {
  x: number;
  y: number;
interface PointConstructor {
  new (x: number, y: number): Point;
}

完成接口拆分之后,除了前面已经定义的 Point2D 类之外,我们又定义了一个 newPoint 工厂函数,该函数用于根据传入的 PointConstructor 类型的构造函数,来创建对应的 Point 对象。

class Point2D implements Point {
  readonly x: number;
  readonly y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
function newPoint(
  pointConstructor: PointConstructor,
  x: number,
 
推荐文章
暴走的茴香  ·  TypeScript中联合类型赋值null/undefined_type 'boolean' is not assignable to type 'location
2 月前
慷慨大方的皮带  ·  vue3+ts:shims-vue.d.ts
1 月前
叛逆的山楂  ·  调试 JavaScript 或 TypeScript 应用 - Visual Studio (Windows) | Microsoft Learn
1 月前
还单身的上铺  ·  “2021粤戏越精彩·广东省地方戏曲传统折子戏展演”成功举办
4 月前
打酱油的稀饭  ·  最新研究称欧洲快递业务量增速高于收入增速B2C业务量超过B2B ...
6 月前
爱看书的核桃  ·  【专题报道】“封国”中的意大利:条条大路何时再通罗马? | | 1联合国 ...
8 月前
活泼的骆驼  ·  2024沈阳工程学院研究生招生简章_大学生必备网
9 月前
独立的火龙果  ·  曹忠明大使会见苏州市委常委、宣传部部长金洁_中华人民共和国驻 ...
11 月前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号