TypeScript学习

自动编译ts文件为js：tsc --init

实时编译：tsc -w ./path/file.ts

类型注解：一种为函数或变量添加的约束

接口：使用interface定义一个对象，里面定义了数据格式

TS基本数据类型：

• undefined和null可以作为其他类型的子类型
• 数组定义：

let arr1:number[]=[1,2,3]
let arr2:Array<number>=[1,2,3]

• 枚举类型：enum

enum Color={
	red,
	blue
}

let color:Color=Color.red	//输出的是元素的编号，即0

• any类型：不确定当前数据是什么类型又想把他存储起来，可以使用any
• void类型：函数没有返回值

function show():void{}

• object类型
• 联合类型：

function show(str:number|string){}

• 类型断言：

//如果不知道传入数据是数字还是字符串，又想获取它的长度
if((<string>str).length){
	return (<string>str).length
}

接口

interface IPerson{
	readonly name:string,	//表示该属性只读
	age?:number		//？表示age这个属性没有也是可以的
}

函数类型

interface IPerson{
	(name:string,age:number):boolean
}

const person:IPerson=function(name:string,age:number):boolean{}

类类型

interface IPerson1{
	fly1()
}

interface IPerson2{
	fly2()
}

//定义一个接口继承多个接口
interface IPerson extends IPerson1,IPerson1{
}

//实现接口中的方法,类可以实现多个接口
class Person implements IPerson1,IPerson2{
	fly1(){
		console.log('1')	
	}
	fly2(){
		console.log('2')	
	}
}

多态

class Animal{}
class Dog extends Animal{}
class Pig extends Animal{}

const dog:Animal=new Dog()
const pig:Animal=new Pig()

修饰符（主要描述类中成员的可访问性）

public		//都可以访问
private		//类外部无法访问，子类也不可以访问
protected	//类外部无法访问，子类内部可以访问

readonly修饰类中成员属性，可以在constructor中修改该属性
readonly修饰类中构造函数中的参数，类中会包含该属性成员
class Person{
	constuctor(readonly name:string){
		this.name=name
	}
}
const p=new Person('x')
console.log(p.name)	//	x

存取器(get和set)

静态属性（static）

不能在constructor中使用this调用static属性，只能使用类.属性的方法

class Person{
	static name1:string
	static show(){
		console.log(1)
	}
}

const person=new Person('x')
console.log(Person.name,Person.show())	//注意是Person类，而不是实例对象person

抽象类(包含抽象方法，但方法没有具体实现内容)

abstract class Animal{
	abstract eat(){}
}

class Dog extends Animal{
	eat(){
		console.log(1)	
	}
}

函数及函数类型

cosnt add:(x:number)=>number=function(x:number):number{}

剩余参数

function show(str:string,...args:string[]){}

函数重载

function add(x:string,y:string):string
function add(x:number,y:number):number

function add(x:number|string,y:number|string):number|string{}

泛型

在定义函数、接口、类时，不能预先确定要使用的数据类型

function add<T>(value:T):T[]{}
const arr=add<number>(200)

//多个泛型
function add<T,K>(value:T,num:K):[T,K]{}

never和void的区别

• void表示没有任何类型（可以赋值为null和undefined）
• never表示一个不包含值的类型
• 拥有never返回值类型的函数无法正常返回，无法终止

数组越界

打印整个数组不会报错，但是打印数组中的单个元素会报错

let arr: [string, number] =['6',6]
arr.push(6)

无法使用for of遍历map数据

设置target=es5对的时候会报错

需要在tsconfig.json文件中配置：

{
	"downlevelIteration"：true,
	"lib": [
		 "dom",
	    "es5",
	    "es6",
	    "es7",
	    "dom.iterable"
	]
}