类型注解

代码中的number就是类型注解

作用为变量添加类型约束（约定什么类型就是什么类型）

let age: number = 60
age = 20

原始类型

原始类型 number/string/boolean/null/undefined/symbol/

let age: number = 18
let myName: string = 'hello'
let isLoading: boolean = false
let a: null = null
let b: undefined = undefined
let c: symbol = Symbol()

数组类型

数组类型两种写法

let numbers: number[] = [1, 2, 3, 4, 5] // 推荐
let string: Array<string> = ['1', '2', '3', '4', '5']

联合类型 |

| (竖线) 在TS中叫做联合类型

// 添加小括号 表示 首先是数组，然后这个数组中能够出现 number或 string 类型的元素
let arr: (number | string)[] = [1, 2, 3, '4', '5']

//不添加小括号 表示arr1 既可以是number类型 又可以是string[]
let arr1: number | string[] = ['4', '5']
let arr2: number | string[] = 123

类型别名 type

使用场景：当同一类型（复杂）被多次使用可简化该类型使用

//复杂
let arr: (number | string)[] = [1, 2, 3, '4', '5']
let arr1: (number | string)[] = [1, 2, 3, '4', '5']
//优化
type asArray = (number | string)[]
let arr: asArray = [1, 2, 3, '4', '5']
let arr1: asArray = [1, 2, 3, '4', '5']

函数类型

函数类型实际上指的是：函数参数和返回值的类型

//表示参数为number类型 返回值也是number类型
function add(a: number, b: number, c: number,): number {
    return a + b + c
}
add(1, 2, 3)
//箭头函数
const add = (a: number, b: number, c: number): number => {
    return a + b + c
}
console.log(add(3,2));

同时指定参数返回值类型 (只适用于函数表达式)

const add: (a: number, b: number) => number = (a, b) => {
    return a + b
}
add(1, 2)

//解释
const add: (参数a: 类型, 参数b: 类ing) => 返回值类型 = (a, b) => {
    return a + b
}
add(1, 2)

如果函数没有返回值，那么返回类型为 void

function git(name: string): void {

}

可选参数

注意：必选参数不能位于可选参数之后

// 必选参数不能位于可选参数之后
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) } = {
    name: 'join',
    age: 18,
    sayHi() { },
    greet(name) { }
}

let person: {
    name: string
    age: number
    sayHi: () => void
    // sayHi(): void
    greet(name: string)
} = {
    name: 'join',
    age: 18,
    sayHi() { },
    greet(name) { }
}

对象可选参数 ?

function myAxios(config: { url: string, method?: string }) { }
myAxios({ url: 'http://www.baidu.com' })

接口 interface

当一个对象类型多次使用时可用interface 达到复用目的

interface Person {
    name: string
    age: number
    sayHi(): void
    greet(name: string)
}

const person: Person = {
    name: 'join',
    age: 18,
    sayHi() { },
    greet(name) { }
}

接口与类型别名（interface和type）

相同点：都可以给对象指定类型

不同点：接口只可以为对对象指定类型

类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

注意：类型别名不要忘了=号哦

type Person = {
    name: string
    age: number
    sayHi(): void
    greet(name: string)
}

interface Person {
    name: string
    age: number
    sayHi(): void
    greet(name: string)
}
type NumStr = number | string

接口继承 extends

如果两个接口之间有相同的属性或者方法，可以将公共的属性或方法抽离出来，通过继承实现复用

interface Point2D {
    x: number;
    y: number;
}
interface Point3D extends Point2D {
    z: number
}

let p3: Point3D = {
    x: 0,
    y: 0,
    z: 0
}

元组

知道确切的数组元素类型可使用

let position: number[] = [38.12312, 116.213]
let position1: [number, number] = [38.12312, 116.213] //元组

类型断言 as

使用as关键字实现类型断言

关键字as后面是一个更加具体的类型

const aLink = document.getElementById('link') as HTMLAnchorElement

字面量类型

let str1 = 'hello ts'
const str2 = 'hello ts'

通过TS类型推论机制，可得到答案

1.变量str1类型为：string

2.变量str2类型为：‘hello ts’

原因：

str1是一个变量（let）他的值可以是任一字符串，所以为string

str2是一个常量（const）它的值不能变化所以说就是‘hello ts’

function change(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction);
}
change('left')
//此处direction的值只能是up/down/left/right其中一个

枚举

注意：形参direction的类型为枚举Direction，那么实参的值就应该是枚举Direction成员的任意一个

枚举直接通过点（·）访问枚举成员

enum Direction { up, left, right, down }

function change(direction: Direction) {
     console.log(direction);
}
change(Direction.up)

数字枚举

枚举成员是有值的，默认为：从0开始自增的值

也可以进行修改

enum Direction { up = 11, left = 22, right = 33, down = 44 }

function change(direction: Direction) { 
    console.log(direction);
}
change(Direction.up) // 此时 Direction.up = 11

字符串枚举

// 注意：字符串没有自增长行为，因此，字符串枚举的每位成员必须有初始值

enum Direction { up = 'up', left = 'left', right = 'right', down = 'down' }

function change(direction: Direction) { }
change(Direction.up)

typeof操作符

使用场景：根据已有变量的值，获取该类型值的类型，简化类型书写(也就是有默认值)

注意：typeof 只能用来查询变量或属性的类型，无法查询其他类型（比如，函数调用的类行）

let p = {
    x: 1,
    y: 2
}

 function formatPoint(point: typeof p) {}
 formatPoint({ x: 10, y: 100 });

//相当于 function formatPoint(x: number, y: number) { } 

//也可以这么写 let num：typeof p.x

TS基础