近期总结的一些TypeScript小tip

const vs readonly

const 用于修饰变量,readonly 用于变量的属性

ts 复制代码
const x: boolean;

const x: {
    readonly a: boolean;
} = {
    a: true;
};

对于数组,const 只能保证地址不改动,ReadonlyArray<Number>则可以直接禁用 push/pop

never vs unknown vs null vs undefined

  1. never 代表永远不会发生的类型,一般是被自动分配的,当然也可以自己给变量做类型注释
ts 复制代码
function f1() {
  while (true) {}
}

function f2() {
  throw new Error('error');
}

f1f2都是永远返回不了的,称它们的返回值类型为是 never

  1. unknown 不知道是啥类型,但是肯定不是已知的类型,这是它和 any 最大的不同
ts 复制代码
let vAny: any = 10; // ok
let vUnknown: unknown = 10; // ok

let s1: string = vAny; // ok
let s2: string = vUnknown; // Invalid; we can't assign vUnknown to any other type (without an explicit assertion)
  1. undefined 是未定义,null 是空

enum vs const enum

常量枚举经过编译器编译就是一个数字(0),单纯的 enum 会保留对象(Color.Red),所以常量枚举性能更好

btw,默认 enum 转 number 是 0,1,2...

但是如果指定其中的一个值,后面的会跟着列出来

ts 复制代码
enum Colors {
  Red,
  Blue = 5,
  Yellow,
}
console.log(Colors.Red); // 0
console.log(Colors.Blue); // 5
console.log(Colors.Yellow); // 6

enum 支持反向映射

ts 复制代码
console.log(Colors.Red); // 0
console.log(Colors[0]); // Red

type vs interface

  1. type 可作为基本类型的别名
  2. type 可声明 union type Pet = Dog | Cat
  3. type 可声明元组类型(tuple) type PetList = [Dog, Pet]
  4. interface 能够声明合并
ts 复制代码
interface A {
  a: string;
}

interface A {
  b: number;
}

// A 为 {
//   a: string;
//   b: number;
// }
相关推荐
烛阴5 分钟前
Lua中的三个点(...):解锁函数参数的无限可能
前端·lua
拉不动的猪10 分钟前
webpack分包优化简单分析
前端·vue.js·webpack
德莱厄斯16 分钟前
没开玩笑,全框架支持的 dialog 组件,支持响应式
前端·javascript·github
非凡ghost44 分钟前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost1 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller1 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户904706683571 小时前
commonjs的本质
前端
Zyx20071 小时前
用 JavaScript 打造 AI 大脑:前端开发者的新时代——基于 Brain.js 的浏览器端 NLP 实战
javascript·机器学习
Sailing1 小时前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶1 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js