LayaBox---TypeScript---Example

目录

1.介绍

 2.例子

2.1 全局变量

2.2 全局函数

2.3 Object with properties

2.4. 函数重载

2.5 Reusable types（接口）

2.6 Reusable types（类型别名）

2.7 组织类型

2.8 类

---

1.介绍

The examples are in order of increasing complexity：

• 全局变量
• 全局函数
• Object with properties
• 函数重载
• Reusable types（接口）
• Reusable types（类型别名）
• 组织类型
• 类

 2.例子

2.1 全局变量

全局变量fooContains the total number of components present.

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

 声明：使用declare var声明变量.

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

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

2.2 全局函数

Called with a string argumentgreetThe function displays a welcome message to the user.

greet("hello, world");

声明： 使用declare function声明函数.

declare function greet(greeting: string): void;

2.3 Object with properties

全局变量myLib包含一个makeGreeting函数, 还有一个属性 numberOfGreetingsIndicates the number of welcomes so far.

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

let count = myLib.numberOfGreetings;

 声明：使用declare namespaceDescribes a type or value accessed in dot notation.

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

2.4. 函数重载

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[];

2.5 Reusable types（接口）

When specifying a greeting,You must pass in oneGreetingSettings对象. This object has the following properties：

1- greeting：Required string

2- duration: reliable duration（毫秒表示）

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

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

声明： 使用interfaceDefine a type with properties.

interface GreetingSettings {
  greeting: string;
  duration?: number;
  color?: string;
}

declare function greet(setting: GreetingSettings): void;

2.6 Reusable types（类型别名）

Anywhere a welcome word is required,你可以提供一个string,一个返回stringfunction or oneGreeter实例.

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

greet("hello");
greet(getGreeting);
greet(new MyGreeter());

 声明：Type aliases can be used to define short names for types：

type GreetingLike = string | (() => string) | MyGreeter;

declare function greet(g: GreetingLike): void;

2.7 组织类型

greeterThe object can log to a file or display a warning. 你可以为 .log(...)提供LogOptions和为.alert(...)提供选项.

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

声明： Use namespaces to organize types.

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

You can also create nested namespaces within a declaration：

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

2.8 类

You can do this by instantiatingGreeterobject to create the greeting,或者继承Greeterobject to customize the greeting.

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;
}