TypeScript 开发必知:5 个要改掉的坏习惯

在 TypeScript 开发过程中,一些常见的坏习惯可能会影响代码的质量和可维护性。

以下是 5 个需要改掉的坏习惯,帮助你提升 TypeScript 技能,编写更高效和规范的代码。

1. 不使用严格模式

错误做法 :不启用 tsconfig.json 中的严格模式。

json 复制代码
// tsconfig.json
{
  "compilerOptions": {
    "strict": false
  }
}

正确做法 :启用严格模式。

json 复制代码
// tsconfig.json
{
  "compilerOptions": {
    "strict": true
  }
}

原因 :严格模式下的规则有助于未来代码的维护,虽然在开发过程中可能会遇到更多的编译错误,但修复这些问题的时间会在后续的维护中得到回报。严格模式可以捕获更多的潜在问题,提高代码的健壮性。

2. 使用 || 确定默认值

错误做法 :使用 || 处理可选值。

javascript 复制代码
function example(name: string | null | undefined) {
  console.log(name || 'Default Name');
}

正确做法 :使用 ?? 运算符或在参数级别定义默认值。

javascript 复制代码
function example(name: string | null | undefined) {
  console.log(name ?? 'Default Name');
}

原因?? 运算符只对 nullundefined 进行回退,更加精确。使用 || 时,如果 name 是一个 falsy 值(如空字符串、0 等),也会被替换为默认值,这可能导致意外行为。

3. 使用 any 作为类型

错误做法 :使用 any 类型处理不确定的数据结构。

arduino 复制代码
function example(data: any) {
  console.log(data);
}

正确做法 :使用 unknown 类型。

javascript 复制代码
function example(data: unknown) {
  console.log(data);
}

原因any 类型会禁用类型检查,导致潜在的错误难以捕获。unknown 类型在使用前需要进行类型检查或类型断言,确保类型安全。

4. 使用 val as SomeType

错误做法 :强制编译器推断类型。

csharp 复制代码
const data = 'hello' as string;

正确做法 :使用类型守卫。

ini 复制代码
const data = 'hello' satisfies string;

原因 :类型守卫确保所有检查都是明确的,减少潜在错误。使用 as 进行类型断言时,编译器不会进行类型检查,可能导致运行时错误。

5. 在测试中使用 as any

错误做法 :在测试中创建不完整的替代品。

typescript 复制代码
test('example test', () => {
  const mockFunction = jest.fn().mockImplementation((data: any) => {
    return data;
  });
});

正确做法 :将模拟逻辑移到可重用的位置。

typescript 复制代码
test('example test', () => {
  const mockFunction = jest.fn().mockImplementation((data: unknown) => {
    return data;
  });
});

原因 :避免在多个测试中重复更改属性,保持代码整洁。使用 any 会禁用类型检查,导致测试代码的可读性和可维护性下降。

通过改掉这些坏习惯,你可以编写出更高效、更规范的 TypeScript 代码,提升项目的质量和可维护性。

相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴7 小时前
Android Studio新手开发第二十六天
android·前端·android studio