[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`。