TypeScript从d.ts说起

TypeScript从d.ts说起

TypeScript(以下简称TS),作为JavaScript(以下简称js)的一个超集,已经深受大家的喜爱了。他解决了js当中没有类型系统的问题。既提供了静态检查,也为开发过程中带来了代码提示。

显然我们很多项目依然是js作为主力开发的语言。那么当我们也想享受TS带来的便利,或者当我们新的项目想使用TS无法兼容旧的js库时。我们应该怎么做呢?

答案就是d.ts。TS为我们提供了一种方法为原本的js代码去声明类型,这种方法就是去编写d.ts文件。

三种方式

对于d.ts有三种方式来使用它为我们的js代码添加类型信息。

1.在原本的js文件路径添加同名.d.ts文件

编辑器会在你导入文件时寻找到同一路径下的d.ts文件,并将你声明的类型信息和你的js文件相对应。

优点:简单方便。

缺点:文件多了之后不便于管理。

2.在package.json当中指定types文件夹

你可以在项目的package.json当中通过types属性指定你的类型信息路径。编辑器依然会正确识别你导入文件的同名.d.ts文件中声明的类型信息。

优点:集中管理不和其他文件混杂

缺点:仅适用于为自己发布的npm包有效。

3.编写专门的@types包

我们可以通过单独为我们的包编写另一个types包,另立一个项目。编辑器会自动从node_modules文件夹下查找@types文件夹中对应的项目来获取类型信息。这种方式一般适用于为不在自己掌握的第三方库添加类型信息。

优点:能适用于第三方库

缺点:维护成本较大

值得注意的一些问题

1.对于package的browser项无法识别。

编辑器是没法知道你现在写的文件是会用到服务端还是浏览器端的。因此如果你使用了browser项,编辑器是不会读取到你写在同一目录下的同名d.ts文件。只能通过在main配置项的同一目录下同名文件同时声明两个文件中的类型。

2.方法入参是一个对象。

当方法的入参是一个对象的时候,通常我们可能会把他声明成一个接口或类型。但是这样的话,当代码提示的时候只会提示到你的参数属于某一个类型,而不会提示出这个类型具体有哪些参数。因此,建议如果这个对象不是过分复杂,可以直接将他写在入参里。

declare interface dataParams {
  method: 'GET' | 'POST',
  action?: string,
  qs?: object,
  form?: object,
  restfulParams?: object,
  json?: object,
  body?: object | string,
  req?: object,
  headers?: object,
}

/**
 * 请求
 * @param params 参数
 */
declare function isomorphicData(params: dataParams): Promise<Object>;
// 推荐做法
/**
 * 请求
 * @param params 参数
 */
declare function isomorphicData(params: {
  method: 'GET' | 'POST',
  action?: string,
  qs?: object,
  form?: object,
  restfulParams?: object,
  json?: object,
  body?: object | string,
  req?: object,
  headers?: object,
}): Promise<Object>;

3.声明合并

在js当中,我们时常会在声明了一个方法之后再为这个方法添加一些属性和方法。而在TS声明当中,方法并不能为其声明属性或方法。因此我们需要使用声明合并的方式来为其添加声明。

//js代码
async function isomorphicData(method = 'GET') {
  ...
  return data;
}

isomorphicData.setDirname = (dirname) => {
  config.actionDirname = dirname;
};

// d.ts代码
/**
 * 请求
 * @param params 参数
 */
declare function isomorphicData(params: {
  method: 'GET' | 'POST',
}): Promise<Object>;

declare namespace isomorphicData {

  /**
   * 设置数据处理程序目录,默认为projectDir / data
   * 已弃用,请改用init
   * @param dirname 请求配置所在路径
   */
  function setDirname(dirname: string): void;
}

值得注意的是并不是所有的类型都支持合并声明。

4.泛型系统

其实熟悉其他有类型的语言的同学,应该对泛型系统很熟悉了。泛型其实本质上就是一种多态。

现在我们有一个函数,接受一个参数,返回一个参数。在不用多态的方式下我们可能会写成:

declare function identity(arg:any):any

这样子我们就丢失了它输入的类型就是他返回的类型的信息,那么我们也可以通过重载来写全。

declare function identity(arg:number):number

declare function identity(arg:Function):Function

declare function identity(arg:String):String

...

但是这样很啰嗦,而且也不可能写全所有类型。因此我们还是需要用到泛型。

declare function identity<T>(arg:T):T

这里声明了一个T的泛型,接受一个T类型的arg,返回一个T类型的值。当你调用这个方法时,不需要主动去说明T泛型的具体类型。TS会根据arg的值来做类型推断。

4.类型兼容

对于d.ts的类型文件来讲,如果我们只是使用在js当中来提供类型提示的话,类型兼容并不是很重要。因为js并不会对他进行类型检查。但是在TS当中使用第三方包时的d.ts类型文件就非常重要了。

首先是可选属性:对于一些类型可能并不是所有属性都是必须的。所以我们可以通过?设置可选属性来通过类型判断。

declare interface cat {
  eyes:String,
  name?:String
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容