TypeScript基础用法

本文主要介绍TypeScript的基础用法

1.基础类型

布尔值

let flag: boolean = false;

数字

注：支持十进制、十六进制、ECMAScript 2015中引入的二进制和八进制字

let num: number = 6;

字符串

let name: string = "bob";

symbol

注：symbol类型的值是通过Symbol构造函数创建的，Symbols是不可改变且唯一的。

let sym1 = Symbol();
let sym2 = Symbol("key"); // 可选的字符串key

数组

let list: number[] = [1, 2, 3]; // number代表数组中每个元素的类型

let newList: Array<number> = [1, 2, 3]; // 泛型，同上

元组

注：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let x: [string, number] = ['hello', 10];

枚举

注：元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
console.log(Color); // Green

enum newColor {Red = 1, Green = 2, Blue = 4}
let c: newColor = newColor[2];
console.log(newColor); // Green

Any

注：代表任意类型，它会跳过编译类型检查，新手往往会把TypeScript强行写成AnyScript

let anyThing: any = 4;
let newAnyThing: any = false;

Void

注：与any相反，代表没有任何类型

function warnUser(): void { // 代表没有返回值
    console.log("This is my warning message");
}

let unusable: void = undefined; // 声明是只能赋值为undefined和null

Null 和 Undefined

注：默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。
你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自。

let u: undefined = undefined;
let n: null = null;

Never

注：表示那些永不存在的值的类型。never类型是任何类型的子类型，也可以赋值给任何类型

function error(message: string): never { // 返回never的函数必须存在无法达到的终点
    throw new Error(message);
}

Object

注：表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

declare function create(o: object | null): void;
create({ prop: 0 });

泛型

注：把类型明确的工作推迟到创建对象或调用方法的时候才去明确的特殊的类型。

function identity<T>(arg: T): T { // 返回值的类型与传入参数的类型相同
    return arg;
}

function loggingIdentity<T>(arg: T[]): T[] { // 泛型类型
    console.log(arg.length);
    return arg;
}

class GenericNumber<T> { // 泛型类
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T { // 泛型约束
    console.log(arg.length);
    return arg;
}

function create<T>(c: {new(): T; }): T { // 类类型
    return new c();
}

类型断言

注：以预期的类型编译，相当于类型转换。
在TypeScript里使用JSX时，只有 as语法断言是被允许的。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let newSomeValue: any = "this is a string";
let newStrLength: number = (someValue as string).length; // as等价于前边的泛型

2.类

类的实质是一种引用数据类型，类的实例称为对象。

基础类

注：constructor 定义构造函数， 这个函数会在 new 创建类实例的时候被调用。

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

继承

注：继承的关键字 extends。

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

修饰符

注：public（默认），代表公有的，可以自由访问。
private 代表私有的，只能在类的内部访问。
protected 与 private相似，但可以在派生类中访问。
readonly 只读属性必须在声明时或构造函数里被初始化。
static 静态属性，存在于类的本身，而不是实例化。

class Animal {
    private name: string;
    protected age: number;
    readonly sex: string;
    static type = "big";
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}

class Employee extends Person {
    private department: string;

    constructor(name: string, department: string) {
        super(name)
        this.department = department;
    }

    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}

let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());

参数属性

注：在参数中定义并初始化一个成员。

class Octopus {
    readonly numberOfLegs: number = 8;
    constructor(readonly name: string) {
    }
}

存取器

注：通过getters/setters来截取对对象成员的访问。

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
}

抽象类

注：抽象类做为其它派生类的基类使用，abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Department {

    constructor(public name: string) {
    }

    printName(): void {
        console.log('Department name: ' + this.name);
    }

    abstract printMeeting(): void; // 必须在派生类中实现
}

class AccountingDepartment extends Department {

    constructor() {
        super('Accounting and Auditing'); // 在派生类的构造函数中必须调用 super()
    }

    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.');
    }

    generateReports(): void {
        console.log('Generating accounting reports...');
    }
}

let department: Department; // 允许创建一个对抽象类型的引用
department = new Department(); // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值
department.printName();
department.printMeeting();
department.generateReports(); // 错误: 方法在声明的抽象类中不存在

3.接口

接口的作用就是为例规范Object的类型

普通接口

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

注：带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

只读属性

注：只在创建的时候可以赋值

interface Point {
    readonly x: number;
    readonly y: number;
}

let p: Point = { x: 10, y: 20 };
p.x = 5; // error!

ReadonlyArray

注：把所有可变方法去掉，确保数组创建后再也不能被修改。

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!

额外的属性检查

注：避免可选属性接口中额外的属性导致的错误。

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

函数类型

注：规范函数的参数列表和返回值。

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

可索引的类型

注：规范通过索引得到的类型。

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

类类型

注：规范类的类型。实现类型的关键字 implements。

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

继承接口

注：一个接口可以继承多个接口，创建出多个接口的合成接口。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型

注：一个对象可以同时做为函数和对象使用，并带有额外的属性。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

接口继承类

注：当接口继承了一个类类型时，它会继承类的成员但不包括其实现，接口同样会继承到类的private和protected成员。

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}

class TextBox extends Control {
    select() { }
}

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}