typescript
1.概述
本文记录了学习typescript的全过程
参考链接：
2.环境搭建
使用以下命令安装typescript
sudo npm install -g typescript
安装完成后使用以下命令检查是否安装成功
tsc
3.体验typescript
创建进入到项目空间ts-learning
mkdir ts-learning
cd ts-learning
创建文件greeter.ts
// greeter.js
function greeter (person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user)
使用以下命令编译ts，在当前目录生成了一个同名的js文件
tsc greeter.ts
4.基础学习
4.1.原始数据类型
- 布尔值
let isDone: boolean = false; // ts
var isDone = false; // js
- 数值
let decLiteral: number = 6; // ts
var decLiteral = 6 // js;
- 字符串
let myName: string = 'Tom'; // ts
var myName = 'Tom'; // js
- 空值
function alertName(): void {
alert('My name is Tom');
} // ts
function alertName() {
alert('My name is Tom');
} // js
声明void类型的变量并无作用，它只能赋值给void，或者接收null/undefined
let unusable: void = undefined; // ts
var unusable = undefined; // js
- Null和Undefined
这两个数据类型可以赋值给任何其他类型，如：
let num: number = undefined; // ts
var num = undefined; // js
4.2.任意值
在ts中，赋值遵循变量类型的约束，即不能将一个数值赋值给一个已经定义为string的变量，如：
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// err [ts] Type '7' is not assignable to type 'string'. [2322
而声明为任意值类型（any）的变量允许被赋值为任意类型
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
声明为any类型后，对它的任何操作，其返回的内容类型都为any
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');
如果声明时未指定变量类型，即默认为 any
let something;
something = 'seven';
something = 7;
something.setName('Tom');
4.3.类型推论
ts会根据变量声明时的赋值推论类型，如：
let myFavoriteNumber = 'seven'; // 此时已推论myFavoriteNumber为string类型
myFavoriteNumber = 7; // 此时已无法赋值为数值类型
4.4.联合类型
声明变量时指定变量的类型可以为集合中的任意一种，如：
let myFavoriteNumber: string | number; // 声明为string或number
myFavoriteNumber = 'seven'; // 可以赋值为string
myFavoriteNumber = 7; // 可以赋值为number
需要注意的是，访问变量属性时只能获取联合变量集合中的共有属性，如：
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.toString()) // 共有属性
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.toString()) // 共有属性
console.log(myFavoriteNumber.length); // 编译时报错
4.5.接口
- 在ts中，使用接口来定义对象的类型。
在面向对象的语言中，接口是对行为的抽象，即接口需要类去实现，实现接口就要实现它的所有属性和方法
// 定义接口
interface Person {
name: string;
age: number;
}
// 实现接口
let tom: Person = {
name: 'Tom',
age: 25
}
// 编译上述两段代码编译后为
var tom = {
name: 'Tom',
age: 25
};
// 缺少属性是不允许的
let jerry: Person = {
name: 'jerry'
}
// 多一些属性也是不允许的
let herry: Person = {
name: 'herry',
age: 25,
sex: 'male' // error
}
- 可选属性 需要匹配一个不完全的接口，可以使用可选属性，如：
interface Person {
name: string;
age?: number; // ?指定为可选属性，可不实现
}
let tom: Person = {
name: 'Tom'
};
- 任意属性 可以允许一个接口允许有任意的属性，如：
interface Person {
name: string;
age?: number;
[propName: string]: any; // 定义的任意属性后，即可声明任意数量的符合该条件的属性
}
需要注意的是可选属性的类型必须属于任意属性的类型，如：
interface Person {
name: string;
age?: number; // 这里的可选属性必须是string和number中的一个
[propName: string]: string | number;
}
- 只读属性 顾名思义，该属性只读，需要注意的是只读属性只在该对象第一次被赋值时可写，之后无法进行修改，如：
interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
id: 1,
name: 'Tom',
gender: 'male'
};
tom.id = 2 // error
4.6.数组
- 「类型 + 方括号」表示法
需要注意的是数组的成员的类型必须是定义时规定的类型let fibonacci: number[] = [1, 1, 2, 3, 5];let fibonacci: (number | string) [] = [1, 1, '2', 3, 5]; - 数组范型 通过 Array来定义，如：
// 这里学习完array再补充let fibonacci: Array<number> = [1, 1, 2, 3, 5]; - 定义类型不限的数组
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
4.7函数
- 函数声明
一般的函数声明与js相同，如：
可在声明时指定出入参的类型，如：// 函数声明（Function Declaration） function sum(x, y) { return x + y; } // 函数表达式（Function Expression） let mySum = function (x, y) { return x + y; };
需要注意的是，与js不同，ts中不允许输入多余的参数，也不能缺省参数，如function sum(x: number, y: number): number { return x + y; }function sum(x: number, y: number): number { return x + y; } sum(1, 2, 3); // error sum(1); // error - 函数表达式
通过函数表达式定义时，可这样写：
上述代码左侧的mySum类型是通过类型推断得出的，如需手动定义，可这样写：let mySum = function (x: number, y: number): number { return x + y; };
其中=> 用于连接函数的输入与输出，与es6的箭头函数不同let mySum: (x: number, y: number) => number = function (x: number, y: number): number { return x + y; }; - 可选参数
与接口相似，函数也可以指定可选参数，如：
需要注意的是，可选参数必须在必须参数后，即可选参数后不允许再有必须参数了function buildName(firstName: string, lastName?: string) { if (lastName) { return firstName + ' ' + lastName; } else { return firstName; } } let tomcat = buildName('Tom', 'Cat'); let tom = buildName('Tom'); - 参数默认值
在ts中可以使用与es6相同的方式定义参数的默认值，如：
设置了默认之后，就不受可选参数必须后置的约束了，如：function buildName(firstName: string, lastName: string = 'Cat') { return firstName + ' ' + lastName; } let tomcat = buildName('Tom', 'Cat'); let tom = buildName('Tom');function buildName(firstName?: string, lastName: string = 'cat') { return firstName + '' + lastName; let cat = buildName('Tom'); // 'Tomcat' } - 剩余参数
在es6中，可以使用…rest的方式获取函数中的剩余参数，如：
在ts中可以使用数组的类型来定义剩余参数，如：function push(array, ...items) { items.forEach(function(item) { array.push(item); }); } let a = []; push(a, 1, 2, 3);
需要注意的是，rest参数必须是最后一个参数function push(array: any[], ...items: any[]) { items.forEach(function(item) { array.push(item); }); } let a = []; push(a, 1, 2, 3); - 重载
当需要一个函数接受不同数量或类型的参数时，作出不同的处理，可以对函数参数指定联合类型，如：
但是这样当表达不够精确，可以使用以下方式表达：function reverse(x: number | string): number | string { if (typeof x === 'number') { return Number(x.toString().split('').reverse().join('')); } else if (typeof x === 'string') { return x.split('').reverse().join(''); } }
上述代码中，前两次函数声明为定义，最后一次为实现function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string { if (typeof x === 'number') { return Number(x.toString().split('').reverse().join('')); } else if (typeof x === 'string') { return x.split('').reverse().join(''); } }
4.8.类型断言
在4.4联合类型中提到，只能访问联合类型的共有属性和方法。
在ts中可以通过类型断言绕过类型判断，如：
function getLength(something: string | number): number {
if ((<string>something).length) {
console.log('string' + something)
return (<string>something).length;
} else {
console.log('notstring' + something)
return something.toString().length;
}
}
getLength(1) // 1
getLength('2') // 2
可以看出，类型断言并没有对类型进行转换，上例中只是把number当作有string具有对方法和属性罢了。
同样，类型断言不允许断言成联合类型中不存在对类型，如：
function toBoolean(something: string | number): boolean {
return <boolean>something; // error
}
4.9.声明文件
// TODO 这块有待理解
4.10.内置对象
JavaScript中的很多内置对象在ts中也可以直接使用
- ECMAScript的内置对象
ECMA标准提供的内置对象有：boolean、Error、Date、RegExp等
在TypeScript中可以将变量定义为这些类型：
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
- DOM和BOM的内置对象
DOM和BOM提供的内置对象有：Document、HTMLment、Event、NodeList等
在TypeScript中可以将变量定义为这些类型
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
// Do something
});
5.进阶
5.1.类型别名
顾名思义，为类型起一个别名，如：
type Name = string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
5.2.字符串字面量类型
字符串字面量类型用于约束字符串只能是定义等几个字符串之一，如：
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello'), 'scroll');
handleEvent(document.getElementById('world'), 'dbclick') // err
5.3.元祖
元祖编译后即为数组，指定了数组中每个元素等类型，如：
let tuple: [string, number] = ['Oliver', 22]
初始化元祖时，必须指定所有项的值，如：
let tuple: [string, number] = ['Oliver', 22]
let tuple: [string, number] = ['Oliver'] // error
通过访问索引进行赋值时可行的：
let tuple: [string, number]
tuple[0] = 'Oliver'
添加越界的元素时，元素类型被限制在元祖中所有类型的联合类型：
let tuple: [string, number] = ['Oliver', 22]
tuple.push(23)
tuple.push(true) // error
5.4.枚举
枚举类型将取值限定在一定范围内，如：
// ts
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
// js
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 = {}));
枚举类型的成员会被赋值为从0开始递增的数字，从编译生成的js代码中可以看到，我们可以通过索引和键名来访问你枚举类型的成员，如：
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
- 手动赋值：
enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
其中没有赋值的项会根据上一个赋值的项进行递增，但是如果赋值出现重复来，ts不会报错，只是会将最后一个重复的项视为有效项，如：
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true
如果手动赋值的值为非数字，需要使用类型断言来无视tsc的类型检查，如：
enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};
可以为枚举项赋值为计算所得值，但计算所得项后必须是手动赋值项，否则会因为无法获得初始值而报错，如：
enum Color {Red, Green, Blue = "blue".length};
enum Color {Red = "red".length, Green, Blue}; // error
- 常数枚举
通过常数枚举，可以是枚举定义在编译时被删除，如：
// ts
const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// js
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
并且常数枚举中不能包含计算成员：
const enum Color {Red, Green, Blue = "blue".length}; // error
- 外部枚举
通过devlare来定义外部枚举，同样在编译结果中会被删除定义内容：
// ts
declare enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
// js
var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
外部枚举常用于声明文件中
5.6.类
- 访问修饰符
public修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是public的- ```private``修饰的属性或方法是私有的，不能在声明它的类的外部访问
protected修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
如：
class Animal {
public name;
public constructor(name) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom
上面的例子中，name被设置为了public，所以直接访问实例的name属性是允许的。很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 private 了：
class Animal {
private name;
public constructor(name) {
this.name = name;
}
}
let a = new Animal('Jack');
console.log(a.name); // error
a.name = 'Tom'; // error
使用private修饰的属性或方法，在子类中也是不允许访问的：
class Animal {
private name;
public constructor(name) {
this.name = name;
}
}
class Cat extends Animal {
constructor(name) {
super(name);
console.log(this.name);
}
}
如果用protected修饰，则允许在子类中访问：
class Animal {
protected name;
public constructor(name) {
this.name = name;
}
}
class Cat extends Animal {
constructor(name) {
super(name);
console.log(this.name);
}
}
- 抽象类
抽象类与一般类的区别是：抽象类不能被实例化，只能被继承；相应的，抽象方法必须在继承中实现，如：
abstract class Animal {
public name;
public constructor(name) {
this.name = name;
}
public abstract sayHi(); // 抽象方法只能定义在抽象类中
}
class Cat extends Animal {
public sayHi() {
console.log(`Meow, My name is ${this.name}`);
}
}
let cat = new Cat('Tom');
- 为类的属性和方法指定类型
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
sayHi(): string {
return `My name is ${this.name}`;
}
}
let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack
5.7.类与接口
- 类实现接口
由于接口可以定义对象的形状，因此接口可用于对类的公有特性进行抽象。此外，由于类只能继承一个类，而能实现多个接口，这使得面向对象的灵活性大大增强，如：
interface Alarm {
alert();
}
class Door {
}
class SecurityDoor extends Door implements Alarm {
alert() {
console.log('SecurityDoor alert');
}
}
// 一个接口可被多个类实现
class Car implements Alarm {
alert() {
console.log('Car alert');
}
}
同时，一个类也可以实现多个接口：
interface Alarm {
alert();
}
interface Light {
lightOn();
lightOff();
}
class Car implements Alarm, Light {
alert() {
console.log('Car alert');
}
lightOn() {
console.log('Car light on');
}
lightOff() {
console.log('Car light off');
}
}
- 接口继承接口
interface Alarm {
alert();
}
interface LightableAlarm extends Alarm {
lightOn();
lightOff();
}
- 接口继承类
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
5.8.泛型
泛型是指定义函数、接口、类时，不具体指定参数的类型，而是在使用时指定。
在ts中，使用泛型后，在使用到函数时，也可以不指定类型，通过类型推论自动推算出来，如：
// 在函数名后添加了<T>，在入参增加value: T和出参增加Array<T>
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
- 多个类型参数
也可以指定多个类型参数，如：
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]
- 泛型约束
在函数内部使用泛型变量时，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：
function loggingIdentity<T>(arg: T): T {
console.log(arg.length);
return arg;
}
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.
上例中，泛型 T 不一定包含属性 length，所以编译的时候报错了。
这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束：
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
loggingIdentity(7);
// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.
上例中，在编译时就会报错，因为7不符合接口对参数的约束
- 泛型接口
可以通过含有泛型的接口来定义函数的形状：
interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
进一步，我们可以把泛型参数提前到接口名上：
interface CreateArrayFunc<T> {
(length: number, value: T): Array<T>;
}
// 在使用时需要定义泛型的类型，这里为any
let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
- 泛型类
与泛型接口类似，泛型也可以用于类的类型定义中：
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; };
- 泛型参数的默认类型
可以为泛型的类型参数指定默认类型，当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。
function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
5.9.声明合并
多次定义相同的接口或类时，与函数重载一样可以进行合并，如：
interface Alarm {
price: number;
}
interface Alarm {
weight: number;
}
如果有重复的属性，则类型必须相同：
interface Alarm {
price: number;
}
interface Alarm {
price: number; // 虽然重复了，但是类型都是 `number`，所以不会报错
weight: number;
}
interface Alarm {
price: number;
}
interface Alarm {
price: string; // 类型不一致，会报错
weight: number;
}
// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type. Variable 'price' must be of type 'number', but here has type 'string'.
如果有重复的方法，则如下：
interface Alarm {
price: number;
alert(s: string): string;
}
interface Alarm {
weight: number;
alert(s: string, n: number): string;
}
<=>
interface Alarm {
price: number;
weight: number;
alert(s: string): string;
alert(s: string, n: number): string;
}
扫一扫
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
