前端入门：快速了解TypeScript常用类型|青训营笔记

翰林学士
60 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第21天

  1. JS已有类型
  • 原始类型：number/string/boolean/null/undefined/symbol
  • 对象类型：object（数组，对象，函数）
  1. TS新增类型
  • 联合类型、自定义、接口、元组、字面量、枚举、void、any

原始类型

let age: number = 18
let myName: string = '刘老师'
let isLoading: boolean = false
let a: null = null
let b: undefined = undefined
let s: symbol = Symbol()

数组类型

两种方式：

let numbers: number[] = [1,2,3]
let numbers: Array<number> = [1,2,3]
let numbers: srting[] = ['a','b','c']
let numbers: Array<string> = ['a','b','c']
//既有number类型，也有string类型
let numbers: arr:(number|string)[] = [1,'a',3,'b']

类型别名

使用场景：当同一类型（复杂）被多次使用时，跨域通过类型别名，简化该类型的使用。

type CustomArray = (number|string)[]
let arr1: CustomArray = ['x','y',5,6]

函数类型

给函数的参数和返回值的类型指定

//函数声明
function add(num1: number, num2: number): number {
    return num1 + num2
}
//函数表达式
const add = (num1: number, num2: number): number => {
    return num1 + num2
}
​
//同时指定参数、返回值的类型
const add: (num1: number, num2: number) => =(num1, num2) => {return: num1 + num2}

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

可选参数

使用函数时，在某些情况下，参数可传也可以不传

在可传可不传的参数名称后面添加 ？

注意：可选参数指南出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

function mySlice(start?: number, end?: number): void {
    console.log('起始索引：', start, '结束索引：', end)
}

对象类型

如果方法有参数 比如：greet(name:string):void

两种方式：当每一行只有一个属性类型，因此，属性类型后没有；（分号）

let person: { name: string; age: number; sayHi(): void } = {
    name: 'jack',
    age: 19,
    sayHi() {}
}
​
let person: { 
    name: string
    age: number
    sayHi: () => void 
} = {
    name: 'jack',
    age: 19,
    sayHi() {}
}

可选属性

可选属性的语法和可选参数的语法一致

function myAxios(config: { url: string; method?: string}) {}

接口

因为每一行只有一个属性类型，因此，属性类型后没有；（分号）

interface IPerson {
    name: string
    age: number
    sayHi(): void
}
let person: IPerson = {
    name: 'jack',
    age: 19,
    sayHi() {}
}

接口和类型别名

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

不同点：接口只能为对象指定类型；类型别名可以为任意类型指定别名

接口继承

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

元组

元组类型时另一种类型的数组，它确切知道包含多少个元素，以及每个元素的类型

let position: [number, number] = [39.54,116.23]

类型推论

场景：声明变量并初始化时、决定函数返回值时

类型注解可以省略不写

能省略类型注解的地方就省略

如果不知道类型，可以通过鼠标放在变量名称上

类型断言

getElementById方法返回值的类型时HTML，该类型只包含所有标签公告的属性或方法，不包含a标签特有的href等属性。

更加具体的类型

const aLink = document.getElementById('link') as HTMLANchorElement
const aLink = <HTMLANchorElement>document.getElementById('link')

字面量类型

const str = 'hello'
  • str是一个常量，它的类型为：’hello‘，也就是一个字面量类型
  • 某个特定的字符串也可以作为TS中的类型
  • 除了字符串外，任意的JS字面量（对象、数字）都可以作为类型使用
  • 字面量类型配合联合类型一起使用，用来表示一组明确的可选值的列表
//表示可选值只能是上、下、左、右
function changeDirection(direction: 'up'|'down'|'left'|'right') {
    console.log(direction)
}

枚举类型

表示一组明确的可选值

约定枚举名称、枚举中的值以大写字母开头

enum Direction { Up, Down, Left, Right }
function changeDirection(direction: Direction) {
    console.log(direction)
}
changeDirection(Direction.Up)

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

数字枚举：枚举成员的值为数字的枚举

也可以给枚举中的成员初始值

//Down = 11 Left = 12 Right = 13
enum Direction { Up = 10, Down, Left, Right }
​
enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

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

enum Direction {
    Up = 'UP'
    Down = 'DOWN'
    Left = 'LEFT'
    Right = 'RIGHT'
}

any类型

不推荐使用

临时使用any来避免书写很长，很复杂的类型

隐式具有any类型的情况：声明变量不提供类型也不提供默认值|函数参数不加类型

let obj: any = { x: 0}

typeof

JS中获取数据的类型

console.log(typeof "Hello world")

TS提供了typeof操作符，可以在类型上下文中引用变量或属性的类型

typeof类型只能用来查询变量或属性的类型，无法查询其他形式的类型（如函数调用的类型）

let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number}) {}
//等同于 function formatPoint(point: typeof p) {}
formatPoint(p)
let num: typeof p.x
avatar
文章
阅读
粉丝