TypeScript在项目中高级应用

除了简单的用冒号去定义一个变量类型, 还有很多神奇操作. 但ts官网教程太庞大了, 我一般都是天马行空地想到需要什么类型,就去问chatGpt, 然后在官网去看看对应的api

总结一下常用的高级用法

枚举

普通枚举和常量枚举的区别

ts中普通枚举和常量枚举有什么区别

js 复制代码

// 普通枚举
enum Color { Red, Green, Blue }

打印上面的Color,如下

js 复制代码

{
	"0": "Red",
	"1": "Green",
	"2": "Blue",
	"Red": 0,
	"Green": 1,
	"Blue": 2
}

常量枚举:就是普通枚举前面加const,但编辑后枚举不见了,如果不使用枚举值就不会生成任何相关代码

总结:

普通枚举 enum A {...} 和常量枚举 const enum A {...} 之间的区别主要在于 TS 的编译结果上有所差别
普通枚举 enum A {...}, 会将其编译为一个 JS 对象, 对象内就是枚举成员和值的一个相互映射
常量枚举 const enum A {...}, 编译后不会生成任何代码, 会删除 TS 部分内容, 对于使用到的成员只会进行值的替换
普通枚举适用于需要动态修改枚举值的情况，‌或者在开发过程中需要根据业务逻辑动态调整枚举值时使用
常量枚举适用于需要确保枚举值在编译后保持不变的情况，‌比如在编写库或框架时，‌为了确保API的稳定性，‌需要固定枚举值，‌避免在后续开发中意外更改这些值(vite中的env变量就可以看成是常量枚举,因为他编译后就不会变化)

juejin.cn/post/730547...

JavaScript中的四种枚举方式

www.cnblogs.com/chuckQu/p/1...

保护枚举的值不被改变

Object.freeze和Object.seal

freeze 冻结一个对象,注意是浅冻结 seal 封闭一个对象

相同点: 都对变量进行了以下操作

设置Object.preventExtension()，禁止添加新属性(绝对存在)
设置configurable为false，禁止配置(绝对存在)
禁止更改访问器属性(getter和setter)

不同点: freeze多了一步操作:

设置writable为false，禁止修改(绝对存在)

换句话说,不同的地方如下:

用Object.freeze()冻结的对象中的现有属性是不可变的。
用Object.seal()密封的对象可以改变其现有属性。

js 复制代码

const obj = {name:'lisa'}
Object.freeze(obj)
console.log(Object.getOwnPropertyDescriptor(obj,'name'))
{
  configurable: false,
  writable: false
  enumerable: true,
  value: "lisa",
}

Object.seal(obj)
{
  configurable: false,
  writable: true
  enumerable: true,
  value: "lisa",
}

config false- write true ->false 遍历修改

Object.preventExtension()

只是禁止添加新的属性

configurable描述符

Object.freeze()和Object.seal(), Object.preventExtensions()

www.cnblogs.com/lxlx1798/ar...

developer.mozilla.org/zh-CN/docs/...

developer.mozilla.org/zhCN/docs/W...
JavaScript 中对象处理之Object.freeze 与 Object.seal

developer.mozilla.org/zh-CN/docs/...

对象的所有key值作为新的类型

To get a type that is a union keys of a variable you need to use keyof typeof variableName.

js 复制代码

const MY_OBJECT = {
    'key': 'key val',
    'anotherKey': 'anotherKey val',
};
type MY_OBJECT_KEYS = keyof typeof MY_OBJECT // "key" | "anotherKey"

stackoverflow.com/questions/5...

try..catch..error类型的处理

一般捕获的error在ts中为any类型,可以用instanceof判断处理

js 复制代码

class DivisionByZeroError extends Error {}
try {
    // 假设这里有可能会抛出DivisionByZeroError的代码
    const result = 10 / 0;
} catch (error) {
    if (error instanceof DivisionByZeroError) {
        console.error("Cannot divide by zero!");
    } else {
        // 处理其他类型的错误
    }
}

也可以直接以error类型处理

js 复制代码

try {
  
} catch (error as any as Error) {
    
}

变量类型设置为interfacte类型中的某个属性的类型

新类型为 ( 其他类型['字段值']

js 复制代码

interface Person {
  name: '小米' | '小明'
  age: number
}

interface Student {
  mingzi: Person['name'] 
  // 这个mingzi类型为Person中name的类型
}

stackoverflow.com/questions/7...

枚举作为对象的key类型

js 复制代码

export enum colorsEnum{
    red, blue, green
}

export type colorsInterface = {
    [key in colorsEnum]: boolean;
};

let example: colorsInterface = {
    [colorsEnum.red]: true,
    [colorsEnum.blue]: false,
    [colorsEnum.green]: true
};

如果不想使用所有的key,可以加?

js 复制代码

export type colorsInterface = {
    [key in colorsEnum]?: boolean;
};

let example: colorsInterface = {
    [colorsEnum.red]: true,
    [colorsEnum.blue]: false
};

stackoverflow.com/questions/3...

类型注解{ [key: string]: any }

www.cnblogs.com/ygyy/p/1819...

stackoverflow.com/questions/4... stackoverflow.com/questions/4...
stackoverflow.com/questions/5...
www.typescriptlang.org/docs/handbo...

ts.xcatliu.com/basics/unio...

www.typescriptlang.org/docs/handbo...

stackoverflow.com/questions/6...
stackoverflow.com/questions/7...

stackoverflow.com/questions/7...