一、简介
typescript是js的超集,主要学习ts里面的原始类型、字面量类型、数组类型、函数类型、类类型、接口类型、类型别名、联合与交叉类型、枚举类型、泛型等类型元素,以及类型推断、类型断言、类型缩小、类型放大等特性。
全局安装 typescript
npm i -g typescript@4.5.2
检查typescript安装版本
tsc -v
在项目文件夹中执行tsc -init
表示ts初始化项目:
tsc -init
编译当前项目文件夹的ts文件到指定的目录下:
tsc -p tsconfig.json
开启服务,监听编译当前项目文件夹的ts文件到指定的目录下:
tsc -p tsconfig.json --watch
二、原始数据类型
原始数据类型:string,number,boolean,symbol,null,undefined
//基本数据类型:string,number,boolean,symbol,null,undefined
export {}; // 第一行增加这个是为了使文件里的变量不污染全局
let num:number = 6 //number类型
let str:string = 'abc' //string类型
let bool:boolean = true //boolean类型
let nul:null = null //null类型
let unde:undefined = undefined //undefined 类型
let sym:symbol = Symbol('2') //symbol类型
let void1:void = undefined; // 可以把undefined类型赋值给void类型,但是反过来不行
// 函数没有返回值,那么函数的返回值类型就是void
function fn(): void {
return undefined;
}
注意:
1. 如果不写类型,typescript是可以推断类型的。如:
let str = "1"; //初始值就是变量类型,下面类型不能改变
const num = 12; //常量不能改变类型,值就是他的类型
2. undefined和null最大的价值主要体现在接口类型上,表示可缺省、未定义的属性;null表示对象或者属性是空值。
3. void只用在函数没有返回值的情形下。
三、复合数据类型
1. 小object, 大Object, {}
小object:代表的是非原始类型,也就是不能是string,number,boolean,symbol,严格模式:多包括null,undefined
let obj1:object = 3 //报错
let obj2:object = '1234' //报错
let obj3:object = true //报错
let obj4:object = null //报错
let obj5:object = undefined //报错
let obj6:object = Symbol() //报错
let obj7:object = {a:1,b:'a'} //正确
let arr:object = [1,2,4] //正确
大Object :代表所有拥有 toString、hasOwnProperty 方法的类型,所以所有原始类型、非原始类型都可以赋给 Object,严格模式下不包括null,undefined。{}空对象类型和大 Object 一样。
let obj1:Object = 3
let obj2:Object = '1234'
let obj3:Object = true
let obj4:Object = null //报错
let obj5:Object = undefined //报错
let obj6:Object = Symbol()
let obj7:Object = {a:1,b:'a'}
let arr:Object = [1,2,4]
注意:
1、从上面实例中可以看出来大 Object 并不完全等价于小 object。
2. 数组类型
数组类型的定义:
export { }
//数组第一种写法:泛型写法
let arr:Array<number> = [1,3,4,6,7] //定义了arr中每个元素都是number类型
arr.push(5)
arr.push('a') //报错:新增加的a不是number类型
//数组第二种写法:
let arr1:number[] = [4,5,6,7]
arr1[0] = 7
//数组第三种写法:元组写法
let arr2:[number,number,string] = [2,4,'aa']
3. 联合类型
使用 |(竖线)操作符来定义联合类型。联合类型表示一个值可以是几种不同类型中的某一种类型。
export { }
let numStr:number|string = 'abc'
numStr = 123
numStr = true //报错 赋值不是number类型也不是string类型
4. 交叉类型
它可以把多个类型合并成一个类型,合并后的类型将拥有所有成员类型的特性。使用“&”操作符来声明交叉类型(并集)。
export { }
//交叉类型:如果一个类型出现多次,需要都满足
let m : string & number; // 思考这里有一个值满足m的类型要求吗?
let obj:{name:string,age:number}&{height:number} //obj中有三个属性name,age,height需要都满足
obj = {
name: 'Lucy',
age: 14,
height: 175
}
5. 联合、交叉组合
联合、交叉类型本身就可以直接组合使用,这就涉及 |、& 操作符的优先级问题。联合操作符 | 的优先级低于交叉操作符 &,同样,我们可以通过使用小括弧 () 来调整操作符的优先级,这个和js一样。
let info:{name:string} & {age: number} |{name:string} & {age: string};
info = {
name: 'Lucy',
age:15
}
//或是下面这种类型
info = {
name: 'Lucy',
age:'15'
}
6、any&&unknown
any 指的是一个任意类型,它是官方提供的一个选择性绕过静态类型检测的作弊方式。非常不建议使用;Any is Hell(Any 是地狱)
unknown 是 TypeScript 3.0 中添加的一个类型,它主要用来描述类型并不确定的变量。和any的区别就是会进行类型检测。
//any是任何类型,就是绕过类型检查
let a:any = 1;
a = 10;
a = [1,2,3,4] //上面的这种写法都不会报错,因为都是绕过了类型检查
a.toFixd(2) //不会报错,不会进行类型检查
//unknown 是 TypeScript 3.0 中添加的一个类型,它主要用来描述类型并不确定的变量。和any的区别就是会进行类型检测。
let n:unknown;
n = 1234
n = '123456'
n = true
n.toFixd(2) //会报错,会进行类型检查
7、枚举类型
数字枚举类型:用enum定义开始,枚举成员的值是从 0 开始自增的数字。
// 定义一个表示星期的数字枚举
enum Weekday {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}
// 使用枚举
let today: Weekday = Weekday.Monday;
console.log(today); // 输出 0,因为Monday默认值是0
字符串枚举
字符串枚举中,每个枚举成员的值都必须是明确的字符串字面量,不能是其他类型,也不会有默认自增的情况。
enum Color {
Red = "RED",
Green = "GREEN",
Blue = "BLUE"
}
let myColor: Color = Color.Green;
console.log(myColor); // 输出 "GREEN"