ts類型聲明文件的正確使用姿式

ts類型聲明文件的正確使用姿式

ts聲明文件類型

DefinitelyTyped社區已定義

npm install @types/jquery --save-dev
複製代碼

與npm一同發佈

解釋： package.json 中有 types 字段，或者有一個 index.d.ts 聲明文件

自給自足型

• 建立一個 node_modules/@types/foo/index.d.ts 文件，存放 foo 模塊的聲明文件。不太建議用這種方案，通常只用做臨時測試。
• 建立一個 types 目錄，專門用來管理本身寫的聲明文件，將 foo 的聲明文件放到 types/foo/index.d.ts 中。這種方式須要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。

/path/to/project
    ├── src
    |  └── index.ts
    ├── types
    |  └── foo
    |     └── index.d.ts
    └── tsconfig.json
複製代碼

{
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}
複製代碼

ts聲明文件書寫姿式

全局型

# let 
declare let jQuery: (selector: string) => any;

# function 
declare function jQuery(selector: string): any;

#class 
declare class Animal {
    name: string;
    constructor(name: string);
    sayHi(): string;
}

#enum
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

#namespace 
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
    namespace fn {
        function extend(object: any): void;
    }
}
複製代碼

npm包型 - export

// 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;
}
export namespace foo {
    const name: string;
    namespace bar {
        function baz(): string;
    }
}
複製代碼

npm包型 - export default

// types/foo/index.d.ts
# function、class 和 interface 能夠直接默認導出，其餘的變量須要先定義出來，再默認導出
export default function foo(): string;

export default Directions;
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

複製代碼

npm包型 - 先聲明，在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 前是不須要 declare
interface Options {
    data: any;
}

export { name, getName, Animal, Directions, Options };
複製代碼

module 拓展

// types/foo-bar.d.ts

declare module 'foo' {
    export interface Foo {
        foo: string;
    }
}

declare module 'bar' {
    export function bar(): string;
}

// src/index.ts

import { Foo } from 'foo';
import * as bar from 'bar';

let f: Foo;
bar.bar();
複製代碼

三斜線指令

• 書寫一個全局變量的聲明文件
• 依賴一個全局變量的聲明文件

// types/jquery-plugin/index.d.ts

/// <reference types="jquery" />

declare function foo(options: JQuery.AjaxSettings): string;
複製代碼

ts文件tsc自動生成聲明文件

• 命令行參數

--declaration（簡寫 -d）
複製代碼

• tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "lib",
        "declaration": true,
    }
}
複製代碼

ts發佈

• 發佈到社區

@types 是統一由 DefinitelyTyped 管理的。要將聲明文件發佈到 @types 下，就須要給 DefinitelyTyped 建立一個 pull-request，其中包含了類型聲明文件，測試代碼，以及 tsconfig.json 等。
複製代碼

• 與源碼一塊兒（依次查找*.d.ts）
  • 1. 給 package.json 中的 types 或 typings 字段指定一個類型聲明文件地址
  • 2. 在項目根目錄下，編寫一個 index.d.ts 文件
  • 3. 針對入口文件（package.json 中的 main 字段指定的入口文件），編寫一個同名不一樣後綴的 .d.ts 文件

參考

• declaration-files

本文做者： 前端漫談

聯繫郵箱：simple2012hcz@126.com