TypeScript学习整理2

寻一壶醉生梦死丶

已于 2023-04-21 14:36:36 修改

阅读量135

点赞数 1

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： javascript 前端 typescript

于 2023-04-18 11:57:53 首次发布

本文链接：https://blog.csdn.net/qq_39715380/article/details/130214649

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了TypeScript中的枚举（Enum）概念，包括数字枚举和常量枚举的用法。接着讨论了泛型（Generics）在函数、接口和类中的应用，以及如何约束泛型。还提到了类型别名、联合类型、字面量和交叉类型的使用，这些都是TypeScript强类型系统的重要组成部分。最后，文章提及了内置类型和部分TypeScript工具函数，如Partial和Omit。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

七、枚举（Enum）

在任何项目中，我们都会遇到常量这种情况（常量：在代码执行过程中不会被改变的值，一般用const声明常量）。但是有些取值是一些范围内的一系列常量，这种值可以用枚举表示。

// 数字枚举
enum Direction {
  Up,
  Down,
  Left,
  Right
}
console.log(Direction.Up) // 0
console.log(Direction[0]) // Up

enum Direction {
  Up = 10,
  Down,
  Left,
  Right
}
console.log(Direction.Down) // 11

// 常量枚举
const enum Direction {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right'
}
console.log(Direction.Up) // 'Up'

八、泛型（generics）

在定义函数、接口、类的时候，故意先不指定具体的类型，而是在使用时再指定类型。类似一个占位符，在使用时动态填入类型值。

function echo<T>(arg: T): T{
  return arg
}
const str: string = '123'
const result = echo(str)

const result1 = echo(true)

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]]
}
const result2  = swap(['string', 123])

1. 约束泛型：使用extends关键字，让传入值满足特定的约束条件

function echoWithArr<T>(arg: T[]): T[] {
  console.log(arg.length)
  return arg
}
const arrs = echoWithArr([1, 2, 3])

// 使用interface定义一个对象，对象中包含length属性。
// 在使用泛型的时候通过extends继承interface定义的对象。
// 泛型中就必须有length属性及只能传入字符串或者数组，从而对泛型的类型进行了约束。
interface IWithLength {
  length: number
}

function echoWithArr<T: extends IWithLength >(arg: T): T {
  console.log(arg.length)
  return arg
}
const strs = echoWithArr('123')
const arrs = echoWithArr([1, 2, 3])
const arrs = echoWithArr({ length：10 })

2. 泛型在类和接口中的使用

class Queue<T> {
  private data = []
  push(item: T) {
    return this.data.push(item)
  }
  pop(): T {
    return this.data.shift()
  }
}
const queue = new Queue<number>()
queue.push(1)
console.log(queue.pop().toFixed())

interface KeyPair<T, U> {
  key: T
  value: U
}

let kp1: KeyPair<number, string> = {key: 2, value: '123'}
let kp1: KeyPair<string, number> = {key: '123', value: 1}
let arr: number[] = [1, 2, 3]
let arr1: Array<number> = [1, 2, 3]

九、类型别名，字面量和交叉类型

类型别名（type aliase）：不新建一个类型，而是创建一个新名字来引用此类型。

let arr1: Array<number> = [1, 2, 3]
let sum: (x: number, y: number) => number
const result = sum(1, 2)

type PlusType = (x: number, y: number) => number
let sum2: PlusType 
const result = sum2(2, 3)

1. 联合类型：

type StrOrNumber = string | number
let result3: StrOrNumber = '123'
resulr3 = 123

2. 字面量（原始类型）：引用类型只能是原始数据类型

const str: 'name' ='name'
const number: 1 = 1
type Derections = 'UP' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'left'

3. 交叉类型：使用 & 符号把几种类型合并起来

interface IName {
  name: string
}
type IPerson = IName & {age: number}
let person: IPerson = { name: '123', age: 13}

interface Admin {
  id: number,
  administrator: string,
  timestamp: string
}

interface User {
  id: number,
  groups: number[],
  createLog: (id: number) => void,
  timestamp: number
}

type T = Admin & User

十、内置类型（built-in objects）

// global objects
const a: Array<number> = [1, 2, 3]
const date = new Date()
date.getTime()
const reg = /abc/
reg.test('abc)

//build-in object
Math.pow(2, 2)

// DOM and BOM
let body = document.body
let allLis = document.quertySelectorAll('li')
allLis.keys()

document.addEventListener('click', ()=>{
  e.preventDefault()
})

interface IPerson {
  name: string
  age: number
}
let student: IPerson = {name: 'jiang', age: 20}
// Partial
type IPartial = Partial<IPerson>
let student2: IPartial = {name: 'jiang123'}
// Omit
type IOmit = Omit<IPerson, 'name'>
let student3: IOmit = {age: 20}