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.

Built-in types

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

• Partial<T> - Make all properties in T optional.
• Required<T> - Make all properties in T required.
• Readonly<T> - Make all properties in T readonly.
• Pick<T, K> - From T, pick a set of properties whose keys are in the union K.
• Record<K, T> - Construct a type with a set of properties K of type T.
• Exclude<T, U> - Exclude from T those types that are assignable to U.
• Extract<T, U> - Extract from T those types that are assignable to U.
• NonNullable<T> - Exclude null and undefined from T.
• Parameters<T> - Obtain the parameters of a function type in a tuple.
• ConstructorParameters<T> - Obtain the parameters of a constructor function type in a tuple.
• ReturnType<T> - Obtain the return type of a function type.
• InstanceType<T> - Obtain the instance type of a constructor function type.
• Omit<T, K> - Constructs a type by picking all properties from T and then removing K.
• Uppercase<S extends string> - Transforms every character in a string into uppercase.
• Lowercase<S extends string> - Transforms every character in a string into lowercase.
• Capitalize<S extends string> - Transforms the first character in a string into uppercase.
• Uncapitalize<S extends string> - Transforms the first character in a string into lowercase.

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 (@[e-mail])
• 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