JavaScript with superpowers — types, autocomplete, fewer bugs.
Try in Applaa Builder — FreeIn TypeScript you add types after a colon: let name: string = 'Alex'. The editor and compiler will warn you if you use the wrong type. Here we write valid JS that would be valid TS too (types in comments).
You can type function parameters and return value: function add(a: number, b: number): number { return a + b; }. That way you can't accidentally pass a string. Here we write the same in plain JS.
Interfaces define the shape of an object: which properties exist and their types. Use them for function parameters and return types. Here we write JS that matches an interface idea.
A union type is A | B: the value can be A or B. You then narrow (check) which one it is with typeof or checks, so TypeScript knows the type in each branch.
📚 What are Array and Tuple Types in TypeScript? TypeScript lets you be precise about what's inside an array. A typed array (number[]) guarantees every element is a number. A tuple [string, number] is like an array but with a FIXED length and FIXED types at each position -- perfect for pairs or tri…
📚 What are Type Assertions in TypeScript? A type assertion says to the TypeScript compiler: 'Trust me, I know what type this is.' You use the 'as' keyword: value as Type. This is NOT a runtime conversion -- TypeScript just stops complaining about that value. Use sparingly and only when you're cert…
📚 What are Literal Types in TypeScript? A literal type is a type that is an exact specific value, not just any string or number. Instead of type string (any string), you can write 'red' | 'blue' | 'green' (only those three exact strings). TypeScript will then catch any typos or invalid values at c…
📚 What are Optional and Readonly Properties in TypeScript? Optional properties (name?: string) can be present or absent in an object. If the value is not provided, it will be undefined. Readonly properties (readonly id: number) can be set when the object is created but cannot be changed afterwards…
📚 What are Type Aliases in TypeScript? A type alias gives a NAME to any type so you can reuse it. Instead of writing { name: string; age: number } everywhere, you write type User = { name: string; age: number } once and use User wherever you need it. Aliases work for objects, unions, functions, tu…
📚 What are Generics in TypeScript? Generics are 'type parameters' -- they let you write code that works with ANY type while still being type-safe. Instead of writing a separate function for numbers and a separate one for strings, you write one generic function and TypeScript figures out (or you te…
📚 What are Enums in TypeScript? An enum (enumeration) gives friendly names to a fixed set of values. Instead of checking if status === 'done' (where 'done' is a magic string that could be misspelled anywhere), you use Status.Done and TypeScript catches any typos. Enums make intent clear and preven…
📚 null and undefined in TypeScript TypeScript distinguishes between null (explicitly no value) and undefined (value was never set). With strict mode enabled, TypeScript warns you whenever you try to use a value that might be null or undefined without checking first. Two modern operators help handl…
📚 What are Return Types and void in TypeScript? TypeScript lets you declare exactly what a function returns. This is useful for documentation and catching mistakes: if you say a function returns number but accidentally return a string, TypeScript catches it. void is the return type for functions t…
📚 What are Index Signatures in TypeScript? When you need an object that can have any number of string keys all mapping to the same value type -- like a dictionary -- you use an index signature: { [key: string]: number }. This says: 'this object can have any string as a key, and every value will be…
📚 What are Utility Types in TypeScript? TypeScript comes with built-in helper types called utility types that transform existing types. Instead of rewriting types from scratch for every variation, you can use Partial<T> (makes all optional), Pick<T, K> (keeps only specific keys), Omit<T, K> (remov…
📚 What is Type Narrowing in TypeScript? Type narrowing is when TypeScript gets more specific about a type inside a conditional block. If a variable is string | number and you write if (typeof x === 'string') { ... }, TypeScript KNOWS inside that block x is a string -- so it unlocks string methods.…
📚 What is the never Type in TypeScript? The never type represents a value that can NEVER exist -- code that is unreachable. A function that always throws an error never returns a value, so its return type is never. The most powerful use of never is in exhaustive type checking: if you handle every …
TypeScript strict mode (strict: true) enables stricter checks: no implicit any, strict null checks, etc. It catches more bugs. Enable it for new projects.
React components can be typed: React.FC<Props> or function Comp(props: Props). Children: React.ReactNode. Events: React.ChangeEvent<HTMLInputElement>. State: useState<Type>(init).
tsconfig.json configures the compiler: target (ES version), module, strict, include/exclude. Set strict: true and noImplicitAny: true to catch more bugs.
You've seen: variable types, function types, interfaces, unions, narrowing, arrays/tuples, literals, optional/readonly, type aliases, generics, enums, null/undefined, utility types, never, strict mode, React types. TypeScript helps catch bugs and document code.