Ts基础（一）—— 类型
类型
1、基础类型
2、数组类型
// 有两种写法，推荐第一种
let numbers: number[] = [1, 3, 5]
let numbers: Array<number> = [1, 3, 5]
3、联合类型
let arr: (number | string)[] = [1, 3, 'a', 5, 'b'] // 带小括号
let arr1: number | string[] = ['a', 'b'] // 区分：表示arr1为number类型或string数组类型，二选一
4、类型别名（自定义类型）
使用场景：当同一类型（复杂）被多次使用时，可以使用类型别名，简化该类型的使用
使用方法：使用type关键字来创建类型别名
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 6, 'y']
5、函数类型
// 1、单独指定参数和返回值的类型
// 声明式函数
function add(num1: number, num2: number): number {return num1 + num2
}
// 表达式函数
const add = (num1: number, num2: number): number => {return num1 + num2
}// 2、同时指定参数和返回值的类型,这种形式只适用于函数表达式
const add: (num1: number, num2: number) => number = (num1, num2) => {return num1 + num2
}6、void类型
function greet(name: string): void {console.log("hello", name)
}greet('nike')
7、函数可选参数
注意：可选参数只能出现在参数列表的最后
function mySlice(start?: number, end?: number): void {console.log('起始', start, '结束', end)
}mySlice()
mySlice(1)
mySlice(1, 3)
8、对象类型
js中的对象是由属性和方法构成的，而ts中对象的类型就是在描述对象的结构
let person : { name: string; age: number; sayHi: () => void; greet(name: string): void } = {name: 'nike',age: 18,sayHi() {},greet(name) {}
}
9、接口
当一个对象类型被多次使用时，一般会使用接口interface来描述对象的类型，达到复用的目的
interface IPerson {name:stringage: numbersayHi(): void
}let person1: IPerson = {name: 'nike',age: 18,sayHi() {},
}let person2: IPerson = {name: 'jack',age: 19,sayHi() {},
}
10、interface（接口）和type（类型别名）的对比
相同点：都可以给对象指定类型
不同点：接口只能为对象指定类型，类型别名可以为任意类型指定别名
// interface IPerson {
// name: string
// age: number
// sayHi(): void
// } type IPerson = {name: stringage: numbersayHi(): void
}let person: IPerson = {name: 'nike',age: 18,sayHi() {},
}type NumStr = number | string
10、接口继承
如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离，通过继承实现复用
interface Ponit2D { x: number; y: number }
interface Ponit3D { x: number; y: number; z: number }
// 优化成继承
interface Ponit2D { x: number; y: number }
interface Ponit3D extends Ponit2D { z: number }let p3: Ponit3D = {x: 1,y: 0,z: 0
}
11、元组（Tuple）
元组类型是另一种类型的数组，它确切的知道包含多少个元素，以及特定索引对应的类型
例如：地图坐标经纬度，有两个元素切都是数值类型
let position: [number, number] = [39.5436， 116.6346]
11、类型断言
// 两种写法
// 1、使用as关键词实现类型断言
const aLink = document.getElementById('link') as HTMLAnchorElement
// 2、使用<>语法
const aLink = <HTMLAnchorElement>ducument.getElementById('link')
// 技巧：在浏览器控制台，通过console.dir($0)打印DOM元素，在属性列表的最后面，即可看到该元素的类型。