More in TypeScript & Web APIs — page 8
Shipping TypeScript Types in package.json
The `types` field in `package.json` tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in `devDependencies` instead of `dependencies`.
export = : TypeScript's CommonJS Export Syntax
Think of `export =` as TypeScript's version of `module.exports`. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard `export`s.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a `user` property to Express's `Request` object.
Triple-Slash Directives: Compiler Hints in Comments
Triple-slash directives are compiler instructions inside comments, telling TypeScript about file dependencies. They're mostly seen in older projects or for global types, as modern `import` statements are preferred.
TypeScript: Type-Only Imports and Exports
Use `import type` to tell the compiler an import is only for type-checking and should be erased from the final JavaScript. This prevents tools like Babel from generating unwanted runtime code when compiling files in isolation.
TypeScript's `declare`: A Promise to the Compiler
`declare` promises the TypeScript compiler a value exists, even if it can't see the source. This lets you use untyped JavaScript libraries or browser APIs without errors.
Speed Up Builds with TypeScript Project References
Treat your codebase like a set of independent packages. Project References let you split a large project into smaller, interconnected pieces, dramatically speeding up builds by only recompiling what's changed.
Modern Bundlers & TypeScript: Transpile, Don't Check
Modern bundlers like Vite prioritize speed by only transpiling TypeScript files, not type-checking them. This enables sub-50ms updates during development. The footgun: your dev server won't report type errors; you must run `tsc --noEmit` separately.
TypeScript's Module Resolution Strategy
TypeScript's `moduleResolution` is the compiler's search plan for finding files behind `import` statements. It's crucial when mixing module types (ESM/CJS) or targeting Node.js vs. the browser. The footgun is assuming the default `node` works for modern ESM.
DefinitelyTyped: Type Definitions for JavaScript Libraries
@types packages from DefinitelyTyped are instruction manuals for JavaScript libraries, letting TypeScript understand their shapes. You install them for JS libs that lack their own types, enabling autocompletion.
Declaration Files: How TypeScript Knows Your Library's Shape
A `.d.ts` file is a type-only blueprint for existing JavaScript code, describing its shape without any implementation. This is how TypeScript provides type-checking for third-party libraries or browser APIs. The footgun is adding logic to them; it's ignored.
Media Source Extensions: The Engine for Web Streaming
MSE lets you build streaming video players in JavaScript by feeding media chunks to a `<video>` element, instead of a single file URL. It's the foundation for adaptive streaming like DASH/HLS.
RTCPeerConnection: Direct Browser-to-Browser Links
Think of an RTCPeerConnection as a direct phone line between two browsers. It's the core of WebRTC, enabling peer-to-peer video and data streams. The footgun: it doesn't find peers; you must use a separate signaling server to broker the initial handshake.
WebGL Textures: From Image File to GPU Pixels
WebGL textures are images uploaded to the GPU for fast access when "painting" 3D models. They're used to apply detailed surfaces like brick patterns. The footgun: images must be CORS-approved, and non-power-of-two dimensions break mipmapping in WebGL1.
Web Audio API: A Modular Synth for Your Browser
The Web Audio API treats sound as a modular graph. You connect sources (files, oscillators) to effects (filters) and a destination (speakers) for precise, low-latency control. It's ideal for games and music apps.
MediaRecorder API: Capture Audio and Video in the Browser
The MediaRecorder API is a VCR for your browser, capturing a MediaStream from a camera or screen into a file. Use it for in-browser video recorders or voice memo apps. The footgun: recorded data arrives as Blob objects in an event, not as a direct.
WebGL Uniforms: Global State for Shaders
WebGL uniforms are global constants for your shaders, set once per frame from JavaScript to provide the same value to every vertex and pixel. Use them for scene-wide data like a camera's projection matrix. The footgun: changing a uniform is a CPU-to-GPU call.
WebGL Buffers: Telling the GPU How to Read Your Data
WebGL's vertexAttribPointer is the map you give the GPU to read vertex data from a buffer. It tells your shader how to parse a flat byte array into attributes like position. This is how you link CPU data to the GPU before drawing.
WebGL Shaders: Your Direct Line to the GPU
WebGL shaders are small programs written in GLSL that run directly on the GPU, bypassing the CPU for massively parallel graphics tasks. They are essential for all WebGL rendering, positioning vertices and coloring pixels.
WebGL Rendering Context: Your GPU's API on Canvas
The WebGL rendering context is your JavaScript's command center for drawing on a `<canvas>` with the GPU. You use it for 3D games or complex data visualizations. The context can be lost, so always check `isContextLost()` before rendering a new frame.