"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Most TypeScript tutorials stop at \"here is an interface, here is a generic, good luck.\" That gets you maybe 60% of the value of the language. The other 40% lives in patterns beginner material does not cover, patterns I find myself reaching for almost every day. Discriminated unions. Branded types. Mapped and conditional types. ", _jsx(_components.code, { children: "satisfies" }), ". Exhaustiveness checks. These are the things that turn TypeScript from JavaScript with annotations into a language that helps you avoid bugs."] }), "\n", _jsx(_components.p, { children: "This post is a tour of the patterns I reach for most. None of these are novel, they are all documented in the TypeScript handbook, but they are underused in a lot of code I see day to day. Worth collecting in one place with real examples." }), "\n", _jsx(_components.h2, { children: "Discriminated Unions Are The Most Useful Feature In The Language" }), "\n", _jsx(_components.p, { children: "If I had to keep one advanced TypeScript feature, it would be discriminated unions. They capture, \"this is one of several shapes, and you can tell them apart by looking at a specific field.\" It is how you model events, actions, API responses, and any kind of variant data." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["ApiResponse", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " status", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'loading'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " status", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'success'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " data", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " status", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " error", _jsx(_components.span, { className: "token operator", children: ":" }), " Error", _jsx(_components.span, { className: "token punctuation", children: ";" }), " code", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "renderResponse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token operator", children: ":" }), " ApiResponse", _jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'loading'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Spinner ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'success'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token comment", children: "// TypeScript knows response.data exists here" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserProfile user", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token comment", children: "// TypeScript knows response.error and response.code exist here" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Error message", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "error", _jsx(_components.span, { className: "token punctuation", children: "." }), "message", _jsx(_components.span, { className: "token punctuation", children: "}" }), " code", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "code", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "status" }), " field is the discriminator. When you check it with ", _jsx(_components.code, { children: "switch" }), " or ", _jsx(_components.code, { children: "if" }), ", TypeScript narrows the type to the matching variant. You cannot accidentally access ", _jsx(_components.code, { children: "data" }), " in the error case because it does not exist on that variant."] }), "\n", _jsxs(_components.p, { children: ["The alternative is optional fields (", _jsx(_components.code, { children: "data?: T" }), ") and runtime checks (", _jsx(_components.code, { children: "if (response.data)" }), "), which is uglier and less safe. The optional fields approach also makes invalid states representable. What does ", _jsx(_components.code, { children: "{ status: 'loading', data: someUser }" }), " mean? With a discriminated union it cannot be constructed."] }), "\n", _jsxs(_components.h2, { children: ["Exhaustiveness Checks With ", _jsx(_components.code, { children: "never" })] }), "\n", _jsx(_components.p, { children: "Related to discriminated unions. TypeScript has a beautiful trick for forcing you to handle every case. If you leave a case unhandled, you get a type error. Huge for maintainability. When someone adds a new variant to the union, every switch that has not been updated immediately fails to compile." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "assertNever" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "value", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "never" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "never" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "Unexpected value: " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "value", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "renderResponse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token operator", children: ":" }), " ApiResponse", _jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token keyword", children: "switch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "status", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'loading'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Spinner ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'success'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserProfile user", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "data", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token keyword", children: "case" }), " ", _jsx(_components.span, { className: "token string", children: "'error'" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "Error message", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "response", _jsx(_components.span, { className: "token punctuation", children: "." }), "error", _jsx(_components.span, { className: "token punctuation", children: "." }), "message", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "default" }), _jsx(_components.span, { className: "token operator", children: ":" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token comment", children: "// If a new variant is added, this line will fail to compile" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token function", children: "assertNever" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "response", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["When someone adds ", _jsx(_components.code, { children: "'retrying'" }), " to the ", _jsx(_components.code, { children: "ApiResponse" }), " union later, this function does not compile until you handle the new case. You get a compile error pointing at the exact code that needs updating. I have caught so many bugs with this before they hit runtime."] }), "\n", _jsx(_components.h2, { children: "Branded Types for Nominal Typing" }), "\n", _jsxs(_components.p, { children: ["TypeScript's structural typing is usually a feature, but sometimes you want two types to be incompatible even though they have the same shape. Classic example, ", _jsx(_components.code, { children: "UserId" }), " and ", _jsx(_components.code, { children: "ProductId" }), " are both ", _jsx(_components.code, { children: "string" }), ", and you do not want to accidentally pass one where the other is expected."] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "UserId" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token operator", children: "&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " __brand", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'UserId'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "ProductId" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token operator", children: "&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " __brand", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'ProductId'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "getUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token operator", children: ":" }), " UserId", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " User ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* ... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "getProduct" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "id", _jsx(_components.span, { className: "token operator", children: ":" }), " ProductId", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " Product ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* ... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token comment", children: "// You can't just assign a string to UserId" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " rawString ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "\"user_123\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token function", children: "getUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "rawString", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Error: Argument of type 'string' is not assignable to type 'UserId'" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token comment", children: "// You need a constructor/cast" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "userId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "raw", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " UserId ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " raw ", _jsx(_components.span, { className: "token keyword", children: "as" }), " UserId", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "15", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [_jsx(_components.span, { className: "token function", children: "getUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "userId" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"user_123\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Fine" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "__brand" }), " field does not exist at runtime, it is purely a marker for the compiler. Called branding or tagged types. It is how you get nominal typing out of a structural type system."] }), "\n", _jsx(_components.p, { children: "I use this for IDs constantly. Also for validated vs unvalidated inputs:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "ValidatedEmail" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token operator", children: "&" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " __brand", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'ValidatedEmail'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "validateEmail" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "raw", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ValidatedEmail ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsx(_components.span, { className: "token anchor function", children: "^" }), _jsxs(_components.span, { className: "token char-class", children: [_jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "[" }), _jsx(_components.span, { className: "token char-class-negation operator", children: "^" }), "@", _jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "]" })] }), _jsx(_components.span, { className: "token quantifier number", children: "+" }), "@", _jsxs(_components.span, { className: "token char-class", children: [_jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "[" }), _jsx(_components.span, { className: "token char-class-negation operator", children: "^" }), "@", _jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "]" })] }), _jsx(_components.span, { className: "token quantifier number", children: "+" }), _jsx(_components.span, { className: "token anchor function", children: "$" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "test" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "raw", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " raw ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ValidatedEmail", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "sendEmail" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "to", _jsx(_components.span, { className: "token operator", children: ":" }), " ValidatedEmail", _jsx(_components.span, { className: "token punctuation", children: "," }), " body", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token comment", children: "/* ... */" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token comment", children: "// The compiler now forces you to validate before sending" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " input ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "getFormInput" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " validated ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "validateEmail" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "input", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "validated", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" ", _jsx(_components.span, { className: "token function", children: "sendEmail" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "validated", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"Hello\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Fine" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "16", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsx(_components.span, { className: "token function", children: "sendEmail" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "input", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "\"Hello\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Error: input might not be a valid email" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "The type system is now enforcing, you cannot send an email without validating the address first. A real correctness guarantee, almost free." }), "\n", _jsx(_components.h2, { children: "Mapped Types For Mechanical Transformations" }), "\n", _jsxs(_components.p, { children: ["Mapped types let you derive one type from another by transforming every property. The built in ones, ", _jsx(_components.code, { children: "Partial" }), ", ", _jsx(_components.code, { children: "Required" }), ", ", _jsx(_components.code, { children: "Readonly" }), ", ", _jsx(_components.code, { children: "Pick" }), ", ", _jsx(_components.code, { children: "Omit" }), ", cover most common cases. Knowing how to write your own is a superpower."] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Make every property nullable" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["Nullable", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token keyword", children: "in" }), " ", _jsx(_components.span, { className: "token keyword", children: "keyof" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token comment", children: "// Make every property a Promise" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["Promisify", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token keyword", children: "in" }), " ", _jsx(_components.span, { className: "token keyword", children: "keyof" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token comment", children: "// Extract only the function properties" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["FunctionsOf", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token keyword", children: "in" }), " ", _jsx(_components.span, { className: "token keyword", children: "keyof" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "..." }), "args", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "any" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token builtin", children: "any" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "never" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "User" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [" name", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [" ", _jsx(_components.span, { className: "token function", children: "save" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" ", _jsx(_components.span, { className: "token keyword", children: "delete" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "18", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "UserActions" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " FunctionsOf", _jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token comment", children: "// => { save: () => void; delete: () => void; }" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Last example uses ", _jsx(_components.a, { href: "https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as", children: "key remapping" }), ", which lets you filter or rename keys during the mapping. This is how you do, \"give me all the setter methods of this class\" or \"give me the type of this object with all the fields renamed to snake_case.\""] }), "\n", _jsx(_components.p, { children: "I use these for API contract generation. If the backend defines a response shape, I derive the request shape, the partial update shape, and the list response shape mechanically from it:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["CreateRequest", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " Omit", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'id'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'createdAt'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'updatedAt'" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["UpdateRequest", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " Partial", _jsx(_components.span, { className: "token operator", children: "<" }), "CreateRequest", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">>" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["ListResponse", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " items", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " total", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " page", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "One shape drives a whole family of related shapes. When the server shape changes, everything downstream updates automatically." }), "\n", _jsx(_components.h2, { children: "Conditional Types For Real Inference" }), "\n", _jsx(_components.p, { children: "Conditional types are the thing that makes TypeScript's type system Turing complete. Look weird at first. Let you express \"this type depends on another type in some non trivial way.\"" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Unwrap a Promise" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["Awaited", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " ", _jsxs(_components.span, { className: "token class-name", children: [_jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token keyword", children: "infer" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token constant", children: "U" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token constant", children: "A" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " Awaited", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "Promise" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token operator", children: ">>" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// string" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token constant", children: "B" }) }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " Awaited", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// number" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token comment", children: "// Get the return type of a function" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["ReturnType", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token operator", children: "..." }), "args", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "any" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "infer" }), " ", _jsx(_components.span, { className: "token constant", children: "R" }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token constant", children: "R" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "never" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token comment", children: "// Only keep the keys whose values are strings" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["StringKeys", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token keyword", children: "in" }), " ", _jsx(_components.span, { className: "token keyword", children: "keyof" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " ", _jsx(_components.span, { className: "token class-name", children: _jsx(_components.span, { className: "token builtin", children: "string" }) }), " ", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "never" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token keyword", children: "keyof" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "14", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Config" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "16", children: [" host", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "17", children: [" port", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "number" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "18", children: [" debug", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "boolean" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "19", children: [" prefix", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "20", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "21", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "22", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "StringConfigKeys" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " StringKeys", _jsx(_components.span, { className: "token operator", children: "<" }), "Config", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 'host' | 'prefix'" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "infer" }), " keyword is the magic. It says, \"match this pattern and extract the thing that fits in this slot.\" You use it anywhere a type could go. Element types of arrays, return types of functions, parameter types, generic arguments."] }), "\n", _jsx(_components.p, { children: "I reach for conditional types mostly when building utilities. A lot of them end up expressing, give me all the parts of this type that match some criterion. Usually I start with a concrete version then generalize." }), "\n", _jsx(_components.h2, { children: "Template Literal Types" }), "\n", _jsx(_components.p, { children: "Added in TypeScript 4.1. One of the more unexpectedly useful recent additions. They let you build string types the way you build string values." }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "Method" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'GET'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'POST'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'PUT'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'DELETE'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "Endpoint" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "/api/" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "Route" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "Method", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "Endpoint", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " route", _jsx(_components.span, { className: "token operator", children: ":" }), " Route ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "\"GET /api/users\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// OK" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " bad", _jsx(_components.span, { className: "token operator", children: ":" }), " Route ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "\"FETCH /api/users\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Error" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "Real power comes when you combine them with mapped types. You generate event handler names from event names, Redux action types, getter/setter names, all kinds of things:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["EventHandlers", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token keyword", children: "extends" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token operator", children: ">" })] }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token constant", children: "K" }), " ", _jsx(_components.span, { className: "token keyword", children: "in" }), " ", _jsx(_components.span, { className: "token constant", children: "T" }), " ", _jsx(_components.span, { className: "token keyword", children: "as" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "on" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "Capitalize", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token constant", children: "K" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "type" }), " ", _jsx(_components.span, { className: "token class-name", children: "ButtonHandlers" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " EventHandlers", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token string", children: "'click'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'hover'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'focus'" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token comment", children: "// => { onClick: () => void; onHover: () => void; onFocus: () => void; }" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "I have used this to type event bus systems, to validate route parameter shapes, and to enforce naming conventions for generated code. Once it clicks that types are manipulated as strings, you see opportunities everywhere." }), "\n", _jsxs(_components.h2, { children: [_jsx(_components.code, { children: "satisfies" }), " Is The Best Thing Added In TypeScript 4.9"] }), "\n", _jsxs(_components.p, { children: ["Before ", _jsx(_components.code, { children: "satisfies" }), " existed, you chose between two annoying options:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Declare the type of a literal with ", _jsx(_components.code, { children: ": SomeType" }), ", which widens the types of specific values you cared about."] }), "\n", _jsx(_components.li, { children: "Do not annotate, which means no type checking against the expected shape." }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "satisfies" }), " gives you both. It checks that the value conforms to the type, but preserves the exact literal types:"] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// Without satisfies: you lose the specific key types" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " config", _jsx(_components.span, { className: "token operator", children: ":" }), " Record", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" api", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/api\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" cdn", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/cdn\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: ["config", _jsx(_components.span, { className: "token punctuation", children: "." }), "api", _jsx(_components.span, { className: "token punctuation", children: "." }), "url", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// OK" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: ["config", _jsx(_components.span, { className: "token punctuation", children: "." }), "whatever", _jsx(_components.span, { className: "token punctuation", children: "." }), "url", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Also OK (no error). Not great." }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token comment", children: "// With satisfies: you keep the specific keys" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " config ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" api", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/api\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" cdn", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"/cdn\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " satisfies Record", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token builtin", children: "string" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " url", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "string" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: ["config", _jsx(_components.span, { className: "token punctuation", children: "." }), "api", _jsx(_components.span, { className: "token punctuation", children: "." }), "url", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// OK" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "15", children: ["config", _jsx(_components.span, { className: "token punctuation", children: "." }), "whatever", _jsx(_components.span, { className: "token punctuation", children: "." }), "url", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// Error: 'whatever' does not exist" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["I use this constantly for config objects, lookup tables, any situation where I want, check this matches a shape but keep the narrow types. Once you start using ", _jsx(_components.code, { children: "satisfies" }), ", going back to ", _jsx(_components.code, { children: "as" }), " or explicit type annotations for these use cases feels wrong."] }), "\n", _jsx(_components.h2, { children: "Type Guards and Predicates" }), "\n", _jsx(_components.p, { children: "Sometimes you need to narrow a type based on a runtime check TypeScript cannot see through on its own. User defined type guards are the tool:" }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Fish" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "swim" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "interface" }), " ", _jsx(_components.span, { className: "token class-name", children: "Bird" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "fly" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token keyword", children: "void" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "isFish" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animal", _jsx(_components.span, { className: "token operator", children: ":" }), " Fish ", _jsx(_components.span, { className: "token operator", children: "|" }), " Bird", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " animal ", _jsx(_components.span, { className: "token keyword", children: "is" }), " Fish ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "animal ", _jsx(_components.span, { className: "token keyword", children: "as" }), " Fish", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "swim ", _jsx(_components.span, { className: "token operator", children: "!==" }), " ", _jsx(_components.span, { className: "token keyword", children: "undefined" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "move" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animal", _jsx(_components.span, { className: "token operator", children: ":" }), " Fish ", _jsx(_components.span, { className: "token operator", children: "|" }), " Bird", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token function", children: "isFish" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "animal", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" animal", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "swim" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// TypeScript knows this is a Fish" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" animal", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "fly" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// TypeScript knows this is a Bird" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "animal is Fish" }), " return type annotation is the key. It tells the compiler, if this returns true, the argument is a Fish. The compiler narrows in the true branch."] }), "\n", _jsx(_components.p, { children: "I use these for:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Parsing unknown external data (", _jsx(_components.code, { children: "isValidUser(payload)" }), ")"] }), "\n", _jsx(_components.li, { children: "Narrowing discriminated unions across function boundaries" }), "\n", _jsx(_components.li, { children: "Custom guards for utility types" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Similarly, ", _jsx(_components.code, { children: "asserts x is T" }), " functions that throw on failure are lovely for validation:"] }), "\n", _jsx(_components.pre, { className: "language-typescript line-numbers", children: _jsxs(_components.code, { className: "language-typescript code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "assertIsUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "obj", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "unknown" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token keyword", children: "asserts" }), " obj ", _jsx(_components.span, { className: "token keyword", children: "is" }), " User ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "typeof" }), " obj ", _jsx(_components.span, { className: "token operator", children: "!==" }), " ", _jsx(_components.span, { className: "token string", children: "'object'" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " obj ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "typeof" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "obj ", _jsx(_components.span, { className: "token keyword", children: "as" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "id ", _jsx(_components.span, { className: "token operator", children: "!==" }), " ", _jsx(_components.span, { className: "token string", children: "'string'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token keyword", children: "throw" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ... etc" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "processUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "input", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "unknown" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token function", children: "assertIsUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "input", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token comment", children: "// input is now typed as User for the rest of the function" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "input", _jsx(_components.span, { className: "token punctuation", children: "." }), "id", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// OK" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(_components.h2, { children: "The Combined Power" }), "\n", _jsx(_components.p, { children: "None of these patterns are exotic. All are in the TypeScript handbook. What I have found is that using them together produces TypeScript code genuinely safer than the \"interfaces and generics\" starter kit most people stop at." }), "\n", _jsx(_components.p, { children: "A mature TypeScript codebase uses:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Discriminated unions for variant data" }), "\n", _jsx(_components.li, { children: "Exhaustiveness checks so new variants do not get silently ignored" }), "\n", _jsx(_components.li, { children: "Branded types to keep different flavors of string or number apart" }), "\n", _jsx(_components.li, { children: "Mapped and conditional types to derive shapes mechanically instead of by hand" }), "\n", _jsx(_components.li, { children: "Template literal types to enforce naming conventions" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "satisfies" }), " to get literal types with shape validation"] }), "\n", _jsx(_components.li, { children: "Type guards and assertions at the boundaries where data comes in" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["You do not need all of these on day one. You do not need all of them ever. But each has paid for itself in my codebase at least a few times, and knowing they exist means when you hit a \"how do I type this?\" moment, you have more options than ", _jsx(_components.code, { children: "any" }), " or a cast."] }), "\n", _jsx(_components.p, { children: "If any of these are new, pick one, find a place in your code where it applies, and try refactoring. That is how I learned most of them. The type system rewards experimentation. The bugs you catch this way are the ones that would otherwise make it to production and page someone at 2am." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

TypeScript Type Safety Beyond the Basics: Advanced Patterns I Use Daily