TS是JS的超集，JS所拥有的，TS都有。
JS是弱类型语言，而TS是强类型语言，有了TS加持，JS应用会变得更加稳定且强大。
许多新项目，如果选择VUE3或React进行开发时，大多都会带上TS。
TS是前端领域大势所趋，每一个前端开发工程师都不应该忽略它
基础类型
let name: string let age: number let isVip: boolean //变量声明时，加上一个类型 name = '234' age = 234 isVip = true //使用变量时，类型必须是前面定义好的
数组类型
// 写法一 let arr: number[] = [234, 15, 1] let arr2: boolean[] = [true, false] // 写法二 let arra: Array<string> = ['234', 'sdges'] let arrb: Array<number> = [234, 124, 7456] let arrc: Array<boolean> = [false, false, true]
联合类型
let joint1: (number | string | boolean)[] joint1 = ['2345', 23423, true] let joint2: (number | null) joint2 = null
类型别名
// type用来定义类型别名，类型别名建议大写开头 type Alias1 = (string | number) type Alias2 = number[] let a1: Alias1 = '245' let a2: Alias2 = [234] //使用类名别名，方便复用
函数类型
function add(n1: number, n2: number): number { return n1 + n2 } let addFn = add(1, 3) console.log('当前打印---', addFn) //4
箭头函数
const jt = (n1: number, n2: number): number => { return n1 - n2 } console.log('当前打印---', jt(5, 2)) //3 console.log('当前打印---调用number类型自带的方法', jt(9, 2).toFixed(9)) //7.000000000
函数类型别名
// 定义一个别名 type AddFn = (num1: number, num2: number) => number // 使用别名AddFn const add2: AddFn = (num1, num2) => { return num1 + num2 } console.log('当前打印---add2', add2(10, 20)) //30
viod特殊类型，用于标记函数没有返回值
const greet = (msg: string): void => { console.log('当前打印---', 'Hello,' + msg) //Hello,程心 } greet('程心') const temp = (): void => { console.log('当前打印---', '云天明') //云天明 } temp()
函数可选参数，参数可传可不传，即参数名后面加?
// 必选参数不能位于可选参数后面 const optional = (msg: string, num?: number) => { console.log('当前打印---', `${msg},${num}`) //234,999 } optional('234', 999)
对象类型
// 空对象 let obj1: {} = {} // 有一属性的对象 let obj2: { name: string } = { name: '24' } // 有多个属性或方法的对象，注意定义多个属性的类型时用分号隔开 let obj3: { name: string; age: number; sayHi(): void } = { name: 'sf', age: 234, sayHi() { console.log('当前打印---', 'Hi') }, } // 对象类型别名 // 考虑到复用，对象类型用类型别名存储 // 这里面的方法为可选，为下面做铺垫 type ObjType = { name: string; age: number; isVip: boolean; sayHi?(): void } let newObj: ObjType = { name: 'fff', age: 0, isVip: true, sayHi() { }, } console.log('当前打印---', newObj) // 方法如果是可选的，那么就有可能是为undefined，那么undefined调用括号就会报错 // 解决方案：加判断，或者短路运算，或者可选链操作符 newObj.sayHi && newObj.sayHi() // 可选链操作符，跟上面&&是一样的作用 newObj.sayHi?.()
接口类型
// 只能用来定义对象类型别名 // interface和type的相比，少了等于号 // type存什么都可以，interface只能存对象 interface Person { name:string gender:string age:number habby?():void love?:string } let t:Person = { name:'34', gender:'342', age:9 } console.log('当前打印---',t)
接口继承
interface Point2D{ x:number y:number } interface Point3D extends Point2D { z:number } // extends关键字实现继承 let point:Point3D = { x:444, y:333, z:88 }
type实现接口继承
// 与interface的区别在于，extends换成了&符号 type Point2D2 ={ x:number y:number } type Point3D2 = Point2D2 & { z:number } let typePoint:Point3D2 = { x:43, y:234, z:9 }
元组类型
// TS的元组其实就是特殊的数组： // 1.元组的长度是固定的 // 2.元组的每一项类型也是固定的 // 数组 let arr5:number[] arr5 = [23,23,4] // 元组 // 定义了两个number，那么arr6数组只能有两个元素 let arr6:[number,number] arr6 = [234,235]
TS 类型推论
// 如果没有定义类型，TS会根据初始值推断出类型，鼠标悬停即可看到 let h = 'rte' // 重新赋值为string，可以 h = 'sf' // 重新赋值为number，会报错 // h = 234 // 注意：能省略--类型的情况 // 一、声明变量或形参的时候，提供初始值 // 二、主动写了函数return返回值
