Typescript Tips

A curated list of awesome 🔥 TypeScript Tips 🔥

If you enjoy TypeScript and really want to use Typesafe, you can check awesome-typesafe

🏠 Homepage

✨ Gitbook

Contents

• Tips
  • Matt Pocock
  • Wes Bos
  • Erik Rasmussen
  • Carlos Caballero
  • Ankita Kulkarni
  • Minko Gechev
  • Cory House
  • Tomek Sułkowski
  • Sebastien Lorber
  • Steve (Builder.io)
  • StackBlitz
  • Extending existing types
  • Built-in types
• Contribute
  • Twitter to markdown file
• Credits

Tips

Matt Pocock

• TypeScript Tips Series
• LooseAutocomplete
• Normal union, a discriminated union, and a type predicate
• Enter satisfies()() 👀
• Use Object.freeze to ensure your objects are readonly at the type level AND the runtime level
• Inversion of control
• Ultimate TypeScript Thread
• Expose type to global with declare global
• Use generics to dynamically specify the number, and type, of arguments to functions
• Adding things to the global scope in TypeScript
• Using 'as const' over enums
• Use assertion functions inside classes
• Compound Components in React are SUPER easy to type in TS

Wes Bos

• Four ways to define an object type in TypeScript
• The difference between any and unknown
• Use TypeScript's never for making sure you hit every scenario
• Use TypeScript's never to enforce "one or the other" properties on a type
• Type Guard in TypeScript by using the is keyword in a functions return type
• VSCode - quickly add all properties to a typed object in TypeScript with the ts-quickfixes
• VSCode - refactoring your codebase
• 4 TypeScript tips in context of when you would use them. as const, typeof, keyof and template string types

Erik Rasmussen

• Passing around unique identifiers of objects, select the type of the identifier right off of the object type

Carlos Caballero

• Use look up tables instead of "if"

Ankita Kulkarni

• Typescript 4.9 satisfies operator - check if the type matches one of these listed type

Minko Gechev

• Enum vs const enums
• Use labeled tuple elements to get better hints from your text editor
• Use as const after literals

Cory House

• 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
• Many optional properties are a code smell

Tomek Sułkowski

• Extract it from a component using the handy ComponentProps
• Use keyof gets a union type of all properties of the given object

Sebastien Lorber

• No need to import DOM event handler types

Steve (Builder.io)

• The satisfies operator in TypeScript 4.9 is a game changer

StackBlitz

• Infers array's type as const
• How to use extends
• How to use readonly

Extending existing types

• PackageJson - There are a lot of tools that place extra configurations inside the package.json file. You can extend PackageJson to support these additional configurations.

  Example

  Playground

  import type { PackageJson as BasePackageJson } from "type-fest";
  import type { Linter } from "eslint";
  
  type PackageJson = BasePackageJson & { eslintConfig?: Linter.Config };

Built-in types

There are many advanced types most users don't know about.

• Partial<T> - Make all properties in T optional.

  Example

  Playground

  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 in T required.

  Example

  Playground

  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 in T readonly.

  Example

  Playground

  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> - From T, pick a set of properties whose keys are in the union K.

  Example

  Playground

  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 properties K of type T.

  Example

  Playground

  // 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 from T those types that are assignable to U.

  Example

  Playground

  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 from T those types that are assignable to U.

  Example

  Playground

  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> - Exclude null and undefined from T.

  Example

  Works with strictNullChecks set to true.

  Playground

  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

  Playground

  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

  Playground

  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

  Playground

  /** 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

  Playground

  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

  Playground

  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.

Contribute

Contributions welcome! Read the contribution guidelines first.

Twitter to markdown file

Create .envrc and fill the value then Use tweet-to-markdown

# .envrc
export TTM_API_KEY=YOUR_API_KEY

Then run the direnv command

 direnv allow .

And, generate markdown from a twitter url

npx tweet-to-markdown -p notes https://twitter.com/mattpocockuk/status/1509964736275927042\?s\=20\&t\=sA-g5MNM5TPjN6Ozs1qxgA

Then save video if available

npx twt-dl-cli@latest https://twitter.com/mattpocockuk/status/1592130978234900484

Finally, add the Thread Reader App at the end with below format.

[Thread by @USERNAME on Threadify Reader App](https://threadify.productsway.com/thread/STATUS_ID)

NOTE: I have sent a pull request about this step to tweet-to-markdown repository: feat: add Thread Reader App link and the end #19 Might not need this step if this PR is accepted.

Credits

This project is made by community and especially the wonderful people and projects listed in this document

Open Source

• sindresorhus/type-fest: for 2 sections (Extending existing type, Built-in types)
• kbravh/tweet-to-markdown: A command line tool to convert Tweets to Markdown.
• jellydn/threadify-plus: ThreadifyPlus is a simple and easy-to-use tool that helps users read and share Twitter threads with ease. (WIP)
• egoist/download-twitter-video : The easiest way to download any Twitter video

Tech Twitter

• Matt Pocock ✈️ Modern Frontends
• Wes Bos
• Erik Rasmussen
• Carlos Caballero
• Ankita Kulkarni
• Minko Gechev (@[email protected])
• Cory House
• Tomek Sułkowski
• Sebastien Lorber
• Steve (Builder.io)
• StackBlitz

Author

👤 Huynh Duc Dung

• Website: https://productsway.com/
• Twitter: @jellydn
• Github: @jellydn

Show your support

Give a ⭐️ if this project helped you!

Stargazers over time