Advanced TypeScript Performance Optimization and Key Type Tricks

Preface

Hello, I am Yi Master. After a period of inactivity due to gaming, I decided to share a concise summary of my years of experience with TypeScript, aiming to help readers advance their TS skills and write better code.

1. TypeScript Performance Optimization

Why optimize?

Many developers are familiar with Deno and its 2020 announcement about the five reasons to drop TypeScript, the most important being compilation speed. Similar concerns appear in frontend frameworks like Svelte, where compilation efficiency is also a focus.

How to optimize?

1. Prefer interface over type

interface Foo { prop: string }</code>
<code>type Bar = { prop: string };

While both are similar, interface can be extended easily, whereas type requires intersection types, leading to subtle differences in conflict detection and compilation.

Difference 1: interface defines a flat object type that can detect property conflicts.

Difference 2: Intersection types can produce never in some cases.

2. Use explicit type annotations

Adding type annotations, especially return types, reduces the compiler's workload by avoiding extensive type inference in large projects.

3. Prefer primitive types over union types

// Example with a union type that forces the compiler to check each member</code>
<code>function printSchedule(mode: "a" | "b" | "c") { /* ... */ }

Replacing unions with specific primitive types improves compilation speed.

4. Extract complex types into simple ones

Breaking down intricate types into reusable aliases reduces repeated conditional type evaluations, easing the compiler's burden.

type Foo = { a: string; b: number; };
type Bar = Foo['a']; // string

5. Control project size

Keep individual projects small.

Split large systems into multiple projects (micro‑service style).

Minimize module count to reduce overall load.

2. Advanced Keywords and Practices

1. keyof Secrets

keyof

returns a union of an object's keys.

interface Obj { a: string; b: number; }
type Keys = keyof Obj; // "a" | "b"

When applied to any, it yields string | number | symbol. With keyofStringsOnly: true in tsconfig, it reduces to string.

2. Bracket [] Operator

Used for indexed access types, e.g., Person['age'] yields number.

type Person = { age: number; name: string; };
type Age = Person['age']; // number

3. is Operator

Provides type guards for functions returning boolean.

const isString = (val: unknown): val is string => typeof val === 'string';

4. as Operator

Used for type assertions and advanced key remapping.

type A = { foo: number; bar: number; };
type B = { [P in keyof A as `${P}ID`]: number; }; // { fooID: number; barID: number; }

5. Other Keyword Summaries

5.1 in

In JavaScript, in checks property existence; in TypeScript, it iterates over union members.

type U = 'a'|'b'|'c';
type Foo = { [Prop in U]: number; }; // { a: number; b: number; c: number; }

5.2 extends

Conditional types use extends to branch.

type T = 1 extends number ? true : false; // true

5.3 infer

Infers a type within conditional types.

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

5.4 Template Literal Types

type World = "world";
type Greeting = `hello ${World}`; // "hello world"

6. any vs unknown vs never

any

bypasses type checking, unknown is safe but requires narrowing, and never represents the bottom type used in exhaustive checks.

type TestAnyUnknown = unknown extends any ? true : false; // true
type TestNever = never extends string ? true : false; // true

7. Record<string, any> Instead of Index Signatures

Using Record provides clearer intent and better type safety.

type Person = Record<'name' | 'age', unknown>;
const Human: Person = { name: "Steve", age: 42 };

All the above techniques have been summarized; feel free to contribute additional tips.

Practical Exercise

Implement a generic ArrayToObject type that transforms an array of "key=value" strings into an object type.

const ParamsArray = ["a=1", "b=2", "c=3"];
// Expected result:
// type ObjectValue = { a: "1"; b: "2"; c: "3"; }

type ArrayToObject<T extends readonly string[] = []> = /* implementation */;
type ObjectValue = ArrayToObject<typeof ParamsArray>;