举例

简介

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

这些例子是按复杂度递增的顺序组织的。

例子

全局变量

文档

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

代码

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

声明

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

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

全局函数

文档

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

代码

  1. greet("hello, world");

声明

使用declare function声明函数。

  1. declare function greet(greeting: string): void;

带属性的对象

文档

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

代码

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

声明

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

  1. declare namespace myLib {
  2. function makeGreeting(s: string): string;
  3. let numberOfGreetings: number;
  4. }

函数重载

文档

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

代码

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

声明

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

可重用类型(接口)

文档

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

1- greeting:必需的字符串

2- duration: 可靠的时长(毫秒表示)

3- color: 可选字符串,比如‘#ff00ff’

代码

  1. greet({
  2. greeting: "hello world",
  3. duration: 4000
  4. });

声明

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

  1. interface GreetingSettings {
  2. greeting: string;
  3. duration?: number;
  4. color?: string;
  5. }
  6. declare function greet(setting: GreetingSettings): void;

可重用类型(类型别名)

文档

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

代码

  1. function getGreeting() {
  2. return "howdy";
  3. }
  4. class MyGreeter extends Greeter { }
  5. greet("hello");
  6. greet(getGreeting);
  7. greet(new MyGreeter());

声明

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

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

组织类型

文档

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

代码

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

声明

使用命名空间组织类型。

  1. declare namespace GreetingLib {
  2. interface LogOptions {
  3. verbose?: boolean;
  4. }
  5. interface AlertOptions {
  6. modal: boolean;
  7. title?: string;
  8. color?: string;
  9. }
  10. }

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

  1. declare namespace GreetingLib.Options {
  2. // Refer to via GreetingLib.Options.Log
  3. interface Log {
  4. verbose?: boolean;
  5. }
  6. interface Alert {
  7. modal: boolean;
  8. title?: string;
  9. color?: string;
  10. }
  11. }

文档

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

代码

  1. const myGreeter = new Greeter("hello, world");
  2. myGreeter.greeting = "howdy";
  3. myGreeter.showGreeting();
  4. class SpecialGreeter extends Greeter {
  5. constructor() {
  6. super("Very special greetings");
  7. }
  8. }

声明

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

  1. declare class Greeter {
  2. constructor(greeting: string);
  3. greeting: string;
  4. showGreeting(): void;
  5. }