技术分享

使用TypeScript开发微信小程序(1)——基础:数据类型(Type)



TypeScript 的基本数据类型有boolean、number、string 、array、enum、any、void。

Boolean(布尔值)

最基本的数据类型就是简单的 true / false 值,称之为“布尔值”。

    let isDone: boolean = false;    console.log(isDone);

Number(数字)

TypeScript里的所有数字都是浮点数。这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量。

    let decimal: number = 6;    console.log(decimal); // 输出:6    let hex: number = 0xf00d;    console.log(hex); // 输出:61453    let binary: number = 0b1010;    console.log(binary); // 输出:10    let octal: number = 0o744;    console.log(octal); // 输出:484

String(字符串)

可以使用双引号( “)或单引号(’)表示字符串。

    let color: string = "blue";
    color = 'red';    console.log(color);    let fullName: string = `Bob Bobbington`;    console.log(fullName);

可以使用模版字符串,它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围( ` ),并且以${ expr }这种形式嵌入表达式。

    let name: string = "John"
    let age: number = 37;
    let sentence: string = `Hello, my name is ${name}.

        I'll be ${ age + 1} years old next month.`
    console.log(sentence);

Array(数组)

有两种方式可以定义数组。 第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组:

    let list: number[] = [1, 2, 3];    console.log(list);

第二种方式是使用数组泛型,Array<元素类型>:

    let genericList: Array<number> = [1, 2, 3];    console.log(genericList);

Tuple(元组)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,可以定义一对值分别为 string和number类型的元组。

    let x: [string, number];
    x = ["hello", 10];    // x = [10, "hello"]; // Error

当访问一个已知索引的元素,会得到正确的类型:

    let y: [string, number] = ["hello", 10];    console.log(y[0].substr(1)); //     // console.log(y[1].substr(1)); // Error

当访问一个越界的元素,会使用联合类型替代:

    let z: [string, number] = ["hello", 10];
    z[3] = "world";    console.log(z[3]);    console.log(z[3].toString());    // x[6] = true; // Error

Enum(枚举)

使用枚举可以定义一些有名字的数字常量。 枚举通过 enum关键字来定义。enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字。

    enum Color1 { Red, Green, Blue };    let c1: Color1 = Color1.Green;    console.log(c1);

默认情况下,从0开始为元素编号。 也可以手动的指定成员的数值。

    enum Color2 { Red = 1, Green, Blue };    let c2: Color2 = Color2.Green;    console.log(c2);

或者,全部都采用手动赋值:

    enum Color3 { Red = 1, Green = 2, Blue = 4 };    let c3: Color3 = Color3.Green;    console.log(c3);

枚举类型提供的一个便利是可以由枚举的值得到它的名字。

    enum Color4 { Red = 1, Green, Blue };    let colorName: string = Color4[2];    console.log(colorName);

Any(任意值)

有时候想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么可以使用 any 类型来标记这些变量:

    let notSure: any = 4;
    notSure = "maybe a string instead";    console.log(notSure);
    notSure = false;    console.log(notSure);

在对现有代码进行改写的时候,any 类型是十分有用的,它允许在编译时可选择地包含或移除类型检查。 Object类型的变量只是允许给它赋任意值(但是却不能够在它上面调用任意的方法,即便它真的有这些方法)

当只知道一部分数据的类型时,any 类型也是有用的。

    let list: any[] = [1, true, "free"];
    list[1] = 100;    console.log(list);

Void(空值)

void 表示没有任何类型。 当一个函数没有返回值时,通常会见到其返回值类型是 void:

    function warnUser(): void {        console.log("This is my warning message");
    }
    warnUser();

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null:

    let unusable: void = undefined;

Null 和 Undefined

TypeScript里,undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null。 和 void 相似,它们的本身的类型用处不是很大:

    let u: undefined = undefined;    let n: null = null;    console.log(u === n); // 输出:false

默认情况下 null 和 undefined 是所有类型的子类型。 就是说可以把 null 和 undefined 赋值给 number 类型的变量。

然而,当指定了—strictNullChecks 标记,null 和 undefined 只能赋值给 void 和它们各自。

Never

never 类型表示的是那些永不存在的值的类型。 例如, never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型; 变量也可能是 never类型,当它们被永不为真的类型保护所约束时。

never 类型是任何类型的子类型,也可以赋值给任何类型;然而,没有类型是 never 的子类型或可以赋值给 never 类型(除了 never 本身之外)。 即使 any 也不可以赋值给 never。

    // 返回never的函数必须存在无法达到的终点    function error(message: string): never {        throw new Error(message);
    }    // 推断的返回值类型为never    function fail() {        return error("Something failed");
    }    // 返回never的函数必须存在无法达到的终点    function infiniteLoop(): never {        while (true) {
        }
    }

Symbol

自ECMAScript 2015起,symbol 成为了一种新的原生类型,就像 number 和 string 一样。

symbol 类型的值是通过 Symbol 构造函数创建的。

    let sym1 = Symbol();    let sym2 = Symbol("key");

Symbols是不可改变且唯一的。

    let sym3 = Symbol("key");    let sym4 = Symbol("key");    console.log(sym3 === sym4); // 输出:false

像字符串一样,symbols也可以被用做对象属性的键。

    let sym5 = Symbol();    let obj = {
        [sym5]: "value"    };    console.log(obj[sym5]); // 输出:value

Symbols也可以与计算出的属性名声明相结合来声明对象的属性和类成员。

    let sym6 = Symbol("foo");    class C {
        [sym6]() {            return "C";
        }
    }    let c = new C();    let className = c[sym6](); 
    console.log(className); // 输出:C

参考资料

  • TypeScript官网
  • TypeScript中文网

其他

  • 完整代码:https://github.com/guyoung/GyWxappCases/tree/master/TypeScript
  • 微信小程序Canvas增强组件WeZRender:https://github.com/guyoung/WeZRender