TypeScript学习笔记1

数据类型

数据类型：boolean、string、number、array、tuple（元祖类型）、enum（枚举类型）、any(任意类型）

定义数组

var arr:number[] = [11,22,33]

元祖类型

本质上属于数组的一种，用作定义混合数组

let arr:[number,string] = [123,'字符串',456]

枚举类型

一般用作状态标记

enum Flag{success = 1, error = 2}
let f:Flag = Flag.error  // 定义变量f是Flag类型
console.log(f)  //输出2

函数

可选参数

function getInfo(name:string, age?:number):string {  // 参数age是可传参也可不传参的
	return 'string';
}

默认参数

function getInfo(name:string, age:number=20):string {  // 参数age默认值是20
	return 'string';
}

三点运算符传参

函数重载

提一下es6里面的箭头函数

类

es5里面的类

原型链（prototype声明的）里面的属性会被多个实例共享，构造函数不会

es5里面的对象冒充实现继承

function Person() {
	this.name = '张三';
	this.age = 20;
	this.run = function () {
	alert(this.name + '在运动');
	}
}

/* 原型链声明Person对象的属性和方法 */
Person.prototype.sex = '男';
Person.prototype.work = function () {
	alert(this.name + '在工作');
}
	
// web类继承Person类，原型链+对象冒充的组合继承模式
function Web () {
	Person.call(this); // 对象冒充实现继承
}

var w = new Web();

w.run(); // 成功！ 对象冒充可以继承构造函数里面的方法和属性

w.work(); // 失败！对象冒充不可以继承原型链里面的属性和方法

es5里面的原型链实现继承

function Person() {
	this.name = '张三';
	this.age = 20;
	this.run = function () {
	alert(this.name + '在运动');
	}
}

/* 原型链声明Person对象的属性和方法 */
Person.prototype.sex = '男';
Person.prototype.work = function () {
	alert(this.name + '在工作');
}
	
// web类继承Person类，原型链继承模式
function Web () {
}
Web.prototype = new Person();  // 原型链继承
var w = new Web();

w.run(); // 成功！ 原型链继承可以继承构造函数里面的方法和属性

w.work(); // 成功！原型链继承可以继承原型链里面的属性和方法

es5原型链继承的问题

es5原型链继承时，无法给在实例化子类的时候无法给父类的构造函数传参

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.run = function () {
	alert(this.name + '在运动');
	}
}

// web类继承Person类，原型链继承模式
function Web (name, age) {
}
Web.prototype = new Person();  // 原型链继承
var w = new Web('张三', 20);

w.run(); // 成功！ 但输出的是 undefined在运动，即传递给Web对象的参数无法一起传递到父对象的构造函数中

es5解决原型链继承的问题，对象冒充加原型链继承混合模式

解决es5原型链继承时，无法给在实例化子类的时候无法给父类的构造函数传参的问题，即加入对象冒充

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.run = function () {
	alert(this.name + '在运动');
	}
}

// web类继承Person类，原型链继承模式
function Web (name, age) {
	Person.call(this, name, age) // 对象冒充，实例化时可以给父类传参
}
Web.prototype = new Person();  // 原型链继承
// Web.prototype = Person.prototype; 这样写也可以，因为对象冒充已经继承了父类构造函数中的方法与属性，原型链只需要再继承父类方法中的原型链属性和方法即可
var w = new Web('张三', 20);

w.run(); // 成功！ 输出的是 张三在运动，即传递给Web对象的参数一起传递到了父对象的构造函数中

typeScript里面的类

class Person {  // 注意，Person后面没有（）
	name:string; // 属性，前面省略了public关键词
	constructor(n:string) { // 构造函数
		this.name = n ;
	}
	getName:string() {
		return this.name;
	}
}
var p = new Person('张三');
p.getName() // 张三

typeScript的继承

关键字是extends和super和java差不多

class Person {  // 注意，Person后面没有（）
	name:string; // 属性，前面省略了public关键词
	constructor(n:string) { // 构造函数
		this.name = n ;
	}
	getName:string() {
		return this.name;
	}
	work() {
		alert(this.name + '在工作--父类' ) 
	}
}

// Web类继承Person类
class Web extends Person {
	constructor(name:string) {
		super(name) // 使用父类的构造方法
	}
	work() {
		alert(this.name + '在工作--子类' ) // 能成功取到name
	}
}
var w = new Web('张三');
w.getName() // 张三
w.work() //注意，此处继承特性与java一样，即当父类和子类有同样的方法名时，首先调用子类的方法,即输出是 张三在工作--子类

跟java很像的类修饰符

结语

感谢大地老师在bilibili中提供的免费学习视频。
有1就有2，看这–>TypeScript学习笔记2