TypeScript学习笔记

TypeScript

TypeScript是什么

TypeScript 就是 Type + ECMAScript，让javascript增加了类型的概念

TypeScript的优势

Typescript是强类型，一旦定义了数据的类型，则不能修改，这样能节省开发阶段的一些低级错误

支持模板字符串
有点像react中的prop-types

搭建TypeScript开发环境

在线编译
- https://www.tslang.cn/play/index.html
本地编译
- npm install -g typescript
- 安装完之后，使用tsc 文件名来编译

类型

字符串

let foo: string = "bar";
这里将foo绑定成了string类型，则后期就不能改变数据类型

对象

对象这里一旦定义了类型，则必须声明这个变量，
可以再变量名的后面加个？号，表示是个可选属性

Code

let uesr: {
	name: string,
	age: number
} = {
	name: zrb,
	age: 18
}

另一种写法（基本不用）

Code

let foo: Object = {
	name: "jack",
	age: 18
}

布尔值

let b: boolean = true

数值

let num: number = 10

数组

数字类型的数组：
- let arr: number[] = [1,2,3,4]
- let arr: Array<number> = [1,2,3,4]
字符串类型的数组：
- let arr: string[] = ["hello","world"]

元组

let arr: [number,string] = [19,"jack"]
注意：这里必须符合要求，第一个必须是number类型，第二个必须是string类型
定义了两个就必须用两个来接收且类型匹配的才可以

any

当你定义的变量，不确定类型时，可以使用any（尽量少用）
后期也可以修改成其他类型的值

Code

let num: any = 10;


let ret: string = (num as string).substr(1);

void

注意：void只能用于函数的放回值

Code

当函数有返回值时
function add(x: number,y: number): number {
	return x + y;
}

当函数没有返回值时
function fn(): void {
	console.log("hello")
}

null和undefined

这两个没意义，null只能是null，undefined只能是undefined

接口

当有多个对象里的数据类型都一样的时候，这样就会产生重复性的代码，为了解决这个问题，我们引入接口的概念

使用：

Code


interface Person {
	name: string,
	age: number
}


let zrb: Person = {
	name: "zrb",
	age: 20	
}

let zyt: Person = {
	name: "zyt",
	age: 21
}

get和set

for-of循环

for
forEach
- 缺点：一旦开始，则不能结束
for in
for of

用法：

Code

var arr:number[] = [11,22,33];
for(let val of arr){
	console.log(val)	//11,22,33
}

ES6中的支持

ES6中的结构赋值

数组：

Code

1 2	let arr: number:[] = [10,20] let [num1,num2] = arr;

对象

Code

let user = {
	name: "zrb",
	age: 18
}

let {name: nickname,age} = user;

这里有一点需要注意的，在浏览器中，window对象本身就有一个成员name

class

Code

class Person {

	<!-- 声明 -->
	public name: string;
	public age: number;

	private type: string = "tt";

	readonly tyle: string = "tt"

	protected foo: string = "foo": 

	constructor(name:string,age:number){
		this.name = name;
		this.age = age;
	}

}

也可以简写为

Code

class Person {
	constructor(public name: string,public age: number){

	}
}

默认public可以不写，跟window对象一样可以不加
private声明的私有成员，私有成员不能被继承，只能再内部调用
readonly声明的是只读成员，在内部可以修改，在实例不能被修改
protected声明的私有成员，能被继承

tsconfig

如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录

tsconfig.json文中指定了用来编译这个项目的根文件和编译选项