Write Modern JavaScript

Overview

TypeScript compiles to JavaScript, and the quality of that output depends on your target configuration and coding style. Write modern JavaScript (ES2020+) and let TypeScript handle compatibility through downleveling. Modern features often produce cleaner, more efficient code than manually implementing fallbacks.

Avoid TypeScript features that compile to verbose JavaScript when standard modern features exist.

When to Use This Skill

• Writing TypeScript that compiles to JavaScript
• Configuring tsconfig.json target
• Choosing which language features to use
• Supporting older browsers through compilation
• Optimizing bundle size

The Iron Rule

Write modern JavaScript (ES2020+) and let TypeScript downlevel for older environments. Prefer standard features over TypeScript-specific ones that compile to verbose code.

Detection

Watch for outdated patterns:

// 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 }

Modern Features to Prefer

// 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';

Configure Target Appropriately

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

Let TypeScript Handle Compatibility

// 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

Avoid Verbose TypeScript Patterns

// 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

Pressure Resistance Protocol

When writing TypeScript:

1. Use latest target: Set target to ES2020 or later
2. Write modern JS: Use current JavaScript features
3. Let TS handle compatibility: Trust the compiler
4. Review output: Check compiled code occasionally
5. Avoid TS-only features: Unless necessary

Red Flags

| Anti-Pattern | Problem | Solution | |--------------|---------|----------| | var declarations | Outdated, scoping issues | Use const/let | | Manual Promise chains | Harder to read | Use async/await | | Object.assign | Verbose | Use spread operator | | Array.prototype methods | Verbose | Use modern array methods |

Common Rationalizations

"I need to support old browsers"

Reality: Configure target appropriately and let TypeScript downlevel. Don't write outdated code manually.

"I'm used to the old way"

Reality: Modern JavaScript is cleaner and more maintainable. Take time to learn current patterns.

"It compiles to the same thing"

Reality: Often it doesn't. Modern features can produce more efficient code.

Quick Reference

| Instead Of | Use | Benefit | |------------|-----|---------| | var | const/let | Block scope, no hoisting issues | | function callbacks | Arrow functions | Lexical this, cleaner | | .then() chains | async/await | Readable, easier error handling | | Object.assign() | Spread {...obj} | Cleaner, standard | | arr.indexOf() !== -1 | arr.includes() | Clearer intent | | Manual loops | map, filter, reduce | Declarative, functional |

The Bottom Line

Write modern JavaScript and let TypeScript handle compatibility. Modern features produce cleaner code and TypeScript's downleveling ensures it works where needed.

Reference

• Effective TypeScript, 2nd Edition by Dan Vanderkam
• Item 79: Write Modern JavaScript