1. 环境搭建
- 安装TypeScript
npm install -g typescript
- 初始化TS配置文件
tsc --init
2. TS主要优势
- 编译时静态类型检测
- 引入了泛型和一系列的TS特有类型
- 强大的d.ts声明文件
- 轻松编译成JS文件
- 灵活性高
接下来就来看看TS的类型系统。
类型系统
类型系统是可以显示标记出代码中的意外行为，从而降低了发生错误的可能性。
类型注解
let age:number = 19
代码中的:number就是类型注解，这个注解的作用就是为变量添加类型约束，也就是说约定了什么类型，就赋值什么类型的值，否则抛出错误。
大概的注解语法就是上边这样的，那么我们接下来就来看看常用的类型：
首先我们来看看原始类型的变量如何定义：
原始类型注解
原始类型包含：number、string、boolean、null、undefined、symbol 语法：
let 变量名:类型 = 值
例如：
let age:number = 19
数组类型注解
语法1：
let number:number[] = [1,2,3,4]
语法2：
let string:Array<string> = ['a','b','c']
例如：
let num:number[] = [1,2,3,4,5]
console.log(num)
let num2:Array<number> = [1,2,3,4,5]
console.log(num2)
这样进行注解的数组中，只能存放单个类型的值，那么我们在实际开发中有的时候只存储一个类型的值是不满足开发需求的，那么我们如何去实现数组中多类型的注解呢？那么我们就来看看联合类型，这是TS新增的类型。
联合类型
联合类型就是由两个或者多个其他类型组成的类型，表示可以是这些类型中的任意一种 语法：
let arr:(number | string)[] = [1,'3',2,'4']
有小括号的话，表示数组中既可以有数字，又可以有字符串
let arr:(number | string)[] = [1,'3',2,'4']
没有小括号，arr既可以是number类型的数值，又可以是string类型的数组 那么联合类型可以让我们实现一个数组中存储多个类型的数据，那么如果这个数组中有好多的不同的类型，而且这个类型的数组有好多地方要用，那么就会导致代码冗余度很高。所以就有了一个非常好的类型，也就是自定义类型，也叫做类型别名。
自定义类型（类型别名）
自定义类型的使用场景就是当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用 语法：
type CustomArray = (number | string)[]
例如：
type CustomArray = (number | string)[]
let arr:CustomArray = [1,'3','4',2]
console.log(arr)
数组类型的我们说完了，接下来就该来说说对象类型如何实现注解。
对象类型注解
let person:{username:string;age:number,sayHi():void} = {
username:'jack',
age:19,
sayHi(){
console.log(`我是${this.username}, 我${this.age}岁了`)
}
}
console.log(person)
person.sayHi()
let person:{username:string;age:number;sayHi():void;greet(name:string):void} = {
username:'jack',
age:19,
sayHi(){
console.log(`我是${this.username}, 我${this.age}岁了`)
},
greet(name){
console.log(name)
}
}
console.log(person)
person.sayHi()
person.greet('张三')
函数类型
单独指定参数，返回值类型
function add(num1:number,num2:number){
return num1+num2
}
function add(num1:number,num2:number):number{
return num1+num2
};
console.log(add(1,2))
const add = (num1:number,num2:number):number=>{
return num1+num2
}
同时指定参数，返回值类型
const add:(num1:number,num2:number)=>number = (num1,num2)=>{
return num1 + num2
}
函数并不是每个函数都有返回值的，当我们不需要返回值的时候，就可以将注解的类型设置为void
void（新增）
如果函数没有返回值，那么，函数返回值类型为：void
function greet(username:string):void{
console.log(username)
}
greet('jack')
可选参数
作用：让函数的参数可传可不传
function mySlice(start?:number,end?:number):void{
console.log(start)
console.log(end)
}
mySlice()
mySlice(1)
mySlice(1,2)
注意：
- 可选参数：在可传可不传的参数名后面添加？
- 可选参数只能出现在参数列表的最后，也就是说，可选参数后面不能出现必选参数
3. 结语
以上是关于原始类型和对象类型的注解语法，其余的有关TS的内容也会持续更新，有需要的可以持续关注我的动态。
