[TOC] ## npm 包中使用 ### 與該 npm 包綁定在一起 判斷依據是`package.json`中有`types`字段，或者有一個`index.d.ts`聲明文件。這種模式不需要額外安裝其他包，是最為推薦的 ### 發布到`@types`里 我們只需要嘗試安裝一下對應的`@types`包就知道是否存在該聲明文件，安裝命令是`npm install @types/foo --save-dev`,模式一般是由于 npm 包的維護者沒有提供聲明文件 ### types目錄管理 如果以上兩種都沒有,則需要自己寫d.ts 文件,創建一個`types`目錄，專門用來管理自己寫的聲明文件，將`foo`的聲明文件放到 `types/foo/index.d.ts`中。這種方式需要配置下`tsconfig.json`中的`paths`和`baseUrl`字段 ``` /path/to/project ├── src | └── index.ts ├── types | └── foo | └── index.d.ts └── tsconfig.json ``` `tsconfig.json`內容： ``` { "compilerOptions": { "module": "commonjs", "baseUrl": "./", "paths": { "*": ["types/*"] } } } ``` 此時項目就會去type目錄中找的d.ts 文件 ## export `xport`的語法與普通的 ts 中的語法類似 ``` // types/foo/index.d.ts export const name: string; export function getName(): string; export class Animal { constructor(name: string); sayHi(): string; } export enum Directions { Up, Down, Left, Right } export interface Options { data: any; } ``` 使用 ``` // src/index.ts import { name, getName, Animal, Directions, Options } from 'foo'; console.log(name); let myName = getName(); let cat = new Animal('Tom'); let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; let options: Options = { data: { name: 'foo' } }; ``` ## 混用 declare 和 export ``` // types/foo/index.d.ts declare const name: string; declare function getName(): string; declare class Animal { constructor(name: string); sayHi(): string; } declare enum Directions { Up, Down, Left, Right } interface Options { data: any; } export { name, getName, Animal, Directions, Options }; ``` ## export namespace ``` // types/foo/index.d.ts export namespace foo { const name: string; namespace bar { function baz(): string; } } ``` 使用 ``` // src/index.ts import { foo } from 'foo'; console.log(foo.name); foo.bar.baz(); ``` ## export default 使用`export default`可以導出一個默認值，使用方可以用`import foo from 'foo'`而不是`import { foo } from 'foo'`來導入這個默認值 ``` // types/foo/index.d.ts export default function foo(): string; ``` 使用 ``` // src/index.ts import foo from 'foo'; foo(); ``` 只有`function`、`class`和`interface`可以直接默認導出，其他的變量需要先定義出來，再默認導出 如 枚舉需要如下方式導出 ``` // types/foo/index.d.ts export default Directions; declare enum Directions { Up, Down, Left, Right } ``` ## export = 在 commonjs 規范中，我們用以下方式來導出一個模塊 ``` // 整體導出 module.exports = foo; // 單個導出 exports.bar = bar; ``` 在ts 中針對這種導出,有多種方式可以導入 方式一: ``` // 整體導入 const foo = require('foo'); // 單個導入 const bar = require('foo').bar; ``` 方式二: ``` // 整體導入 import * as foo from 'foo'; // 單個導入 import { bar } from 'foo'; ``` 方式三: Ts 官方推薦 ``` // 整體導入 import foo = require('foo'); // 單個導入 import bar = require('foo').bar; ``` 對于這種使用 commonjs 規范的庫,假如要為它寫類型聲明文件的話，就需要使用到 export = ``` // types/foo/index.d.ts export = foo; declare function foo(): string; declare namespace foo { const bar: number; } ``` > 由于很多第三方庫是 commonjs 規范的，所以聲明文件也就不得不用到`export =`這種語法了。但是還是需要再強調下，相比與`export =`，我們更推薦使用 ES6 標準的`export default`和`export`。