TypeScript学习小记

官方文档已经足够详细足够好了（官网，注意中文官网已经很多个版本没更新了），本篇主要为自己的学习记录

1.上路

1.1 环境

nodeJs

1.2 安装

1	npm i -g typescript

安装后可通过以下命令查看

tsc -v

返回如：Version 3.2.2

1.3 webpack

Webpack集成非常简单。你可以使用 ts-loader，它是一个TypeScript的加载器，结合source-map-loader方便调试。

并将下面的选项合并到你的webpack.config.js文件里：

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "./dist/bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // Other options...
};

2 语法

2.1 基础类型

除了JavaScript的基础数据类型（数字、字符串、结构体、布尔值…），TypeScript还提供了实用的枚举类型方便我们使用。

类型	描述
boolean	true或false。一个boolean值是一个真实性的值，它代表条件是否正确。如`let isDone: boolean = true;`
number	浮点数。如`let height: number = 666;`
string	文本字符串。如`let name: string = 'string'`
array	数组。数组声明有两种写法。一种是可以在数组元素的类型后面跟着`[]`来表示包含这种类型元素的数组，如`let list: number[] = [1, 2, 3]`；第二种是使用泛型数组类型Array，如`let list: Array<number> = [1, 2, 3]`
enum	枚举。是为了给一个数字集合更友好地命名。enum类型中的成员默认从0开始，当然也可以手动设置成员中的值来改变这种默认行为。如`enum Color {Red, Green, Blue}; var c: Color = Color.Blue`
any	任意JavaScript值。一个any类型的值支持所有在JavaScript中对它的操作，并且对一个any类型的值操作时仅进行最小化静态检查。any类型在你只知道一部分类型的情况下也很方便，如`let list: any[] = [1, true, 'ts']`
void	某种程度上，any的对立面就是void，即所有的类型都不存在的时候。

下面是具体介绍。

2.1.1 布尔值

boolean

1	let iAmOk: boolean = false;

2.1.2 数字

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

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

2.1.3 字符串

string。

1 2	let name: string = 'Wayne'; let anotherName: string = `${name},字彦祖`;

2.1.4 数组

TypeScript像JavaScript一样可以操作数组元素。有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

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

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

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

2.1.5 元组 Tuple

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

let info: [string, number];
info = ['Wayne', 18];
info = [18, 'Wayne'];	// error
info[1] = 25;
info[3] = 12;	// error

2.1.6 枚举

Typescript新增。
enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

1 2	enum Colors { Red, Green, Blue, Yellow, White, Black }; let blue: Colors = Colors.Blue; // blue为2

*其转为js：

(function (Colors) {
    Colors[Colors["Red"] = 0] = "Red";
    Colors[Colors["Green"] = 1] = "Green";
    Colors[Colors["Blue"] = 2] = "Blue";
    Colors[Colors["Yellow"] = 3] = "Yellow";
    Colors[Colors["White"] = 4] = "White";
    Colors[Colors["Black"] = 5] = "Black";
})(Colors || (Colors = {}));
;
var blue = Colors.Blue;

默认情况下，从0开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子的Red改成从 1开始编号，Green改为从4开始：

enum Colors { Red = 1, Green = 4, Blue, Yellow, White, Black };
let red: Colors = Colors.Red;	// red为1
let green: Colors = Colors.Green;	// blue为4
let blue: Colors = Colors.Blue;	// blue为5

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
如

1 2	enum Colors { Red = 1, Green = 4, Blue, Yellow, White, Black }; let name6: string = Colors[6]; //'Yellow'

2.1.7 Any 和 Unknown

any

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

let anyVal: any;
anyVal = 'abc';
anyVal = 123;
anyVal = false;
anyVal = [1, 2, 3];
anyVal = { a: 1, b:2 };
anyVal = function () { console.log(123); };

在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。你可能认为 Object有相似的作用，就像它在其它语言中那样。但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

当你只知道一部分数据的类型时，any类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

1
2
3

let list: any[] = [1, true, 'free'];

list[1] = 100;

unknown

TypeScript 3.0 引入的新类型，是 any 类型对应的安全类型。

unknown 和 any 的主要区别是 unknown 类型会更加严格:在对unknown类型的值执行大多数操作之前,我们必须进行某种形式的检查,而在对 any 类型的值执行操作之前,我们不必进行任何检查。

