write-modern-javascript

编写现代 JavaScript

概述

TypeScript 会编译为 JavaScript，生成代码的质量取决于目标配置和编码风格。编写现代 JavaScript（ES2020+），让 TypeScript 通过降级处理兼容性。与手动实现回退方案相比，现代特性通常能生成更简洁、更高效的代码。

当标准现代特性可用时，避免使用会编译为冗长 JavaScript 的 TypeScript 特性。

何时使用此技能

• 编写会编译为 JavaScript 的 TypeScript
• 配置 tsconfig.json 的 target
• 选择要使用的语言特性
• 通过编译支持旧版浏览器
• 优化打包体积

铁律

编写现代 JavaScript（ES2020+），让 TypeScript 为较旧的环境进行降级处理。优先使用标准特性，而不是会编译为冗长代码的 TypeScript 专属特性。

检测

留意过时模式：

// RED FLAGS - Outdated patterns
var x = 1;                    // Use const/let
function Person() { }         // Use class
Promise.resolve().then(...);  // Use async/await
Object.assign({}, obj);       // Use spread: { ...obj }

优先使用的现代特性

// Use const/let instead of var
const PI = 3.14159;
let count = 0;

// Use arrow functions for callbacks
const doubled = numbers.map(n => n * 2);

// Use destructuring
const { name, age } = person;
const [first, ...rest] = items;

// Use spread instead of Object.assign
const merged = { ...defaults, ...options };
const combined = [...arr1, ...arr2];

// Use async/await instead of Promise chains
async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

// Use optional chaining
const street = user?.address?.street;

// Use nullish coalescing
const value = input ?? 'default';

适当配置目标

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",      // Modern target for modern output
    "lib": ["ES2020", "DOM"], // Include modern APIs
    "module": "ESNext",      // Use ES modules
    "moduleResolution": "node"
  }
}

让 TypeScript 处理兼容性

// Write modern code:
class Person {
  name: string;
  #age: number;  // Private field
  
  constructor(name: string, age: number) {
    this.name = name;
    this.#age = age;
  }
  
  async celebrate() {
    return `${this.name} is ${this.#age}!`;
  }
}

// TypeScript compiles for target: ES2015
// or passes through for target: ES2022

避免冗长的 TypeScript 模式

// AVOID: TypeScript parameter properties
class Point {
  constructor(public x: number, public y: number) {}
}
// Compiles to verbose code with assignments

// PREFER: Standard class fields (ES2022+)
class Point {
  x: number;
  y: number;
  
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
// Cleaner output, standard JavaScript

抗压协议

编写 TypeScript 时：

1. 使用最新目标：将 target 设为 ES2020 或更高版本
2. 编写现代 JS：使用当前的 JavaScript 特性
3. 让 TS 处理兼容性：相信编译器
4. 检查输出：偶尔查看编译后的代码
5. 避免 TS 专属特性：除非确有必要

危险信号

反模式	问题	解决方案
var 声明	过时，存在作用域问题	使用 const/let
手动编写 Promise 链	更难阅读	使用 async/await
Object.assign	冗长	使用展开运算符
Array.prototype 方法	冗长	使用现代数组方法

常见的自我辩解

“我需要支持旧版浏览器”

实际情况：适当配置目标，让 TypeScript 进行降级处理。不要手动编写过时代码。

“我习惯了旧的写法”

实际情况：现代 JavaScript 更简洁，也更易于维护。花些时间学习当前的模式。

“它编译后的结果都一样”

实际情况：通常并非如此。现代特性可以生成更高效的代码。

快速参考

不要使用	改用	优点
var	const/let	块级作用域，避免提升问题
function 回调	箭头函数	词法 this，代码更简洁
.then() 链	async/await	易于阅读，更便于处理错误
Object.assign()	展开 {...obj}	更简洁，符合标准
arr.indexOf() !== -1	arr.includes()	意图更明确
手动循环	map、filter、reduce	声明式、函数式

总结

编写现代 JavaScript，让 TypeScript 处理兼容性。现代特性可以生成更简洁的代码，而 TypeScript 的降级处理能确保代码在需要的环境中运行。

参考资料

• Dan Vanderkam 著《Effective TypeScript》第 2 版
• 条目 79：编写现代 JavaScript