typescript 从零解释

// 定义 基础类型

let isDone: boolean = false;

let decLiteral: number = 6;

let smith: string = "bob";

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

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

// 元组 Tuple

let x: [string, number];

// Initialize it

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

// Initialize it incorrectly

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

// 枚举

enum Color { Red, Green, Blue }

let colorName: string = Color[2];

// Any

let notSure: any = 4;

// Object

let prettySure: Object = { "A": "B" };

// Void

function warnUser(): void {

console.log("This is my warning message");

}

// Null 和 Undefined

// Never

// never类型表示的是那些永不存在的值的类型 抛出的错误

// 类型断言

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

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

let strLength1: number = (someValue as string).length;



// 接口定义 可选 只读

interface LabelledValue {

label: string;

color?: string;

readonly x: number;

}



// 只读 ReadonlyArray

let a: number[] = [1, 2, 3, 4];

let ro: ReadonlyArray<number> = a;



// 额外的属性检查

interface SquareConfig {

color?: string;

width?: number;

[propName: string]: any;

}



function createSquare(config: SquareConfig): { color: string; area: number } {

// ...

}



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



// 函数类型 入参 对象

interface SearchFunc {

(source: string, subString: string): boolean;

}



let mySearch: SearchFunc;

mySearch = function (src: string, sub: string): boolean {

let result = src.search(sub);

return result > -1;

}



// 可索引的类型 入参 数组

interface StringArray {

[index: number]: string;

}



let myArray: StringArray;

myArray = ["Bob", "Fred"];



let myStr: string = myArray[0];



// 只读

interface ReadonlyStringArray {

readonly [index: number]: string;

}

let myArray1: ReadonlyStringArray = ["Alice", "Bob"];

myArray1[2] = "Mallory"; // error!



// 类 class

class Greeter {

// 属性

greeting: string;

// 构造函数

constructor(message: string) {

this.greeting = message;

}

// 方法

greet() {

return "Hello, " + this.greeting;

}

}

// Greeter类的实例的类型是 Greeter

let greeter: Greeter;

greeter = new Greeter("world");

console.log(greeter.greet());



// 继承

// TypeScript里，成员都默认为 public。可见

// private 不能在声明它的类的外部访问

// protected protected成员在派生类中仍然可以访问

// readonly 只读属性必须在声明时或构造函数里被初始化。

class Animal {

// 属性

public greeting: string;

private age: Number;

protected name: string;

readonly val: string;

// 构造函数

public constructor(message: string) {

this.greeting = message;

}

public move(distanceInMeters: number = 0) {

console.log(`Animal moved ${distanceInMeters}m.`);

}

}



// new Animal("Cat").age;



class Dog extends Animal {

// 构造函数

constructor(message: string) { super(message); }



bark() {

console.log(`${this.greeting}${this.age}${this.name}`);

}

}



const dog = new Dog("3");

dog.val = "445"

dog.bark();

dog.move(10);

dog.bark();



// 静态属性 static 这些属性存在于类本身上面而不是类的实例上

class Grid {

static origin = { x: 0, y: 0 };

}




// 抽象类 抽象类中的抽象方法不包含具体实现并且必须在派生类中实现

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...');

}

}



// Department类的实例的类型是 Department

let department: Department; // 允许创建一个对抽象类型的引用

department = new Department(); // 错误: 不能创建一个抽象类的实例

department = new AccountingDepartment(); // 允许对一个抽象子类进行实例化和赋值

department.printName();

department.printMeeting();

department.generateReports(); // 错误: 方法在声明的抽象类中不存在




// 函数

// myAdd has the full function type

let myAdd = function (x: number, y: number): number { return x + y; };

// The parameters `x` and `y` have the type number

let myAdd1: (baseValue: number, increment: number) => number =

function (x, y) { return x + y; };

// 参数 可选参数和默认参数和剩余参数

let myAdd2: (baseValue: number, increment?: number) => number =

(x: number, y: number): number => { return x + y; };

let myAdd3 = (x: number, y: number): number => { return x + y; };



// 带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值来获得默认值

function buildName1(firstName: string, lastName = "Smith") {

// ...

}

function buildName(firstName = "Will", lastName: string) {

return firstName + " " + lastName;

}

let result4 = buildName(undefined, "Adams");




function buildName2(firstName: Number, ...restOfName: Number[]): Number {

return firstName

}

let buildNameFun: (fname: Number, ...rest: Number[]) => Number = buildName2;



// 泛型

function identity<T>(arg: T[]): T[] {

console.log(arg.length)

return arg;

}



let myIdentity: <T>(arg: T[]) => T[] = identity;



// ee2

interface GenericIdentityFn {

<T>(arg: T): T;

}



function identity1<T>(arg: T): T {

return arg;

}





let myIdentity1: GenericIdentityFn = identity1;




let employeeName = buildName2(1, 2, 3, 5, 67);




// 重载

// 函数根据传入不同的参数而返回不同类型的数据

let suits = ["hearts", "spades", "clubs", "diamonds"];



// 定义重载

// function pickCard(x: {suit: string; card: number; }[]): number;

// function pickCard(x: number): {suit: string; card: number; };

function pickCard(x): any {

// Check to see if we're working with an object/array

// if so, they gave us the deck and we'll pick the card

if (typeof x == "object") {

let pickedCard = Math.floor(Math.random() * x.length);

return pickedCard;

}

// Otherwise just let them pick the card

else if (typeof x == "number") {

let pickedSuit = Math.floor(x / 13);

return { suit: suits[pickedSuit], card: x % 13 };

}

}



let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];

let pickedCard1 = myDeck[pickCard(myDeck)];

alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);



let pickedCard2 = pickCard(15);

alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);