详解什么是TypeScript里的Constructor signature

 更新时间:2023年07月27日 14:35:08   作者:JerryWang_汪子熙  
这篇文章主要介绍了什么是TypeScript里的Constructor signature详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Constructor signature

TypeScript 官方文档里关于 Constructor signature 只有这短短的一段话:

JavaScript functions can also be invoked with the new operator. TypeScript refers to these as constructors because they usually create a new object. You can write a construct signature by adding the new keyword in front of a call signature:

JavaScript 函数也可以使用 new 运算符调用。 TypeScript 将这些称为构造函数,因为它们通常会创建一个新对象。

编写构造签名

您可以通过在调用签名前添加 new 关键字来编写构造签名:

type SomeConstructor = {
  new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
  return new ctor("hello");
}

但这个例子还是看得我一头雾水,自己摸索了一下,写了一个例子:

type Jerry = {
    score: number;
}
type SomeConstructor = {
    new(s: number): Jerry;
};
class MyConstructor implements Jerry{
    score: number;
    constructor(score: number){
        this.score = score;
    }
}
function demo(ctor: SomeConstructor, number:number) {
    return new ctor(number);
}
console.log('Ethan:' , demo(MyConstructor, 100));
console.log('Ethan:' , demo(MyConstructor, 200));

定义新的函数类型

下面的代码使用 constructor signature 定义了一个新的函数类型:

接收的输入是 number,输出是自定义类型 Jerry.

如果去掉 new,就是我们已经熟悉的 call signature 语法.

class MyConstructor 实现了 Jerry 类型:

MyConstructor 可以看成 SomeConstructor 的一种具体实现。

这样,凡是输入参数需要传入 SomeConstructor 的地方,我传 MyConstructor 进去,一样能够工作。

demo 在这里相当于工厂函数,我们可以看到,尽管应用代码里没有显式使用 new 关键字,最后还是获得了两个不同的实例:

以上就是详解什么是TypeScript里的Constructor signature的详细内容,更多关于TypeScript Constructor signature的资料请关注脚本之家其它相关文章!

相关文章

  • TypeScript中的函数重载示例分析

    TypeScript中的函数重载示例分析

    这篇文章主要为大家介绍了TypeScript中的函数重载示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 微信小程序实现图片预加载组件

    微信小程序实现图片预加载组件

    预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。下面这篇文章主要介绍了微信小程序实现图片预加载组件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • TypeScript 泛型接口具体使用实战

    TypeScript 泛型接口具体使用实战

    这篇文章主要为大家介绍了TypeScript 泛型接口具体使用实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • jsf实现微信小程序简洁登录页面(附源码)

    jsf实现微信小程序简洁登录页面(附源码)

    这篇文章主要介绍了实现微信小程序简洁登录页面 ,对于正在学习的小伙伴都有一定的参考价值,需要的小伙伴可以参考一下
    2022-01-01
  • TypeScript十大排序算法之选择排序实现示例详解

    TypeScript十大排序算法之选择排序实现示例详解

    这篇文章主要为大家介绍了TypeScript十大排序算法之选择排序实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Typescript装饰器AOP示例详解

    Typescript装饰器AOP示例详解

    这篇文章主要为大家介绍了Typescript装饰器AOP示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • ThreeJS使用纹理贴图创建一个我的世界草地方块

    ThreeJS使用纹理贴图创建一个我的世界草地方块

    这篇文章主要为大家介绍了ThreeJS使用纹理贴图创建一个我的世界草地方块的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • typescript快速上手的基础知识篇

    typescript快速上手的基础知识篇

    静态类型的typescript与传统动态弱类型语言javascript不同,在执行前会先编译成javascript,因为它强大的type类型系统加持,能让我们在编写代码时增加更多严谨的限制。注意,它并不是一门全新的语言,所以并没有增加额外的学习成本
    2022-12-12
  • Typescript是必须要学习吗?如何学习TS全栈开发

    Typescript是必须要学习吗?如何学习TS全栈开发

    Typescript目前在前端,网站,小程序中的位置基本无可替代,同时也可以构建完美的CLI应用。在移动,桌面,后端方面,性能不是要求很高的情况下完全可以胜任,并且在区块链,嵌入式,人工智能方面也开始茁壮成长。
    2022-12-12
  • TypeScript与JavaScript的区别分析

    TypeScript与JavaScript的区别分析

    TypeScript可以使用JavaScript中的所有代码和编程概念,TypeScript是为了使JavaScript的开发变得更加容易而创建的。推荐先精通JS的的前提下再学习TS,这样更有利于同时学习两门语言。
    2022-12-12

最新评论