相同点，如：

// any
let value: any;

value = true;             // OK
value = 1;                // OK
value = "Hello World";    // OK
value = Symbol("type");   // OK
value = {}                // OK
value = []                // OK

// unknown
let value: unknown;

value = true;             // OK
value = 1;                // OK
value = "Hello World";    // OK
value = Symbol("type");   // OK
value = {}                // OK
value = []                // OK
``` 

不同，如：
``` ts
let value: any;

value.foo.bar;  // OK
value();        // OK
new value();    // OK
value[0][1];    // OK

let value: unknown;

value.foo.bar;  // ERROR
value();        // ERROR
new value();    // ERROR
value[0][1];    // ERROR

虽然它们都可以是任何类型,但是当 unknown 类型被确定是某个类型之前,它不能被进行任何操作比如实例化、getter、函数执行等等。

而 any 是可以的,这也是为什么说 unknown 是更安全的 any, any 由于过于灵活的设定,导致它与 JavaScript 没有太多区别,很容易产生低级错误,很多场景下我们可以选择 unknown 作为更好的替代品。

什么情况下我们可以执行 unknown 呢？那就是缩小其类型范围。如

function getValue(value: unknown): string {
  if (value instanceof Date) { // 这里由于把value的类型缩小为Date实例的范围内,所以`value.toISOString()`
    return value.toISOString();
  }

  return String(value);
}

2.1.8 Void

Typescript新增。
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

1
2
3

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

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

1	let unusable: void = undefined;

2.1.9 Null 和 Undefined

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

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

默认情况下null和undefined是所有类型的子类型。就是说你可以把 null和undefined赋值给number类型的变量。
然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。这能避免很多常见的问题。也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。再次说明，稍后我们会介绍联合类型。

尽可能地使用–strictNullChecks。

2.1.10 Never

Typescript新增。
never类型表示的是那些永不存在的值的类型。例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使 any也不可以赋值给never。

// 空数组，而且永远是空的
const empty: never[] = []

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

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

2.1.11 Object

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

使用object类型，就可以更好的表示像Object.create这样的API。例如：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

2.1.12 类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式，两种形式是等价的。

“尖括号”语法：

1
2
3

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

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

as语法：

1
2
3

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

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

当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

2.1.13 类型守护

可以在运行时使用typeof或者instanceof运算符对类型进行验证。TypeScript语言服务会在if区域寻找这些运算符，然后对应地更改类型：

