H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】typescript怎么定义全局的函数?

出现的问题

想在所有ts/tsx中引用一个辅助函数。(使用import太麻烦而且使用频率很高)。

解决方案(解决不完整)

  • 使用webpack

webpack倒是可以利用resolve创建全局变量引用,但是利用这种黑科技也不能算解决问题吧?

  • 挂载window

看到whatwg-fetch的源码和@types/whatwg-fetch是使用的这种方案,但是我为了这种使用方式要去发布一个npm包,还要去写一个d.ts文件么?(有点扯淡)

  • global.d.ts

看到typescript中有global.d.ts,但是官方给出的例子都是对全局对象/方法的类型抽象。
例如:

declare namespace myLib {
    function encodechar(data: any, opts?:any)
}

myLib的确作为了全局,但是实现的方法在哪实现?

刚开始接触typescript,基本属于小白,求不吐槽-。-

谢谢回答~

补充

2017.2.20 add

最近研究了一下typescript总算是有些深刻的理解。毕竟是个强语言类型检测。对于上文中如何实现global.d.ts做出解答。

global.d.ts是对ts文件的一个类型或者说全局的检测。在tsconfig可以设置文件检测范围。

当然即使在ts文件中实现你需要的方法(例如:encodechar),其实也没用。

只是你的IDE检测到有这么个全局方法的是现实,因此IDE不会报错。但是如果妄想让typescript转成js的时候帮你再引入这个全局方法,你就想多了!运行时会报is not defined

如果解决这个问题的话请参照之前写的前两条webpack(Resolve alias)、挂载window(挂载到全局就不怕找不到了-。-)

回答:

最近研究了一下typescript总算是有些深刻的理解。毕竟是个强语言类型检测。对于上文中如何实现global.d.ts做出解答。

global.d.ts是对ts文件的一个类型或者说全局的检测。在tsconfig可以设置文件检测范围。

当然即使在ts文件中实现你需要的方法(例如:encodechar),其实也没用。

只是你的IDE检测到有这么个全局方法的是现实,因此IDE不会报错。但是如果妄想让typescript转成js的时候帮你再引入这个全局方法,你就想多了!运行时会报is not defined!

如果解决这个问题的话请参照之前写的前两条webpack(Resolve alias)、挂载window(挂载到全局就不怕找不到了-。-)

回答:

TypeScript 有两种模块化方式,一种是使用 ES6 的 import/export 及其 TS 对这种语法的微小扩展;另一种方式是使用 TS 特有的 namespace (命名空间)。在分析这两种模块化方式之前,我先推荐使用第一种方式,因为第二种方式涉及到模块引用顺序的问题(可以通过 /// <reference path="..." /> 来解决,但感觉不如 import 爽。

如果使用 namespace 方式的模块化,那么所有东西都是全局的,内部引用直接使用即可,TS 能识别出同一命名空间下 export 的内容;外部引用导入即可;全局使用(比如在页面上的 <script> 内,把命名空间写完整就好(仅仍然只能使用 export 的内容。

如果使用 ES6 模块方式的模块化,目前最好的方式可能就是挂到 window 上了,如果是在 Node 下,就需要挂到 global 上。如果要兼容,就得写点代码来判断全局对象。一般来说,用 TypeScript 写代码,就已经决定了要模块化,除非很少的时候需要在页面的 <script> 中调用脚本中的某些对象,这种情况往 window 上挂就行。如果是要做为库来发布,tsc 是可以编译生成 .d.ts 文件的,如果是引用 js,那就不存在静态类型检查的问题;如果是引用 ts,那就以模块化的方式引用;如果想以全局的方式引用 ts,那就在在全局对象上挂一个入口对象,然后在文档里说明,使用前自己申明这个对象(不需要提供 .d.ts),也就几行代码的事情,也不算麻烦。比如

declare global {
    interface Window {
        myEntry: EntryClass;
    }
}

本文地址:H5W3 » 【前端问题精选】typescript怎么定义全局的函数?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址