相关文章推荐
稳重的海豚  ·  柔术_百度百科·  8 月前    · 
忧郁的感冒药  ·  浙江新和成股份有限公司招聘-厦门大学化学化工学院·  9 月前    · 
爱吹牛的水煮肉  ·  原创男演员的长相有多重要?看了《照亮你》的陈 ...·  2 年前    · 
大气的书包  ·  网曝德云社被约谈张九南被停演至今年底|劈腿| ...·  2 年前    · 
低调的钱包  ·  植树造林的好处和没树会怎样·  2 年前    · 
Code  ›  TS 的构造签名和构造函数类型是啥?傻傻分不清楚开发者社区
构造函数 typescript
https://cloud.tencent.com/developer/article/1602920
阳刚的红茶
2 年前
作者头像
阿宝哥
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,
 
推荐文章
稳重的海豚  ·  柔术_百度百科
8 月前
忧郁的感冒药  ·  浙江新和成股份有限公司招聘-厦门大学化学化工学院
9 月前
爱吹牛的水煮肉  ·  原创男演员的长相有多重要?看了《照亮你》的陈伟霆和任豪就知道了
2 年前
大气的书包  ·  网曝德云社被约谈张九南被停演至今年底|劈腿|张九南|德云社|恋爱_ ...
2 年前
低调的钱包  ·  植树造林的好处和没树会怎样
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号