typescript学习总结
xiaokeqi opened this issue · 0 comments
xiaokeqi commented
介绍
Typescript 对代码进行了静态分析，排除一些类型错误,其是js的超集。TypeScript使用的是结构性类型系统。 当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。因此在使用时，只要牢记这条准则，就能帮组我们排除大多编译不通过问题！
基础类型
-
布尔值 boolean
-
数字类型 number 十进制、十六进制0x、八进制0o、二进制0b
-
字符串 string
-
数组 [],如number[]或Array
-
元组，如[string, number]
-
枚举，如
-
enum Color {Red = 1, Green, Blue} let c: Color = Color.Green;
编译后
var Color; (function (Color) { Color[Color["Red"] = 1] = "Red"; Color[Color["Green"] = 2] = "Green"; Color[Color["Blue"] = 3] = "Blue"; })(Color || (Color = {})); var c = Color.Green;可见，枚举类型，是一个对象，其值为
{ 1: 'Red', 2: 'Green', 3: 'Blue', 'Red': 1, 'Green': 2, 'Blue': 3 }通俗的理解，枚举类似于数学中的集合A={1,2,3},使用这个集合的时候，只能用集合里面的值1、2、3，集合之外的值不能使用，会报错
枚举还有一个特点是，我们可以通过值取键，可以通过键取值
-
-
undefined 和 null
-
任意值any，编程阶段不清楚的类型或者想绕过类型检查器的类型
-
空值void，常用于无返回值的函数，如
function warnUser(): void { alert("This is my warning message"); }
类型断言
类型断言，可以理解为类型转换，但js中的类型转换是在运行时进行转换的，而类型断言是ts在编译时进行转换的，它是一种人为的“主观意愿”的转换，告诉编译器它不应该报错，其是此类型的
看个例子
const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'
这个经过ts编译时，会报Error
而经过类型断言后，
interface Foo {
bar: number;
bas: string;
}
const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';
编译器会强制把{},解析为Foo类型，即将{}转换为了Foo类型，从而绕过了编译器的编译机制。不再报错
接口
1、属性接口
保证两个类型内部结构兼容，则为实现接口，如
interface Person {
name: string;
age: number;
hobby?: string;
readonly x: number;
}
function greeter(person: Person) {
return "Hello, " + person.name + ", i am " + person.age + "years old";
}
let user = { name: "Jane", age: 23, sex: 'male',x:5 };
document.body.innerHTML = greeter(user);
注：
-
即person必须拥有两个属性，name、age,多于其不限，少于不行！！！
-
hobby后跟？代表可选属性，预定义了属性hobby，不用对其赋值。函数中依旧可以用hobby，编译不报错。
-
readonly + 属性,代表其为只读属性，不能对其值进行变更
-
ReadonlyArray，把所有可变方法去掉，确保数组被创建后不会更改
let a: number[] = [1, 2, 3, 4]; let ro: ReadonlyArray<number> = a; ro[0] = 12; // error! ro.push(5); // error! ro.length = 100; // error! a = ro; // error!以上例子定义了ro为不可改数组。对其做的变更都会被报error，如果需要强制对其更改，需采用类型断言
a = ro as number[];那么问题来了，何时使用readonly，何时使用const，最简单的判断是，若为变量，用const，若为属性用readonly
2、函数类型接口
举例如下：
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;
}
3、可索引的类型接口
用于数组类如a[10]或对象类如ageMap["daniel"]，具体如下
- 对象类
interface NumberDictionary {
[index: string]: number;
length: number; // 可以，length是number类型
}
let myDictionary: NumberDictionary;
myDictionary = {
age: 29,
length: 7
};
- 数组类
interface NumberDictionary {
[index: number]: string;
}
let myArray: NumberDictionary = ['xiaoqi', 'dandan'];
- 索引类，属性书写方法为：[index: + 类型]
- 对象索引类，其他属性均需符合索引类规则，如上例中length必须为 string，length的值必须为number
4、类类型接口
强制类符合接口规则
interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}
class Clock implements ClockInterface {
currentTime: Date;
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) { }
}
- 类对接口的实现要用关键字 implements
- 描述了类的公共部分，不会检查私有成员
- 只对实例部分进行检查，对静态方法不做检查
5、继承接口
如下：
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;
- 接口继承用关键字extends
- 一个接口可以继承多个接口
6、混合类型接口
有时我们希望一个对象，既可以当做对象又可以当做函数、并带有额外属性，此样子的接口定义如下：
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;
- Counter中存在函数类型规则、interval属性、reset()函数
- 将function(start:number){}类型断言为Counter接口，counter则存在interval、reset。日中reset为其静态方法
7、接口继承类
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的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 {
}
类
1、基本用法
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);
经过tsc编译后的代码如下：
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Animal = /** @class */ (function () {
function Animal(theName) {
this.name = theName;
}
Animal.prototype.move = function (distanceInMeters) {
if (distanceInMeters === void 0) { distanceInMeters = 0; }
console.log(this.name + " moved " + distanceInMeters + "m.");
};
return Animal;
}());
var Snake = /** @class */ (function (_super) {
__extends(Snake, _super);
function Snake(name) {
return _super.call(this, name) || this;
}
Snake.prototype.move = function (distanceInMeters) {
if (distanceInMeters === void 0) { distanceInMeters = 5; }
console.log("Slithering...");
_super.prototype.move.call(this, distanceInMeters);
};
return Snake;
}(Animal));
var Horse = /** @class */ (function (_super) {
__extends(Horse, _super);
function Horse(name) {
return _super.call(this, name) || this;
}
Horse.prototype.move = function (distanceInMeters) {
if (distanceInMeters === void 0) { distanceInMeters = 45; }
console.log("Galloping...");
_super.prototype.move.call(this, distanceInMeters);
};
return Horse;
}(Animal));
var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);
- 派生类包含构造函数时，必须调用super()且在访问this之前,super()会执行Animal.call(this,args)
- 子类可以通过重写同名函数
- 以上所有方法均默认为public
- ts编译后的继承方式，静态方法通过setPrototypeOf实现，实例方法通过Object.create实现。
2、修饰符
-
public，类中成员默认为是public来做修饰。如上面所示例子的成员变量，均是public的
-
private,成员变量被标记为private时，它就不能在声明它的类的外部访问
class Animal { private name: string; constructor(theName: string) { this.name = theName; } } new Animal("Cat").name; // 错误: 'name' 是私有的.编译为js后为
var Animal = /** @class */ (function () { function Animal(theName) { this.name = theName; } return Animal; }());- 在ts中，不可在外部访问private成员变量
- 在编译后的js中，其依旧为实例属性，可访问
- 故ts是严格要求我们不能这样写，做了一次代码检查。只是代码检查时不通过，但可以这样写
-
protected不能在外部调用但可以被继承
class Animal { private name: string; constructor(theName: string) { this.name = theName; } } class Rhino extends Animal { constructor() { super("Rhino"); } } class Employee { private name: string; constructor(theName: string) { this.name = theName; } } let animal = new Animal("Goat"); let rhino = new Rhino(); let employee = new Employee("Bob"); animal = rhino; animal = employee; // 错误: Animal 与 Employee 不兼容.
3、存取器
TypeScript支持通过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);
}
tsc转换后为
var passcode = "secret passcode";
var Employee = /** @class */ (function () {
function Employee() {
}
Object.defineProperty(Employee.prototype, "fullName", {
get: function () {
return this._fullName;
},
set: function (newName) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
},
enumerable: true,
configurable: true
});
return Employee;
}());
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
- 编译器设置输出必须为es5或者更改，不支持es3
- 只带有get的存取器被ts自动推断为readonly
- 编译后的实现是通过Object.defineProperty来实现的
4、静态属性
class Grid {
static origin = {x: 0, y: 0};
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor (public scale: number) { }
}
let grid1 = new Grid(1.0); // 1x scale
let grid2 = new Grid(5.0); // 5x scale
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));
tsc编译后
var Grid = /** @class */ (function () {
function Grid(scale) {
this.scale = scale;
}
Grid.prototype.calculateDistanceFromOrigin = function (point) {
var xDist = (point.x - Grid.origin.x);
var yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
};
Grid.origin = { x: 0, y: 0 };
return Grid;
}());
var grid1 = new Grid(1.0); // 1x scale
var grid2 = new Grid(5.0); // 5x scale
console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));
- 使用static定义
- 通过类名调用
- 直接将静态函数赋值到构造函数上
5、抽象类
抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。 不同于接口，抽象类可以包含成员的实现细节。 abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。 抽象方法的语法与接口方法相似。 两者都是定义方法签名但不包含方法体。 然而，抽象方法必须包含 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(); // 错误: 方法在声明的抽象类中不存在
函数
-
this,不确定其值是，可定义为any类型，
-
重载是为同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用。 在调用的时候进行正确的类型检查，为了让编译器能够选择正确的检查类型，它与JavaScript里的处理流程相似。 它查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。
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);function pickCard(x): any并不是重载列表的一部分
泛型