TS常用类型

原始类型使用

// 原始类型使用
let age: number = 18

let myName: string = '前端'

let isLoding: boolean = false

let a: null = null

let b: undefined = undefined

let 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类型
// 如果函数没有返回值，那么函数的返回值类型为void

function 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: string
    age: number
    sayHi(): void
    greet: (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: string
    age: number
    sayHi(): 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: string
    age: number
    sayHi(): void
}

let person: IPerson = {
    name: '前端',
    age: 35,
    sayHi: () => { }
}

接口继承

// 接口继承

interface Point2D {
    x: number
    y: 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)