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

Tips
Contribute
- Twitter to markdown file
Credits

Tips

Matt Pocock

Carlos Caballero

Use look up tables instead of "if"

Minko Gechev

Cory House

Tomek Sułkowski

Extract it from a component using the handy ComponentProps

Wes Bos

StackBlitz

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: "ex@mple.com",
  message: "Hi! Could you tell me more about�",
});

// TypeScript error: missing property 'message'
submitContactForm({
  email: "ex@mple.com",
});

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 https://twitter.com/mattpocockuk/status/1509964736275927042\?s\=20\&t\=sA-g5MNM5TPjN6Ozs1qxgA

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

[Thread by @USERNAME on Thread Reader App](https://threadreaderapp.com/thread/STATUS_ID.html)

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

type-fest: for 2 sections (Extending existing type, Built-in types)

Tech Twitter

Author

👤 Huynh Duc Dung

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

Stargazers

Show your support

Give a ⭐️ if this project helped you!

ttkienn/typescript-tips

Typescript Tips

🏠 Homepage

Contents

Tips

Matt Pocock

Carlos Caballero

Minko Gechev

Cory House

Tomek Sułkowski

Wes Bos

StackBlitz

Extending existing types

Built-in types

Contribute

Twitter to markdown file

Credits

Open Source

Tech Twitter

Author

Stargazers

Show your support