原始类型使用

// 原始类型使用
let age: number = 18let myName: string = '前端'let isLoding: boolean = falselet a: null = nulllet b: undefined = undefinedlet s:symbol = Symbol()

数组类型使用

// 数组类型的两种写法// 写法一
let numbers: number[] = [1, 2, 3] // 数值类型数组
// 写法二
let strings: Array<string> = ['a', 'b'] // 不推荐写法，懂这种写法即可

联合类型使用

// 联合类型// 数组中既有number类型又有string类型
const arr: (number | string)[] = [1, 'a']// 不添加小括号，表示arr1既可以是number类型也可以是string[]类型
const arr1: number | string[] = 123;

类型别名（自定义类型）

// 类型别名（自定义类型）type CustomArray = (number | string)[]const arr: CustomArray = [1, 'a']
const arr1: CustomArray = ['111']

函数类型（单独指定参数和返回值的类型和同时指定参数和返回值的类型）

// 单独指定参数和返回值的类型
// 写法一
function add(num1: number, num2: number): number {// (num1: number, num2: number)是指定参数类型// 紧跟后面的: number是指定返回值的类型return num1 + num2
}
console.log(add(1, 2));// 写法二
const minus = (num1: number, num2: number): number => {return num2 - num1
}
console.log(minus(1, 2));// 同时指定参数和返回值的类型
// 1. 当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型
// 2. 这种形式只适用于函数表达式
const add1: (num1: number, num2: number) => number = (num1, num2) => {return num1 + num2
}console.log(add1(11, 22));

void类型

// void类型
// 如果函数没有返回值，那么函数的返回值类型为voidfunction greet(name: string): void {console.log(name)
}greet('jack')

函数可选参数

// 函数可选参数function mySlice(start?: number, end?: number): void {console.log(start, end);
}mySlice();
mySlice(1);
mySlice(1, 3);

对象类型

// 对象类型let person: {name: stringage: numbersayHi(): voidgreet: (name: string) => void
} = {name: 'jack',age: 18,sayHi() { },greet: (name) => { }
}

对象可选属性

// 对象可选属性function myAxios(config: { url: string; method?: string }) {console.log(config)
}myAxios({ url: '' })

接口（interface）

// 接口（interface）interface IPerson {name: stringage: numbersayHi(): void
}let person: IPerson = {name: '前端',age: 35,sayHi: () => { }
}

接口（interface）和类型别名（type）的对比

/*** 接口（interface）和类型别名（type）的对比* * 相同点：都可以给对象指定类型* 不同点：*      1. 接口，只能为对象指定类型*      2. 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名* */// 接口
// interface IPerson {
//     name: string
//     age: number
//     sayHi(): void
// }// 类型别名
type IPerson = {name: stringage: numbersayHi(): void
}let person: IPerson = {name: '前端',age: 35,sayHi: () => { }
}

接口继承

// 接口继承interface Point2D {x: numbery: number
}// 这样写麻烦有重复代码
// interface Point3D {
//     x: number
//     y: number
//     z: number
// }// 使用继承  实现复用
interface Point3D extends Point2D {z: number
}const p3: Point3D = {x: 1,y: 2,z: 3
}

元组(场景：1. 在地图中，使用经纬度坐标来标记位置信息 2. 确切地知道包含多少索引以及类型时使用)

// 元组(场景：在地图中，使用经纬度坐标来标记位置信息)// 不严谨，因为该类型number[]的数组中可以出现任意多个数字
// const position: number[] = [39, 11, 1, 2, 3]// 更好的方式：元组（Tuple）
const position: [number, string] = [3, '4']

类型推论

// 类型推论（声明变量但没有初始化值，此时必须手动添加类型）
// 注意：能省略类型注解的地方就省略，充分利用TS类型推论的能力，提升开发效率
// 如果不知道类型，可以通过鼠标放在变量名称上，利用VSCode的提示来查看类型let age = 18
// 类型保护机制也是存在的， 因此会报错
// age = ''// 函数也是可以自动推论, 建议参数必须添加类型
function add(num1: number, num2: number) {return num1 + num2
}add(1, 3)