Typescript 基础知识

类型注解

// 布尔值

let isDone: boolean = false;

// 数字

let decLiteral: number = 6;

let hexLiteral: number = 0xf00d;

let binaryLiteral: number = 0b1010;

let octalLiteral: number = 0o744;

// 字符串

let name: string = 'bob';

// 模板字符串，可定义多行文本和内嵌表达式

let name: string = `Gene`;

let age: number = 37;

let sentence: string = `Hello, my name is ${ name }. I will  be ${ age + 1 } years old nex month.`;

// 字符串字面量类型

type EventNames = 'click' | 'scroll' | 'mouseove';

function handleEvent(ele: Element, event: EventNames) {

    // do something

}

handleEvent(document.getElementById('hello'), 'scroll');    // ok

handleEvent(document.getElementById('world'), 'dbclick');   // 报错, event 不能为 'dbclick'

// 数组

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

// person参数必须是string类型，且必须有参数

function greeter(person: string) {

    return 'Hello, ' + person;

}

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

// 类型报错

// 枚举

enum Color { Red, Green, Blue };

let c: Color = Color.Green; // 1

// 手动赋值

enum Color { Red = 1, Green, Blue };

let c: Color = Color.Green;

// 根据值得到名字

enum Color { Red = 1, Green, Blue };

let colorName: string = Color[2];

console.log(colorName); // Green

// 手动赋值的枚举项可以不是数字，需要使用类型断言来让tsc无视类型检查

enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>'S' };

// 枚举会被编译为

var Days;

(function (Days) {

    Days[Days['Sun'] = 0] = 'Sun';

    Days[Days['Mon'] = 1] = 'Mon';

    Days[Days['Tue'] = 2] = 'Tue';

    Days[Days['Wed'] = 3] = 'Wed';

    Days[Days['Thu'] = 4] = 'Thu';

    Days[Days['Fri'] = 5] = 'Fri';

    Days[Days['Sat'] = 6] = 'Sat';

})(Days || (Days = {}));

// 任意值(任意类型)

let notSure: any = 4;

notSure = 'maybe a string instead';

notSure = false;

// 与Object类型区别

let notSure: any = 4;

notSure.ifItExists();

notSure.toFixed();

let prettySure: Object = 4;

prettySure.toFixed();   // Error

// 空值

function warnUser(): void {

    alert("This is my warning message");

}

// 声明一个void类型的变量，只能赋值为null或者undefined

let unusable: void = undefined;

// Never

// never 类型表示的是那些永不存在的值的类型

// null 和 undefined 是所有类型的子类型。而 void 类型则不是。

元组 Tuple

let x: [string, number];

x = ['hello', 10];  // ok

x = [10, 'hello'];  // error

// 类型约束

console.log(x[0].substr(1));    // ok

console.log(x[1].substr(1));    // error, 'number' does not have 'substr'

// 访问越界的元素，会使用联合类型替代

x[3] = 'world'; // ok

console.log(x[5].toString());   // ok

x[6] = true;    // error, 布尔不是（string | number）类型

类型断言

• “尖括号”语法

let someValue:any = "this is a string";

let strLength: number = (<string>someValue).length;

• as 语法

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length

类型别名

// 使用 type 创建类型别名

type Name = string;

type NameResolver = () => string;

type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {

    if ( typeof n === 'string' ) {

        return n;

    } else {

        return n();

    }

}

解构

• 解构数组

let input = [1, 2];

let [first, second] = input;

console.log(first); // 1

console.log(second);    // 2

let [first, ...rest] = [1, 2, 3, 4];

console.log(first); // 1

console.log(rest);  // [2, 3, 4]

• 对象解构

let o = {

    a: 'foo',

    b: 12,

    c: 'bar'

};

let { a, b } = o;

// 可以用没有声明的赋值，必需以括号括起来，否则{起始的语句会解析为一个块

({ a, b } = { a: 'baz', b: 101 });

// 使用...语法创建剩余变量

let { a, ...passthrough } = o;

let total = passthrough.b + passthrough.c.length;

// 属性重命名

let { a: newName1, b: newName2 } = o;

// 相当于

let newName1 = o.a;

let newName2 = o.b;

// 指示类型

let { a, b }: { a: string, b: number } = o;

// 默认值，属性为undefined时使用缺省值

function keepWholeObject(wholeObject: { a: string, b?:number }) {

    let { a, b = 1001 } = wholeObject;

}

function f({ a, b = 0 } = { a: '' }): void {

    //...

}

f({ a: 'yes' });    // ok

f();    // ok, default to {a: ''}

f({});  // error, 'a' is required if you supply an argument

展开

// 数组展开，展开操作是浅拷贝

let first = [1, 2];

let second = [3, 4];

let bothPlus = [0, ...first, ...second, 5];

// 展开对象

let defaults = { food: 'spicy', price: '$$', ambiance: 'noisy' };

let search = { ...defaults, food: 'rich' };

// 展开，只包含自身的可枚举的属性

class C {

    p = 1;

    m() {

    }

}

let c = new C();

let clone = { ...c };

clone.p;    // ok

clone.m();  // error

类

class Student {

    fullName: string;

    // 构造函数

    constructor(public firstName, public middleInitial, public lastName) {

        this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;

    }

}

interface Person {

    firstName: string;

    lastName: string;

}

function greeter(person: Person) {

    return 'Hello, ' + person.firstName + ' ' + person.lastName;

}

var user = new Student('Jane', 'M', 'User');

document.body.innerHTML = greeter(user);

更详细的可以关注Typescript官网