let x: any = {/** ... /};
if (typeof x === 'string') {
	console.log(x.splice(3, 1));		// error
}

在这里if中推断的x类型为string，然后TypeScript会抛出splice方法不存在于string类型上的错误。这个特性被称为类型守护。

2.1.14 类型别名

TypeScript允许使用type关键字声明类型别名：

1
2
3

type PrimitiveArray = Array<string|number|boolean>;
type MyNumber = number;
type Callback = () => void;

类型别名实质上与原来的类型一样，它们仅仅是一个替代的名字。

2.2 变量声明

var、let、const，不解释。

声明文件

TypeScript默认包含一个名为lib.d.ts的文件，它提供了像DOM这种JavaScript内置库的接口声明。

使用.d.ts结尾的声明文件，是用来提高TypeScript对第三方库和像Node.js或浏览器这种运行时环境的兼容性的。

2.3 接口

Typescript新增。
TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

2.3.1 初探

function interfaceTest (testobj: {
	animal: string
}) {
	console.log(testobj.animal);
}

let obj = {
	animal: 'dog',
	age: 25
};
interfaceTest(obj)

类型检查器会查看interfaceTest的调用。 interfaceTest有一个参数，并要求这个对象参数有一个名为animal类型为string的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。

上面的例子可以写为：

interface TestValue {
	animal: string
}

function interfaceTest(testobj: TestValue) {
	console.log(testobj.animal);
}

let obj = {
	animal: 'dog',
	age: 25
};
interfaceTest(obj)

ps,上述代码被转换为js：

function interfaceTest(testobj) {
    console.log(testobj.animal);
}
var obj = {
    animal: 'dog',
    age: 25
};
interfaceTest(obj);

TestValue接口就好比一个名字，用来描述上面例子里的要求。它代表了有一个 animal属性且类型为string的对象。需要注意的是，我们在这里并不能像在其它语言里一样，说传给 interfaceTest的对象实现了这个接口。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么它就是被允许的。

还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

2.3.2 可选属性

接口里的属性不全都是必需的。有些是只在某些条件下存在，或者根本不存在。可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

如

interface TestValue1 {
	animal: string,
	age: number
}
interface TestValue2 {
	animal?: string,
	age?: number
}

function interfaceTest1 (testobj: TestValue1) {
	console.log(testobj.animal);
	console.log(testobj.age);
}
function interfaceTest2 (testobj: TestValue2) {
	console.log(testobj.animal);
	console.log(testobj.age);
}

let objCat = {
	animal: 'cat'
};
interfaceTest1(objCat);	// error
interfaceTest2(objCat);

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

可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。比如，我们故意将 TestValue2里的age属性名拼错，就会得到一个错误提示：

interface TestValue2 {
	animal?: string,
	age?: number
}

function interfaceTest3 (testobj: TestValue2) {
	if (test.agee) {	// error
	
	}
}

2.3.3 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly来指定只读属性:

如

interface TestValueReadonly {
	readonly x: number;
	readonly y: string;
}

let val1: TestValueReadonly = {
	x: 12,
	y: 'twelve'
};

val1.x = 14;	// error

TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

let arr1: Array<number> = [1, 2, 3, 4, 5];
let arr2: ReadonlyArray<number> = [1, 2, 3, 4, 5];

arr1[1] = 123;
arr2[1] = 123;	// error

let arr3 = arr2;
arr1 = arr2;	// error

你可以用类型断言重写来实现刚最后一行的效果：

arr1 = arr2 as number[];

// or
arr1 = <number[]>arr2

readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用readonly。

2.3.4 额外的属性检查

interface TestValue3 {
	animal?: string;
	age?: number;
}
	
function interfaceTest3 (testobj: TestValue3) : { animal: string, sex: string } {
	// ...
	console.log(testobj.animal)
	return {
		animal: testobj.animal,
		sex: '123'
	}
}

let tester = interfaceTest3({
	color: 'red',	// 本身会报错，加上最后的'as TestValue3'就不会了
	age: 12
} as TestValue3);

然而，最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。如果 TestValue3带有上面定义的类型的color和width属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

interface TestValue4 {
	animal?: string;
	age?: number;
	[propName: string]: any;
}

function interfaceTest4 (testobj: TestValue4) : { animal: string, sex: string } {
	// ...
	console.log(testobj.animal)
	return {
		animal: testobj.animal,
		sex: '123'
	}
}

let tester2 = interfaceTest4({
	color: 'red',
	age: 12
});

还有最后一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给一个另一个变量（不推荐）：

interface TestValue5 {
	animal?: string;
	age?: number;
}
	
function interfaceTest5 (testobj: TestValue5) : { animal: string, sex: string } {
	// ...
	console.log(testobj.animal)
	return {
		animal: testobj.animal,
		sex: '123'
	}
}
let obj5 = {
	color: 'red',
	age: 12
};
let tester3 = interfaceTest5(obj5);

2.3.5 函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface AddressFunc {
	(from: string, to: string): string;
}

let myAddress: AddressFunc;
myAddress = function (from: string, to: string) {
	return `I am from: ${from}, i want to go: ${to}`
}
let youAddress: AddressFunc = function (youfrom: string, youto: string) {
	return `You are from: ${youfrom}, you want to go: ${youto}`
}

2.3.6 可索引的类型

与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap[“daniel”]。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

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

let myArray: TestArray = ['Micheal', 'Wayne'];
let myFirstName: string = myArray[0];

TypeScript支持两种索引签名：字符串和数字。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是说用 100（一个number）去索引等同于使用”100”（一个string）去索引，因此两者需要保持一致。

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

// 错误：使用数值型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
}

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length是number类型
  name: string       // 错误，`name`的类型与索引类型返回值的类型不匹配
}

2.3.7 类类型

与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface TimeInterface {
	nowDate: Date;
	setTime(d: Date);
}

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

类静态部分与实例部分的区别

当你操作类和接口的时候，你要知道类是具有两个类型的：静态部分的类型和实例的类型。你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误：

interface TimeInterface {
	new (hour: number, minute: number);
}

class Clock implements TimeInterface {
	currentTime: Date;
	constructor (h: number, m: number) {
	
	}
}

这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。

因此，我们应该直接操作类的静态部分。如

interface ClockConstructor {
	new (hour: number, minute: number): ClockInterface;
}

interface ClockInterface {
	tick();
}

function createClock (ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
	return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
	constructor (h: number, m: number) {}
	tick () {
		console.log('beep beep');
	}
}
class AnalogClock implements ClockInterface [
	constructor (h: number, m: number) {}
	tick () {
		console.log('tick tock');
	}
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

2.3.8 继承接口

interface Animal {
	name: string,
	color: string;
}

interface Dog extends Animal {
	age: number
};

let dog1 = <Animal>{};
dog1.color = 'white';

一个接口可以继承多个接口

interface Animal {
	name: string,
	color: string;
}

interface Description {
	width: string;
	height: string;
}

interface Dog extends Animal, Description {
	age: number
};

let dog1 = <Animal>{};
dog1.color = 'white';
dog1.age = 12;
dog1.width = '100cm';

2.3.9 混合类型

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

2.3.10 接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的private和protected成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。

当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。这个子类除了继承至基类外与基类没有任何关系。例：

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() { }
}

class Location {

}
``

### 2.4. 类
同es6

继承中派生类通常被称作 子类，基类通常被称作 超类。

#### 2.4.1 公共，私有与受保护的修饰符
**默认为 public**。在TypeScript里，成员都默认为 public。
如
``` ts
	class Animal {
		name: string;
		constructor (type: string) {
			this.type = type;
		}
		sayName () {
			alert(this.type);
		}
	}
	
	// 等同于
	class Animal {
		public name: string;
		public constructor (type: string) {
			this.type = type;
		}
		public sayName () {
			alert(this.type);
		}
	}

私有private。当成员被标记成 private时，它就不能在声明它的类的外部访问。比如：

class Animal {
	private name: string;
	constructor (type: string) {
		this.type = type;
	}
	sayName () {
		alert(this.type);
	}
}

console.log(new Animal('dog').type);	// error

TypeScript使用的是结构性类型系统。当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。然而，当我们比较带有 private或 protected成员的类型的时候，情况就不同了。如果其中一个类型里包含一个 private成员，那么只有当另外一个类型中也存在这样一个 private成员，并且它们都是来自同一处声明时，我们才认为这两个类型是兼容的。对于 protected成员也使用这个规则。

如

class Animal {
	private name: string;
	constructor (type: string) {
		this.type = type;
	}
}

class Dog extends Animal {
	constructor () {
		super('dog');
	}
}

class Cat {
	private name: string;
	constructor (type: string) {
		this.type = type;
	}
}

let animal = new Animal('Goat');
let dog = new Dog();
let cat = new Cat('short');

animal = dog;
animal = cat;	// error

protected。protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。

构造函数也可以被标记成 protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承。
如

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

class Dog extends Animal {
	constructor (name: string) {
		super(name);
	}
}

let animal = new Animal('Goat');
let dog = new Dog('dog');	// error

readonly。你可以使用 readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

class Animal {
	readonly name: string;
	constructor (name: string) {
		this.name = type;
	}
}

let animal = new Animal('Goat');
animal.name = 'cat';	// error

仅在构造函数里使用 readonly name: string参数来创建和初始化 name成员。我们把声明和赋值合并至一处。
上述代码可以如下

class Animal {
	constructor (readonly name: string) {
	}
}

参数属性通过给构造函数参数前面添加一个访问限定符来声明。使用 private限定一个参数属性会声明并初始化一个私有成员；对于 public和 protected来说也是一样。

2.4.2 存取器

TypeScript支持通过getters/setters来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。

如

class Animal {
	name: string
}

let dog = new Animal();
dog.name = 'WangChai';
console.log(dog.name);

这种不严谨，可以如下

let setBool = true;

class Animal {
	private _name: string;
	
	get name (): string {
		return this._name;
	}
	
	set name (newname: string) {
		if (setBool === true) this._name = name;
		else console.log('dont have permission.')
	}
}

let animal = new Animal();
animal.name = 'dog';
console.log(animal.name);
setBool = false;
animal.name = 'cat';
console.log(animal.name);

（这种为es5版本以上，原理为Object.defineProperty）。其次，只带有 get不带有 set的存取器自动被推断为 readonly。这在从代码生成 .d.ts文件（声明文件）时是有帮助的，因为利用这个属性的用户会看到不允许够改变它的值。

2.4.3 静态属性

仅当类被实例化的时候才会被初始化的属性。我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。
如

class Position {
	static o = {
		x: 0,
		y: 0
	};
	
	constructor (public scale: number) {}
	
	calculateDistance (point: {x: number, y: number}) {
		let xDist = (point.x - o.x);
		let yDist = (point.y - o.y);
		return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
	}
}

2.4.4 抽象类

抽象类做为其它派生类的基类使用。它们一般不会直接被实例化。不同于接口，抽象类可以包含成员的实现细节。 abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。

abstract class Animal {
	abstract makeSound(): void;
	move(): void {
		console.log('gogogo')
	}
}

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。抽象方法的语法与接口方法相似。两者都是定义方法签名但不包含方法体。然而，抽象方法必须包含 abstract关键字并且可以包含访问修饰符。

abstract class Animal {
	abstract makeSound(): void;	// 必须在派生类中实现
	move(): void {
		console.log('gogogo')
	}
}

class Dog extends Animal {
	constructor (public name: string) {
		super();	// 派生类必须调用
	}
	
	makeSound (): void {
		console.log(`${this.name}: Wang!Wang!Wang!`);
	}
}

let dog = new Dog('wangchai');
dog.move();
dog.makeSound();

2.4.5 高级技巧

构造函数：当你在TypeScript里声明了一个类的时候，实际上同时声明了很多东西。首先就是类的实例的类型。
如

class Animal {
	constructor (public name: string) {}
	
	say (): void {
		console.log(this.name)
	}
}

let dog: Animal;
dog = new Animal('dog');
dog.say();

let dog2: typeof Animal = Animal;
let dog3: Animal = new dog2('dog3');

把类当做接口使用：

class Point {
	x: number;
	y: number;
}

interface Position extends Point {
	z: number;
}

let point2d: Position = {
	x: 1,
	y: 2,
	z: 3
};

2.5 函数

函数仍然是主要的定义行为的地方。

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。可选参数必须跟在必须参数后面。
如

1
2
3

function saySomething (firstName: string, lastName?: string): string {
	return firstName + (lastName || '');
}

与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。

1
2
3

function saySomething (sex = 'mail', firstName: string, lastName?: string): string {
	return firstName + (lastName || '') + sex;
}

2.5.1 剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在JavaScript里，你可以使用 arguments来访问所有传入的参数。

在TypeScript里，你可以把所有参数收集到一个变量里：

function sayName (firstName: string, ..otherName: string[]) {
	return firstName + ' ' + otherName.join(' ');
}

sayName ('a', 'b', 'c', 'd');

2.6 泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

比如下面这个函数，不用泛型的情况

1
2
3

function returnParam (arg: any): any {
	return arg;
}

使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。
因此，我们需要一种方法使返回值的类型与传入参数的类型是相同的。这里，我们使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值。

1
2
3

function returnParam<T> (arg: T): T {
	return arg;
}

T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。这允许我们跟踪函数里使用的类型的信息。

我们定义了泛型函数后，可以用两种方法使用。第一种是，传入所有的参数，包含类型参数：

1	let val1 = returnParam<string>('teststring');

第二种方法更普遍。利用了类型推论 – 即编译器会根据传入的参数自动地帮助我们确定T的类型：

1	let val2 = returnParam('teststring2');

类型推论帮助我们保持代码精简和高可读性。如果编译器不能够自动地推断出类型的话，只能像上面那样明确的传入T的类型，在一些复杂的情况下，这是可能出现的。

E - Element (used extensively by the Java Collections Framework)
K - Key
N - Number
T - Type
V - Value
S,U,V etc. - 2nd, 3rd, 4th types

2.6.1 使用泛型变量

上面的returnParam()泛型，如果我们想如下打出参数的length属性，会报错

function returnParam<T>(arg: T): T {
	console.log(arg.length);	// error, T donesn't have .length
	return arg;
}

现在假设我们想操作T类型的数组而不直接是T。由于我们操作的是数组，所以.length属性是应该存在的。我们可以像创建其它数组一样创建这个数组：

function returnParam<T> (arg: T[]): T[] {
	console.log(arg.length);
	return arg;
}

2.6.2 泛型类型

泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面，像函数声明一样：

function returnParam<T> (arg: T): T {
	return arg;
}

let myFunc: <U>(arg: U) => U = returnParam;

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。

function returnParam<T> (arg: T): T {
	return arg;
}

let myFunc: {<T>(arg: T): T} = returnParam;

interface GenericParam {
	<T>(arg: T): T;
}
function returnParam<T> (arg: T): T {
	return arg;
}

let myFunc: GenericParam = returnParam;

我们可能想把泛型参数当作整个接口的一个参数。这样我们就能清楚的知道使用的具体是哪个泛型类型

interface GenericParam {
	<T>(arg: T): T;
}
function returnParam<T> (arg: T): T {
	return arg;
}

let myFunc: GenericParam<number> = returnParam;

除了泛型接口，我们还可以创建泛型类。注意，无法创建泛型枚举和泛型命名空间。

2.6.3 泛型类

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

2.6.4 泛型约束

interface Lengthwise {
	length: number;
}

function returnParam<T extends Lengthwise> (arg: T): T {
	consoel.log(arg.length);
	return arg;
}

在泛型约束中使用类型参数

function getProperty(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

在泛型里使用类类型

1
2
3

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

一个更高级的例子，使用原型属性推断并约束构造函数与类实例的关系。

class BeeKeeper {
    hasMask: boolean;
}

class ZooKeeper {
    nametag: string;
}

class Animal {
    numLegs: number;
}

class Bee extends Animal {
    keeper: BeeKeeper;
}

class Lion extends Animal {
    keeper: ZooKeeper;
}

function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}

createInstance(Lion).keeper.nametag;  // typechecks!
createInstance(Bee).keeper.hasMask;   // typechecks!

2.7 枚举

使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。

数字枚举

enum Direction {
	Up = 1,
	Down,
	Left,
	Right
}

// use
function respond (name: string, dir: Direction): string {
	return name + dir;
}
respond('Wayne', Direction.Up);

数字枚举可以被混入到计算过的和常量成员（如下所示）。简短地说，不带初始化器的枚举或者被放在第一的位置，或者被放在使用了数字常量或其它常量初始化了的枚举后面。换句话说，下面的情况是不被允许的：

enum E {
	A = getValue(),
	B	// error
}

字符串枚举

在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

由于字符串枚举没有自增长的行为，字符串枚举可以很好的序列化。换句话说，如果你正在调试并且必须要读一个数字枚举的运行时的值，这个值通常是很难读的 - 它并不能表达有用的信息（尽管反向映射会有所帮助），字符串枚举允许你提供一个运行时有意义的并且可读的值，独立于枚举成员的名字。

异构枚举（Heterogeneous enums）

枚举可以混合字符串和数字成员

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

计算的和常量成员

每个枚举成员都带有一个值，它可以是常量或计算出来的。当满足如下条件时，枚举成员被当作是常量：

它是枚举的第一个成员且没有初始化器，这种情况下它被赋予值 0：
1
2
3
enum E {
X
}
它不带有初始化器且它之前的枚举成员是一个数字常量。这种情况下，当前枚举成员的值为它上一个枚举成员的值加1。
1
2
3
4
5
enum E1 { X, Y, Z }

enum E2 {
A = 1, B, C
}
枚举成员使用常量枚举表达式初始化。常数枚举表达式是TypeScript表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常量枚举表达式：
– 一个枚举表达式字面量（主要是字符串字面量或数字字面量）
– 一个对之前定义的常量枚举成员的引用（可以是在不同的枚举类型中定义的）
– 带括号的常量枚举表达式
– 一元运算符 +, -, ~其中之一应用在了常量枚举表达式
– 常量枚举表达式做为二元运算符 +, -, *, /, %, <<, >>, >>>, &, |, ^的操作对象。若常数枚举表达式求值后为 NaN或 Infinity，则会在编译阶段报错。

零碎知识点

节点元素类型：HTMLElement

如

1
2
3

function test(ele: HTMLElement) {
	ele.innerHTML = 'test';
}

【工具】TypeScript学习小记