原文地址

咱们应用开发TypeScript我的项目的时候或多或少都要用到第三方库。个别罕用的第三方库都有对应的类型文件,或者能够增加类型包。然而如果这个第三方库没有对应的类型文件能够用就会稍有麻烦。明天就来探讨一下这些都是怎么解决的。

第一种:第三方库是TypeScript开发的

这是最好的状况,自带类型。应用TypeScript开发的库在发到npm之前就编译为JS了,这样能够间接在浏览器和node环境下运行。同时,在外部应用呢的类型也一起打包公布到npm了。这些类型在index.d.ts文件,最终在node_modules下的我的项目目录里。

比方,react-content-loader是用TypeScript开发的,最终它的类型文件在node_modules/react-content-loader目录下。

这样的开发方式还有一个益处,那就是这些类型会和代码的变动同步。因为类型都是从理论的代码中编译得来的。

惋惜并不是所有我的项目都是TypeScript开发的。遇到这样的库很多的益处都没有了,比方智能提醒。。。那么应该怎么办呢。

第二种:第三方库有@types类型文件

很多第三方库不是用TypeScript开发的。这种状况能够应用DefinitelyTyped的形式类实现。有一个github库:DefnitelyTyped。这里就是用来存储类型文件的。所以第三方JS库的类型文件能够放在这里。比方React,能够用@types/reactstyled-component能够用@types/styled-component

这些类型都是社区保护的,也就是说应用这些库的人在保护这些库的类型。尽管不是齐全的不可控,还是有人会review这些类型文件。然而,不免的是这些类型不能和库一起演进,进而呈现类型和库不匹配的状况。毕竟库自身并不反对类型。

第三种:第三方库没有类型文件,也不是TypeScript开发的

TypeScript新建本人的类型非常简单。TypeScript默认的从node_modules目录的@types子目录,还有index.d.ts文件获取类型。也就是说你能够在你我的项目的任意地位建一个index.d.ts文件,增加类型。也能够在types目录下保护类型。

index.d.ts文件里,你能够定义你我的项目里的所有类型。记得把类型定义在特定的模块或者namespace下。比方:

declare module 'babel-plugin-relay/macro' {  export { graphql as default } from 'react-relay';}

因为这个库要这么用:

import graphql from 'babel-plugin-relay/macro';

monkeypatch

有时候在DefinitelyType,也就是@types/some-lib的类型是错的。要搞定这个谬误就只能用monkeypatch了。其实这样也不是一个好主见,最好是给DefinitlyType提一个pr。然而这样没那么快失效。所以只能走monkeypatch。

结尾也是一样,新建一个index.d.ts文件来寄存某个库的类型。在这个文件里申明你要解决的模块或者namespace。而后在这个模块里新的类型。而后,你要笼罩掉谬误的类型,你要先import以前的类型。比方当初有@testing-library/react-hooks

// inside types/testing-library__react-hooks/index.d.tsimport "@testing-library/react-hooks"declare module "@testing-library/react-hooks" {  interface RenderHookResult {    // This function is not included in the typings as of 3.2.1    wait(      callback: (...args: any[]) => any,      options?: { timeout?: number; suppressErrors?: boolean },    ): Promise<void>  }}

当初@testing-library/react-hooks不仅蕴含了原始的类型,也蕴含了新办法的类型定义。

最初

第三方类型十分重要,本文也阐明了咱们我的项目里的类型是如何解决的。一个稳固,与时俱进的类型是抉择第三方库的重要指标,因为精确的类型能够极大的帮忙开发。如果一个库没有类型定义,TypeScript也一样提供了一种机制来解决。