Typescript这一篇就够了

安装

npm i typescript -g

• 基础类型

// 1. 数字类型,支持二进制,八进制,十进制,十六进制
let num1: number = 6;
let num2: number = 0xf00d;
let num3: number = 0b1010;
let num4: number = 0o744;
// 2. 字符串,也支持模板字符串语法
let str1: string = 'jack';
let age:number = 23;
let str2: string = `年龄为${age}`;
// 3. 布尔类型
let flag:boolean = false;
// 4. 数组类型: 数组中必须是同一类型
let arr1:number[] = [1,2,3];
let arr2: Array<number> = [4,5,6]
// 5. 元组: 数组中可以定义不同类型
let arr3:[string,number,string] = ["lisi",23,"篮球"]
// 元组访问
console.log(arr3[0])
// 超出索引的值为联合类型
arr[3] // 类型就可以是number或者字符串
// 6. 枚举 menu , 通常用来定义一些常量
enum Direction {
    UP,
    DOWN,
    LEFT,
    RIGHT
};
// 如果枚举不赋值,那么就从0开始,后一个常量没有赋值往往是前一个数字类型加1
Direction.UP // 0
Direction.DOWN // 1
// 反向映射
Direction[3] // RIGHT
// 7. any: 这个类型比较随意,可以任意定义,不受约束,尽量少用
let num:any = 1
// any类型可以复制给任意类型
num = 'lisi'
num = [1,'lisi',2]
// 8. void: 通常用来定义没有返回值的
function warn():void{
	console.log("这是一个void函数测试")
}
// 9. object 类型: 
let obj:{
    name:string,
    age:number
} = {name:'张三',age:23}
// 通常也可以这样定义,stu来代表总类型,赋值给变量
interface stu{
    name:string,
    age:number
}
let obj:stu = {name:'张三',age:23}
// 10. 不常用的几个类型,在此处就不列举了,null,undefined,nerve
// strictNullChecks 检查是否是null类型

常用的一些标识符

//as: 类型断言,自己知道他是什么而计算机不知道
// 假设在vue中创建一个ref
const chat = ref(null)
const canvas = chat.value as HTMLCanvasElement
// !: 非空断言, 自己这个这个值存在并不为空
// 比如我们在获取接口时候,res为获取到的后端数据
console.log(res.data!.total)
// ?: 可选类型
// 此处身份证就是可选类型,可有可无
const stu = {
	name:string,
	age:number,
	IdCard?:number
}
// !! 强制转换,这个大家应该经常用,并不陌生
let token = ""
// 将其他类型强制转换为boolean类型
if(!!token){
}
// type: 这个类似于interface接口,具体区别可以参考文档
type stu = {
    name:string,
    age:number
}
let obj:stu = {name:'张三',age:23}
// |: 联合类型
type ENV = 'development' | 'production' | 'test'
let node:ENV = 'development'
// 比如获取后端数据时候性别可以这样赋值
type Sex = 0 | 1
let sex = res.data.sex as Sex
// &: 交叉类型,用于扩展功能
type roboot_base = {
    name:string,
    age:number
}
type roboot_arrt = {
    id:string,
    position:Array<number>
}
type roboot = roboot_base & roboot_arrt
let roboot:roboot = {
    id:'001',
    name:"机器人1",
    age:0,
    position:[0,0,0]
}
// typeof:类型判断
let num = '10'
console.log(typeof(num)) // string

函数

// 携带参数和返回值
function add(x:number,y:number):number{
    return x+y
};
// 匿名函数
let add = (x:number,y:number,z:number):number => {
    return x+y+z
};

泛型

// 通常在项目中有一些不确定的类型,通常会想到any,其实也可以用泛型先定义
function test<T>(arg: T): T{
   return arg;
}
// 此处T就是number
test<number>(100)