A curated list of awesome π₯ TypeScript Tips π₯
- Normal union, a discriminated union, and a type predicate
- Use Object.freeze to ensure your objects are readonly at the type level AND the runtime level
- Inversion of control
- Ultimate TypeScript Thread
- TypeScript Tips Series
- Enum vs const enums
- Use labeled tuple elements to get better hints from your text editor
- Use
as const
after literals
- Avoid making a property optional when the property isnβt valid in a certain case
- Alias the type's name when conflicts with an existing identifier
-
PackageJson
- There are a lot of tools that place extra configurations inside thepackage.json
file. You can extendPackageJson
to support these additional configurations.Example
import type { PackageJson as BasePackageJson } from "type-fest"; import type { Linter } from "eslint"; type PackageJson = BasePackageJson & { eslintConfig?: Linter.Config };
There are many advanced types most users don't know about.
-
Partial<T>
- Make all properties inT
optional.Example
interface NodeConfig { appName: string; port: number; } class NodeAppBuilder { private configuration: NodeConfig = { appName: "NodeApp", port: 3000, }; private updateConfig<Key extends keyof NodeConfig>( key: Key, value: NodeConfig[Key] ) { this.configuration[key] = value; } config(config: Partial<NodeConfig>) { type NodeConfigKey = keyof NodeConfig; for (const key of Object.keys(config) as NodeConfigKey[]) { const updateValue = config[key]; if (updateValue === undefined) { continue; } this.updateConfig(key, updateValue); } return this; } } // `Partial<NodeConfig>`` allows us to provide only a part of the // NodeConfig interface. new NodeAppBuilder().config({ appName: "ToDoApp" });
-
Required<T>
- Make all properties inT
required.Example
interface ContactForm { email?: string; message?: string; } function submitContactForm(formData: Required<ContactForm>) { // Send the form data to the server. } submitContactForm({ email: "[email protected]", message: "Hi! Could you tell me more aboutοΏ½", }); // TypeScript error: missing property 'message' submitContactForm({ email: "[email protected]", });
-
Readonly<T>
- Make all properties inT
readonly.Example
enum LogLevel { Off, Debug, Error, Fatal, } interface LoggerConfig { name: string; level: LogLevel; } class Logger { config: Readonly<LoggerConfig>; constructor({ name, level }: LoggerConfig) { this.config = { name, level }; Object.freeze(this.config); } } const config: LoggerConfig = { name: "MyApp", level: LogLevel.Debug, }; const logger = new Logger(config); // TypeScript Error: cannot assign to read-only property. logger.config.level = LogLevel.Error; // We are able to edit config variable as we please. config.level = LogLevel.Error;
-
Pick<T, K>
- FromT
, pick a set of properties whose keys are in the unionK
.Example
interface Article { title: string; thumbnail: string; content: string; } // Creates new type out of the `Article` interface composed // from the Articles' two properties: `title` and `thumbnail`. // `ArticlePreview = {title: string; thumbnail: string}` type ArticlePreview = Pick<Article, "title" | "thumbnail">; // Render a list of articles using only title and description. function renderArticlePreviews(previews: ArticlePreview[]): HTMLElement { const articles = document.createElement("div"); for (const preview of previews) { // Append preview to the articles. } return articles; } const articles = renderArticlePreviews([ { title: "TypeScript tutorial!", thumbnail: "/assets/ts.jpg", }, ]);
-
Record<K, T>
- Construct a type with a set of propertiesK
of typeT
.Example
// Positions of employees in our company. type MemberPosition = "intern" | "developer" | "tech-lead"; // Interface describing properties of a single employee. interface Employee { firstName: string; lastName: string; yearsOfExperience: number; } // Create an object that has all possible `MemberPosition` values set as keys. // Those keys will store a collection of Employees of the same position. const team: Record<MemberPosition, Employee[]> = { intern: [], developer: [], "tech-lead": [], }; // Our team has decided to help John with his dream of becoming Software Developer. team.intern.push({ firstName: "John", lastName: "Doe", yearsOfExperience: 0, }); // `Record` forces you to initialize all of the property keys. // TypeScript Error: "tech-lead" property is missing const teamEmpty: Record<MemberPosition, null> = { intern: null, developer: null, };
-
Exclude<T, U>
- Exclude fromT
those types that are assignable toU
.Example
interface ServerConfig { port: null | string | number; } type RequestHandler = (request: Request, response: Response) => void; // Exclude `null` type from `null | string | number`. // In case the port is equal to `null`, we will use default value. function getPortValue(port: Exclude<ServerConfig["port"], null>): number { if (typeof port === "string") { return parseInt(port, 10); } return port; } function startServer(handler: RequestHandler, config: ServerConfig): void { const server = require("http").createServer(handler); const port = config.port === null ? 3000 : getPortValue(config.port); server.listen(port); }
-
Extract<T, U>
- Extract fromT
those types that are assignable toU
.Example
declare function uniqueId(): number; const ID = Symbol("ID"); interface Person { [ID]: number; name: string; age: number; } // Allows changing the person data as long as the property key is of string type. function changePersonData< Obj extends Person, Key extends Extract<keyof Person, string>, Value extends Obj[Key] >(obj: Obj, key: Key, value: Value): void { obj[key] = value; } // Tiny Andrew was born. const andrew = { [ID]: uniqueId(), name: "Andrew", age: 0, }; // Cool, we're fine with that. changePersonData(andrew, "name", "Pony"); // Goverment didn't like the fact that you wanted to change your identity. changePersonData(andrew, ID, uniqueId());
-
NonNullable<T>
- Excludenull
andundefined
fromT
.Example
Works withstrictNullChecks
set totrue
.type PortNumber = string | number | null; /** Part of a class definition that is used to build a server */ class ServerBuilder { portNumber!: NonNullable<PortNumber>; port(this: ServerBuilder, port: PortNumber): ServerBuilder { if (port == null) { this.portNumber = 8000; } else { this.portNumber = port; } return this; } } const serverBuilder = new ServerBuilder(); serverBuilder .port("8000") // portNumber = '8000' .port(null) // portNumber = 8000 .port(3000); // portNumber = 3000 // TypeScript error serverBuilder.portNumber = null;
-
Parameters<T>
- Obtain the parameters of a function type in a tuple.Example
function shuffle(input: any[]): void { // Mutate array randomly changing its' elements indexes. } function callNTimes<Fn extends (...args: any[]) => any>( func: Fn, callCount: number ) { // Type that represents the type of the received function parameters. type FunctionParameters = Parameters<Fn>; return function (...args: FunctionParameters) { for (let i = 0; i < callCount; i++) { func(...args); } }; } const shuffleTwice = callNTimes(shuffle, 2);
-
ConstructorParameters<T>
- Obtain the parameters of a constructor function type in a tuple.Example
class ArticleModel { title: string; content?: string; constructor(title: string) { this.title = title; } } class InstanceCache<T extends new (...args: any[]) => any> { private ClassConstructor: T; private cache: Map<string, InstanceType<T>> = new Map(); constructor(ctr: T) { this.ClassConstructor = ctr; } getInstance(...args: ConstructorParameters<T>): InstanceType<T> { const hash = this.calculateArgumentsHash(...args); const existingInstance = this.cache.get(hash); if (existingInstance !== undefined) { return existingInstance; } return new this.ClassConstructor(...args); } private calculateArgumentsHash(...args: any[]): string { // Calculate hash. return "hash"; } } const articleCache = new InstanceCache(ArticleModel); const amazonArticle = articleCache.getInstance("Amazon forests burining!");
-
ReturnType<T>
- Obtain the return type of a function type.Example
/** Provides every element of the iterable `iter` into the `callback` function and stores the results in an array. */ function mapIter< Elem, Func extends (elem: Elem) => any, Ret extends ReturnType<Func> >(iter: Iterable<Elem>, callback: Func): Ret[] { const mapped: Ret[] = []; for (const elem of iter) { mapped.push(callback(elem)); } return mapped; } const setObject: Set<string> = new Set(); const mapObject: Map<number, string> = new Map(); mapIter(setObject, (value: string) => value.indexOf("Foo")); // number[] mapIter(mapObject, ([key, value]: [number, string]) => { return key % 2 === 0 ? value : "Odd"; }); // string[]
-
InstanceType<T>
- Obtain the instance type of a constructor function type.Example
class IdleService { doNothing(): void {} } class News { title: string; content: string; constructor(title: string, content: string) { this.title = title; this.content = content; } } const instanceCounter: Map<Function, number> = new Map(); interface Constructor { new (...args: any[]): any; } // Keep track how many instances of `Constr` constructor have been created. function getInstance< Constr extends Constructor, Args extends ConstructorParameters<Constr> >(constructor: Constr, ...args: Args): InstanceType<Constr> { let count = instanceCounter.get(constructor) || 0; const instance = new constructor(...args); instanceCounter.set(constructor, count + 1); console.log(`Created ${count + 1} instances of ${Constr.name} class`); return instance; } const idleService = getInstance(IdleService); // Will log: `Created 1 instances of IdleService class` const newsEntry = getInstance( News, "New ECMAScript proposals!", "Last month..." ); // Will log: `Created 1 instances of News class`
-
Omit<T, K>
- Constructs a type by picking all properties from T and then removing K.Example
interface Animal { imageUrl: string; species: string; images: string[]; paragraphs: string[]; } // Creates new type with all properties of the `Animal` interface // except 'images' and 'paragraphs' properties. We can use this // type to render small hover tooltip for a wiki entry list. type AnimalShortInfo = Omit<Animal, "images" | "paragraphs">; function renderAnimalHoverInfo(animals: AnimalShortInfo[]): HTMLElement { const container = document.createElement("div"); // Internal implementation. return container; }
-
Uppercase<S extends string>
- Transforms every character in a string into uppercase.Example
type T = Uppercase<"hello">; // 'HELLO' type T2 = Uppercase<"foo" | "bar">; // 'FOO' | 'BAR' type T3<S extends string> = Uppercase<`aB${S}`>; type T4 = T3<"xYz">; // 'ABXYZ' type T5 = Uppercase<string>; // string type T6 = Uppercase<any>; // any type T7 = Uppercase<never>; // never type T8 = Uppercase<42>; // Error, type 'number' does not satisfy the constraint 'string'
-
Lowercase<S extends string>
- Transforms every character in a string into lowercase.Example
type T = Lowercase<"HELLO">; // 'hello' type T2 = Lowercase<"FOO" | "BAR">; // 'foo' | 'bar' type T3<S extends string> = Lowercase<`aB${S}`>; type T4 = T3<"xYz">; // 'abxyz' type T5 = Lowercase<string>; // string type T6 = Lowercase<any>; // any type T7 = Lowercase<never>; // never type T8 = Lowercase<42>; // Error, type 'number' does not satisfy the constraint 'string'
-
Capitalize<S extends string>
- Transforms the first character in a string into uppercase.Example
type T = Capitalize<"hello">; // 'Hello' type T2 = Capitalize<"foo" | "bar">; // 'Foo' | 'Bar' type T3<S extends string> = Capitalize<`aB${S}`>; type T4 = T3<"xYz">; // 'ABxYz' type T5 = Capitalize<string>; // string type T6 = Capitalize<any>; // any type T7 = Capitalize<never>; // never type T8 = Capitalize<42>; // Error, type 'number' does not satisfy the constraint 'string'
-
Uncapitalize<S extends string>
- Transforms the first character in a string into lowercase.Example
type T = Uncapitalize<"Hello">; // 'hello' type T2 = Uncapitalize<"Foo" | "Bar">; // 'foo' | 'bar' type T3<S extends string> = Uncapitalize<`AB${S}`>; type T4 = T3<"xYz">; // 'aBxYz' type T5 = Uncapitalize<string>; // string type T6 = Uncapitalize<any>; // any type T7 = Uncapitalize<never>; // never type T8 = Uncapitalize<42>; // Error, type 'number' does not satisfy the constraint 'string'
You can find some examples in the TypeScript docs.
Contributions welcome! Read the contribution guidelines first.
Create .envrc and fill the value then Use tweet-to-markdown
# .envrc
export TTM_API_KEY=
Then run the direnv command
direnv allow .
Finally, the generate markdown from a twitter url
npx tweet-to-markdown https://twitter.com/mattpocockuk/status/1509964736275927042\?s\=20\&t\=sA-g5MNM5TPjN6Ozs1qxgA
This project is made by community and especially the wonderful people and projects listed in this document
- type-fest: for 2 sections (Extending existing type, Built-in types)
- Matt Pocock
βοΈ Modern Frontends - Carlos Caballero
- Minko Gechev (@[email protected])
- Cory House
- Tomek SuΕkowski
- StackBlitz
π€ Huynh Duc Dung
- Website: https://productsway.com/
- Twitter: @jellydn
- Github: @jellydn
Give a βοΈ if this project helped you!