TypeScript is now standard in most React, Angular and Node.js teams. These TypeScript interview questions cover types, interfaces and type inference for freshers, then generics, union and intersection types, narrowing, utility types, conditional types and configuration for experienced developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
TypeScript is JavaScript with static types, developed by Microsoft.
It compiles to plain JavaScript.
Types catch many bugs while you type rather than at runtime, give better editor autocomplete and refactoring, and act as documentation for large codebases and teams.
Types are removed at compile time, so they add no runtime cost.
Both describe the shape of objects.
Interfaces can be extended with extends and are merged when declared twice, which suits public APIs and libraries.
Type aliases can describe any type, including unions, tuples, primitives and mapped types.
For object shapes either works; many teams use interface for objects and type for unions and more complex types.
any turns off type checking, so anything goes and errors slip through. unknown is the safe version: you can assign anything to it, but must narrow it with a check before using it. never represents a value that can never occur, such as the return type of a function that always throws, and is used for exhaustive checks in switch statements.
string, number, boolean, bigint, symbol, null and undefined, plus arrays (string[] or Array<string>), tuples with a fixed length and types such as [string, number], object types, any, unknown, never and void for functions that return nothing. Types are written after a colon, such as let price: number = 100.
TypeScript works out types automatically when you do not write them. let count = 5 is inferred as number, and a function's return type is inferred from its return statements. Good practice is to let inference handle local variables and add explicit types to function parameters, public APIs and exported functions, where they act as documentation.
A question mark makes a property optional, such as phone?: string, which means it may be missing, so its type becomes string | undefined. readonly prevents a property from being reassigned after the object is created, such as readonly id: number. ReadonlyArray and Readonly<T> make whole arrays or objects read-only at the type level.
An enum creates a named set of constants and also generates JavaScript code at runtime.
A union of string literals, such as type Status = "active" | "paused" | "closed", gives the same safety with no runtime code and works naturally with JSON.
Many teams prefer literal unions, or a const object with as const, and use enums only when they want a runtime object.
Annotate parameters and, where helpful, the return type: function add(a: number, b: number): number.
Optional parameters use ?, default values provide both a type and a value, and rest parameters are typed as arrays.
A function type can be written as type Handler = (event: MouseEvent) => void and used for callbacks.
A type assertion, written value as Type, tells the compiler to treat a value as a specific type, for example document.getElementById("app") as HTMLDivElement.
The non-null assertion value! tells it that a value is not null or undefined.
Neither checks anything at runtime, so a wrong assertion causes runtime errors; narrowing with a real check is safer.
A literal type is an exact value used as a type, such as "left", 42 or true.
Combined in unions, they restrict a value to a fixed set, such as type Align = "left" | "center" | "right", so a typo is caught at compile time.
Declaring an object with as const makes its properties readonly literal types.
The TypeScript compiler (tsc) checks types and outputs plain JavaScript; build tools such as Vite, esbuild and SWC often strip types without checking, so tsc --noEmit runs separately for type checking. A .d.ts declaration file contains only type information, describing the shape of JavaScript code so TypeScript users get types and autocomplete for it.
Applied problems, trade-offs and questions about your own projects.
A union type A | B means a value can be either A or B, for example string | number, and you must narrow it before using type-specific features.
An intersection type A & B means a value has all properties of both types, often used to combine object types.
Discriminated unions, where each member has a common literal field such as kind, are a powerful way to model states.
Narrowing is how TypeScript refines a broad type to a more specific one inside a code block, based on checks: typeof for primitives, instanceof for classes, the in operator for properties, equality checks, truthiness, and checking a discriminant field in a discriminated union. Custom type guards with the "value is Type" return type let you write your own checks.
Generics let you write reusable code that works with many types while keeping type safety.
For example, function first<T>(items: T[]): T | undefined returns the same type as the array elements, so first([1, 2]) is number.
Generics can be constrained, such as <T extends { id: string }>, and are used widely in React hooks like useState<User | null>.
Partial<T> makes all properties optional, Required<T> makes them required, Readonly<T> makes them read-only, Pick<T, K> keeps some properties, Omit<T, K> removes some, Record<K, V> builds an object type from keys and a value type, ReturnType<F> gets a function's return type, and Awaited<T> unwraps a promise.
keyof T produces a union of the property names of a type, so keyof { id: number; name: string } is "id" | "name". typeof in a type position gets the type of an existing value, such as type Config = typeof defaultConfig. Combined, keyof typeof obj gives the keys of an object value, which is useful for lookup tables.
An indexed access type looks up the type of a property, like T["key"].
For example, User["address"] gives the type of the address property, and Product["tags"][number] gives the type of an element in the tags array.
They keep related types in sync, because they update automatically when the original type changes.
TypeScript adds types and access modifiers to JavaScript classes: public (the default), private and protected, which are checked at compile time, and readonly properties.
Parameter properties such as constructor(private api: ApiClient) declare and assign a field in one step.
Abstract classes define methods that subclasses must implement, and classes can implement interfaces.
JavaScript's own #private fields are enforced at runtime.
Libraries written in JavaScript do not include types, so the community publishes them separately in the DefinitelyTyped project as @types packages, such as @types/node.
Many modern libraries ship their own .d.ts files.
For a library with no types, you can write a minimal declaration, such as declare module "old-lib";, to tell TypeScript it exists.
satisfies checks that a value matches a type without changing the value's inferred type.
For example, const routes = { home: "/", about: "/about" } satisfies Record<string, string> verifies the shape but keeps the exact keys, so routes.home is known and routes.missing is an error.
Annotating with : Record<string, string> instead would lose the specific keys.
Define a props type and use it on the function parameter: function Button({ label, onClick }: { label: string; onClick: () => void }).
Children are typed as React.ReactNode, event handlers as React.ChangeEvent<HTMLInputElement> and similar, and useState infers its type or takes a generic, such as useState<User | null>(null).
Extending React.ComponentProps<"button"> passes through native button props.
Overloads let one function have several call signatures, so the return type can depend on the argument types.
You write the overload signatures first and then one implementation signature that handles all cases.
For example, a parse function can return a number for a numeric string flag and a Date for a date flag.
Often a union type or generic is simpler.
System design, deep internals, leadership and tough follow-ups.
A conditional type chooses a type based on a condition, such as T extends string ? "text" : "other", and with infer can extract types, for example the element type of an array.
A mapped type creates a new type by transforming each property of another, such as { [K in keyof T]?: T[K] }, which is how Partial is built.
Together they power most advanced utility types.
strict should be on, which enables strictNullChecks, noImplicitAny and related checks. target and module set the output JavaScript version and module system, moduleResolution controls how imports are found, and paths sets import aliases. noUncheckedIndexedAccess catches undefined array and object lookups. skipLibCheck speeds up builds, and isolatedModules is needed with tools like Babel, SWC or esbuild.
I add TypeScript with allowJs so JavaScript and TypeScript files coexist, then convert files gradually, starting with shared utilities and types for API data.
I start with loose settings and tighten towards strict over time, add types for libraries from @types packages, and use checkJs with JSDoc for files not yet converted.
CI runs tsc --noEmit so type errors block merges.
Template literal types build string types from other types using template syntax, such as type EventName = `on${Capitalize<"click" | "focus">}`, which gives "onClick" | "onFocus". Combined with mapped types they can generate getter names, CSS property names or route patterns, and catch typos in string-based APIs at compile time.
infer declares a type variable inside a conditional type so TypeScript can extract part of a type.
For example, type ElementType<T> = T extends (infer U)[] ?
U : never extracts an array's element type, and built-in types such as ReturnType and Parameters use infer to read a function's return and parameter types.
TypeScript is structural, so two types with the same shape are interchangeable, which means a UserId string can be passed where an OrderId string is expected. A branded type adds a unique marker, such as type UserId = string & { readonly __brand: "UserId" }, so only values created through a validating function get that type, which prevents mixing up IDs, currencies or units.
Types are erased at compile time, so data from APIs, forms, local storage or environment variables is not checked when the program runs, even if you give it a type. Libraries such as Zod or Valibot define a schema once, validate data at runtime and infer the TypeScript type from the same schema, so the types and the checks never drift apart.
Declaration merging means TypeScript combines several declarations with the same name, for example two interface declarations become one interface with all properties. Module augmentation uses this to add types to an existing module, such as adding a user field to Express's Request type or adding custom theme properties to a UI library, by declaring the module again in a .d.ts file.
See all Frontend Developer interview questions, covering HTML, CSS, JavaScript, TypeScript, React and more.