Typescript
173 bites tagged Typescript — interview questions with model answers, and 60-second explainers.
Compile-time vs runtime prop validation across frameworks?
TypeScript (compile-time) catches errors before build; Vue props validation (runtime) catches at runtime; tradeoff: TS is stricter, Vue validation is flexible but less safe. understanding of type safety mechanisms.
What isolatedModules enforces and why bundlers need it
IsolatedModules forbids features needing cross-file type info because Babel and esbuild compile each file alone; const enums, certain re-exports, and namespace tricks are flagged. Single-file transpilation constraints.
First compilerOptions to set after tsc --init
Enable strict for full type safety, set target and module to match the runtime, and choose outDir/rootDir or moduleResolution; each tightens checks or aligns output. Practical tsconfig priorities.
Generic merge with an intersection return type
Use two type parameters T and U, return T & U, spread both objects; note later spread wins on key collisions and the type may not reflect that. Generics and intersection types.
Promise .catch() versus async/await try...catch
.catch() handles rejection for all preceding chain steps and reads functionally; try/catch reads synchronously and can scope errors per await, but only catches awaited rejections. Async error-handling models.
Implementing the Singleton pattern in TypeScript
Private constructor blocks new, a static private instance field caches it, static getInstance lazily creates and returns the one instance. Encapsulating single-instance access.
Understanding this in TypeScript
In TypeScript, this is determined by how a function is called, not where it is defined; arrow functions capture the enclosing this lexically, and TypeScript adds optional this parameters to type-check the expected context at compile time.
Type-safe navigation with TypeScript
Define a ParamList mapping screen names to param types, type Screen via NativeStackScreenProps, and type useNavigation with the navigation prop generic so route names and params autocomplete. typing navigation.
Enforcing an accessible name on icon-only buttons
Require aria-label via the type system for icon-only variants, warn at runtime, decorate the icon as aria-hidden. API design that guarantees an accessible name. trusting developers to remember a label on icon buttons.
Auto-generating component API docs from source
Extract types via react-docgen-typescript, surface in Storybook ArgsTable, enrich with JSDoc. keeping prop docs in sync with code. maintaining a hand-written prop table that silently drifts.
The polymorphic 'as' prop pattern
Render the element from an as prop, infer props from the chosen element, and forward refs. Building reusable components with correct typing and ref forwarding. ignoring types or dropping the ref.
SvelteKit 2.56 overhauls remote functions, adds TypeScript 6.0
SvelteKit 2.56 overhauls remote functions with breaking changes to query refreshes, caching, and a new run() method, plus TypeScript 6.0 support. The Svelte CLI adds experimental community plugins. Audit your remote function calls before upgrading.
Create a custom synchronous validator for an Angular Reactive Form
Tests your grasp of the ValidatorFn contract and reactive form wiring. A strong answer: a function accepting AbstractControl returns null when valid or an error object when invalid, passed as the second FormControl argument. Red flag: returning booleans.
How would you create a parameterized Svelte tooltip Action?
It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.
Matt Pocock's Free React TypeScript Tutorial
Matt Pocock's free React TypeScript tutorial teaches typing for hooks, props, events via hands-on exercises. Covers ComponentProps, useRef, and reading React's type defs to debug errors. Bookmark this if your team is adopting TypeScript.
Matt Pocock Tutorial Covers Ten TypeScript Errors
Cryptic TypeScript errors waste hours. Matt Pocock's new tutorial isolates ten common messages from "Type Not Assignable" to "Property Does Not Exist" in interactive exercises. Clone the repo or use Gitpod to build debugging instincts instead of guessing.
Type a UMD library for script tags and CommonJS/ESM
Tests TypeScript UMD declarations for dual global and module usage. Use export as namespace MyLib for the global, export = MyLib for require, and declare the API inside a namespace. Red flag: default exports or declare global instead of export as namespace.
How do you write a declaration file for a JavaScript class?
Declare a class in a .d.ts, type the constructor, add instance members, and attach statics on the class. Ambient class declarations that model instance and static members of untyped JS.
How does export = differ from export default in TypeScript declarations?
It tests CommonJS to ES module interop in TypeScript. export = maps to the entire module.exports object and must be imported with import = require() or ES interop, while export default creates a named binding. A red flag is claiming they are interchangeable.
Create a CustomEvent with typed detail and a type-safe listener
Tests TypeScript generics with DOM events. Strong answer: generic CustomEvent wrapper, typed detail, listener typed via generic param. Red flag: using any for detail or casting event.target instead of parameterizing the event type.
Type a compose function using generics and overloads
It tests your ability to type higher-order pipelines where each function's output feeds the next input. Use function overloads with chained generics for each arity so TypeScript infers the composed parameter and return types.
How do you derive a PATCH payload type from UserProfile?
Tests knowledge of TypeScript utility types for APIs. A great answer uses Partial<UserProfile> to make all fields optional in one line and connects it to PATCH subset semantics. Red flag: manually rewriting properties as optional or confusing PUT with PATCH.
How do you type a custom property on global window in TypeScript?
Tests declaration merging and global scope augmentation in TypeScript. Strong answer: declare global in a .ts file, a .d.ts with interface Window, or scoped declare const window. Red flag: any or ts-ignore instead of interface merging.
How do you globally add a property to a third-party ButtonProps interface?
Tests TypeScript declaration merging and module augmentation. A strong answer uses a .d.ts file that declares the same module and interface name to merge the missing property globally. Red flag: suggesting edits inside node_modules or local wrapper types.
Get Typescript bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.