Write idiomatic TypeScript and JavaScript with efficiency patterns

TypeScript / JavaScript: Idiomatic Efficiency Reference

When to Use

• Use this skill when the task matches this description: Language-specific super-code guidelines for typescript.

Table of Contents

1. Array & Object Operations
2. Destructuring & Spread
3. Async / Promises
4. Functions & Closures
5. TypeScript Types
6. React (if applicable)
7. Anti-patterns specific to TS/JS

1. Array & Object Operations {#arrays}

// ❌ Imperative push loop
const result: string[] = []
for (const item of items) {
    if (item.active) result.push(item.name.toUpperCase())
}

// ✅
const result = items.filter(i => i.active).map(i => i.name.toUpperCase())

// ❌ Manual reduce for sum
let total = 0
for (const o of orders) total += o.amount

// ✅
const total = orders.reduce((sum, o) => sum + o.amount, 0)

// ❌ Manual object copy + override
const updated = Object.assign({}, user)
updated.name = "Alice"

// ✅
const updated = { ...user, name: "Alice" }

// ❌ Existence check before property access
const city = user.address ? user.address.city : undefined

// ✅
const city = user.address?.city

2. Destructuring & Spread {#destructuring}

// ❌ Separate variable assignments
const name = user.name
const age = user.age

// ✅
const { name, age } = user

// ❌ Index access for array elements
const first = arr[0]
const second = arr[1]

// ✅
const [first, second] = arr

// ❌ Merging arrays with concat
const merged = a.concat(b).concat(c)

// ✅
const merged = [...a, ...b, ...c]

// ❌ Omitting a key by delete (mutates)
const copy = { ...obj }
delete copy.password

// ✅ — destructure to omit
const { password, ...safe } = obj

3. Async / Promises {#async}

// ❌ Promise chain when async/await is cleaner
fetchUser(id)
    .then(user => fetchOrders(user.id))
    .then(orders => process(orders))
    .catch(handleError)

// ✅
try {
    const user = await fetchUser(id)
    const orders = await fetchOrders(user.id)
    process(orders)
} catch (e) {
    handleError(e)
}

// ❌ Sequential awaits for independent operations
const user = await fetchUser(id)
const config = await fetchConfig()

// ✅ — run in parallel
const [user, config] = await Promise.all([fetchUser(id), fetchConfig()])

// ❌ Wrapping already-async function in new Promise
const result = await new Promise((resolve) => {
    someAsyncFn().then(resolve)
})

// ✅
const result = await someAsyncFn()

Don't await inside a .map() without Promise.all - it sequences what should be parallel.

4. Functions & Closures {#functions}

// ❌ Arrow function with unnecessary block body
const double = (x: number) => { return x * 2 }

// ✅
const double = (x: number) => x * 2

// ❌ Default parameter with if-guard
function greet(name?: string) {
    if (!name) name = "World"
    return `Hello, ${name}`
}

// ✅
function greet(name = "World") {
    return `Hello, ${name}`
}

// ❌ IIFE for no reason in module scope
;(function() {
    const x = compute()
    doSomething(x)
})()

// ✅ — just top-level statements in a module
const x = compute()
doSomething(x)

5. TypeScript Types {#types}

// ❌ Explicit return type when inference is obvious
function add(a: number, b: number): number {
    return a + b
}

// ✅ — let TS infer simple return types
function add(a: number, b: number) {
    return a + b
}

// ❌ any
function process(data: any) { ... }

// ✅ — use unknown + type guard, or a proper type/generic
function process<T extends Record<string, unknown>>(data: T) { ... }

// ❌ Redundant interface for single-use inline shape
interface UserNameProps { name: string }
function UserName({ name }: UserNameProps) { ... }

// ✅ — inline for single-use
function UserName({ name }: { name: string }) { ... }
// Extract interface when reused in 2+ places

// ❌ Type assertion (as) to silence a real type error
const el = document.getElementById("app") as HTMLDivElement
el.innerText = "hi" // crashes if el is null

// ✅
const el = document.getElementById("app")
if (!(el instanceof HTMLDivElement)) throw new Error("Missing #app")
el.innerText = "hi"

Prefer type for unions/intersections/aliases; interface for extensible object shapes.

6. React (if applicable) {#react}

// ❌ Effect for derived state
const [doubled, setDoubled] = useState(0)
useEffect(() => { setDoubled(count * 2) }, [count])

// ✅ — compute during render
const doubled = count * 2

// ❌ useCallback everywhere by default
const handler = useCallback(() => doSomething(id), [id])

// ✅ — only when passed to memoized child or used as effect dep
// Otherwise: const handler = () => doSomething(id)

// ❌ Passing object literal as prop (new reference each render)
<Component config={{ debug: true }} />

// ✅
const config = useMemo(() => ({ debug: true }), [])
<Component config={config} />
// Or if truly static: define outside component
const CONFIG = { debug: true }

// ❌ Index as key in list that can reorder/filter
items.map((item, i) => <Row key={i} {...item} />)

// ✅
items.map(item => <Row key={item.id} {...item} />)

7. Anti-patterns specific to TS/JS {#antipatterns}

Limitations

• These are language-specific guidelines and do not cover overall architectural decisions.
• Over-compression might reduce readability; apply judgement.