举例_TypeScript 开发教程

这篇指南的目的是教你如何书写高质量的TypeScript声明文件。我们在这里会展示一些API的文档，还有它们的使用示例，并且阐述了如何为它们书写声明文件。

全局变量

全局变量foo包含了存在组件总数。

console.log("Half the number of widgets is " + (foo / 2));

使用declare var声明变量。如果变量是只读的，那么可以使用declare const。你还可以使用declare let如果变量拥有块级作用域。

/** 组件总数 */
declare var foo: number;

全局函数

用一个字符串参数调用greet函数向用户显示一条欢迎信息。

greet("hello, world");

使用declare function声明函数。

declare function greet(greeting: string): void;

带属性的对象

全局变量myLib包含一个makeGreeting函数，还有一个属性numberOfGreetings指示目前为止欢迎数量。

let result = myLib.makeGreeting("hello, world");
console.log("The computed greeting is:" + result);
let count = myLib.numberOfGreetings;

使用declare namespace描述用点表示法访问的类型或值。

declare namespace myLib {
    function makeGreeting(s: string): string;
    let numberOfGreetings: number;
}

函数重载

getWidget函数接收一个数字，返回一个组件，或接收一个字符串并返回一个组件数组。

let x: Widget = getWidget(43);
let arr: Widget[] = getWidget("all of them");

declare function getWidget(n: number): Widget;
declare function getWidget(s: string): Widget[];

可重用类型（接口）

当指定一个欢迎词时，你必须传入一个GreetingSettings对象。这个对象具有以下几个属性：

greeting：必需的字符串
duration: 可靠的时长（毫秒表示）
color: 可选字符串，比如‘#ff00ff’

greet({
  greeting: "hello world",
  duration: 4000
});

使用interface定义一个带有属性的类型。

interface GreetingSettings {
  greeting: string;
  duration?: number;
  color?: string;
}
declare function greet(setting: GreetingSettings): void;

可重用类型（类型别名）

在任何需要欢迎词的地方，你可以提供一个string，一个返回string的函数或一个Greeter实例。

function getGreeting() {
    return "howdy";
}
class MyGreeter extends Greeter { }
greet("hello");
greet(getGreeting);
greet(new MyGreeter());

你可以使用类型别名来定义类型的短名：

type GreetingLike = string | (() => string) | MyGreeter;
declare function greet(g: GreetingLike): void;

组织类型

greeter对象能够记录到文件或显示一个警告。你可以为.log(...)提供LogOptions和为.alert(...)提供选项。

const g = new Greeter("Hello");
g.log({ verbose: true });
g.alert({ modal: false, title: "Current Greeting" });

使用命名空间组织类型。

declare namespace GreetingLib {
    interface LogOptions {
        verbose?: boolean;
    }
    interface AlertOptions {
        modal: boolean;
        title?: string;
        color?: string;
    }
}

你也可以在一个声明中创建嵌套的命名空间：

declare namespace GreetingLib.Options {
    // Refer to via GreetingLib.Options.Log
    interface Log {
        verbose?: boolean;
    }
    interface Alert {
        modal: boolean;
        title?: string;
        color?: string;
    }
}

类

你可以通过实例化Greeter对象来创建欢迎词，或者继承Greeter对象来自定义欢迎词。

const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();
class SpecialGreeter extends Greeter {
    constructor() {
        super("Very special greetings");
    }
}

使用declare class描述一个类或像类一样的对象。类可以有属性和方法，就和构造函数一样。

declare class Greeter {
    constructor(greeting: string);
    greeting: string;
    showGreeting(): void;
}

下一节：组织模块以提供你想要的API形式保持一致是比较难的。比如，你可能想要这样一个模块，可以用或不用new来创建不同的类型，在不同层级上暴露出不同的命名类型，且模块对象上还带有一些属性。阅读这篇指定后，你就会了解如果书写复杂的暴露出友好API的声明文件。这篇指定针对于模块（UMD）库，因为它们的选择具有更高的可变性。