ts声明文件类型已定义

  npm install @types/jquery --save-dev

解释： 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;}#enumdeclare enum Directions {    Up,    Down,    Left,    Right}#namespace declare namespace jQuery {    function ajax(url: string, settings?: any): void;    namespace fn {        function extend(object: any): void;    }}

// types/foo/index.d.tsexport 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;    }}

// types/foo/index.d.ts# function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出export default function foo(): string;export default Directions;declare enum Directions {    Up,    Down,    Left,    Right}

// types/foo/index.d.tsdeclare const name: string;declare function getName(): string;declare class Animal {    constructor(name: string);    sayHi(): string;}declare enum Directions {    Up,    Down,    Left,    Right}#interface 前是不需要 declareinterface Options {    data: any;}export { name, getName, Animal, Directions, Options };

module 拓展

// types/foo-bar.d.tsdeclare module 'foo' {    export interface Foo {        foo: string;    }}declare module 'bar' {    export function bar(): string;}// src/index.tsimport { 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 文件

本文作者：前端漫谈(CheongHu)

联系邮箱：simple2012hcz@126.com