• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

TypeScript-函数接口和混合类型接口

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  • 我们除了可以通过接口来限定对象以外, 我们还可以使用接口来限定函数
interface SumInterface {
    (a: number, b: number): number
}

let sum: SumInterface = function (x: number, y: number): number {
    return x + y;
}
let res = sum(10, 20);
console.log(res);

混合类型接口

  • 约定的内容中, 既有对象属性, 又有函数
  • 如果这个时候我有一个需求,就是要求定义一个函数实现变量累加

  • 分别来看看,没有使用 混合类型接口 之前不同的实现方案

  • 方式一(会污染全局空间)

let count = 0;

function demo() {
    count++;
    console.log(count);
}

demo();
demo();
demo();
  • 方式二(使用闭包)
  • 使用闭包确实可以解决污染全局空间的问题, 但是对于初学者来说不太友好
let demo = (() => {
    let count = 0;
    return () => {
        count++;
        console.log(count);
    }
})();

demo();
demo();
demo();
  • 方式三(利用 JS 中函数的本质)
  • 在 JS 中函数的本质就是一个对象,然后我们就可以直接给该对象添加一个 count 属性进行累加
  • 第三种方式在 TS 当中进行编写是会报错的,要想在 TS 当中进行使用就需要使用到 混合类型接口,如果想要验证第三种方式可以新建一个 JS 文件在其中进行编写和运行即可
let demo = function () {
    demo.count++;
}
demo.count = 0;
demo();
demo();
demo();

使用混合类型接口

interface CountInterface {
    (): void

    count: number
}

let getCounter = (function (): CountInterface {
    let fn = <CountInterface>function () {
        fn.count++;
        console.log(fn.count);
    }
    fn.count = 0;
    return fn;
})();
getCounter();
getCounter();
getCounter();
  • 如上代码 CountInterface 接口要求数据既要是一个没有参数没有返回值的函数, 又要是一个拥有 count 属性的对象
  • fn 作为函数的时候符合接口中函数接口的限定 ():void
  • fn 作为对象的时候符合接口中对象属性的限定 count:number


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
解决Typescript报错:Property 'style' does not exist on type 'Element'发布时间:2022-07-18
下一篇:
TypeScript设计模式之门面、适配器发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap