# Typescript Tips

> A curated list of awesome 🔥 TypeScript Tips 🔥

If you enjoy TypeScript and really want to use Typesafe, you can check [awesome-typesafe](https://github.com/jellydn/awesome-typesafe)

## 🏠 [Homepage](https://github.com/jellydn/typescript-tips)

### ✨ [Gitbook](https://productsway.gitbook.io/typescript-tips/)

## Contents

* [Tips](#tips)
  * [Matt Pocock](#matt-pocock)
  * [Wes Bos](#wes-bos)
  * [Erik Rasmussen](#erik-rasmussen)
  * [Carlos Caballero](#carlos-caballero)
  * [Ankita Kulkarni](#ankita-kulkarni)
  * [Minko Gechev](#minko-gechev)
  * [Cory House](#cory-house)
  * [Tomek Sułkowski](#tomek-sułkowski)
  * [Sebastien Lorber](#sebastien-lorber)
  * [Steve (Builder.io)](#steve-builderio)
  * [StackBlitz](#stackblitz)
  * [Extending existing types](#extending-existing-types)
  * [Built-in types](#built-in-types)
* [Contribute](#contribute)
  * [Twitter to markdown file](#twitter-to-markdown-file)
* [Credits](#credits)

## Tips

### Matt Pocock

* [TypeScript Tips Series](https://www.totaltypescript.com/tips)
* [LooseAutocomplete](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1506607945445949446)
* [Normal union, a discriminated union, and a type predicate](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1592130978234900484)
* [Enter satisfies()() 👀](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1536670032360611840)
* [Use Object.freeze to ensure your objects are readonly at the type level AND the runtime level](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1542079199543975937)
* [Inversion of control](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1591047557702389760)
* [Ultimate TypeScript Thread](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1509964736275927042)
* [Expose type to global with declare global](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1593584053042630657)
* [Use generics to dynamically specify the number, and type, of arguments to functions](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1509850662795989005)
* [Adding things to the global scope in TypeScript](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1590333383501979649)
* [Using 'as const' over enums](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1598708710523772929)
* [Use assertion functions inside classes](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1512388535692652547)
* [Compound Components in React are SUPER easy to type in TS](https://productsway.gitbook.io/typescript-tips/notes/mattpocockuk-1638562171863834625)

### Wes Bos

* [Four ways to define an object type in TypeScript](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1524040757518258176)
* [The difference between `any` and `unknown`](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1584905090628034560)
* [Use TypeScript's `never` for making sure you hit every scenario](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1585641232155348992)
* [Use TypeScript's `never` to enforce "one or the other" properties on a type](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1587082842110033926)
* [Type Guard in TypeScript by using the `is` keyword in a functions return type](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1585258976421224450)
* [VSCode - quickly add all properties to a typed object in TypeScript with the ts-quickfixes](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1582803702225989637)
* [VSCode - refactoring your codebase](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1583093975359315968)
* [4 TypeScript tips in context of when you would use them. as const, typeof, keyof and template string types](https://productsway.gitbook.io/typescript-tips/notes/wesbos-1615777112408866832)

### Erik Rasmussen

* [Passing around unique identifiers of objects, select the type of the identifier right off of the object type](https://productsway.gitbook.io/typescript-tips/notes/erikras-1457999235564154882)

### Carlos Caballero

* [Use look up tables instead of "if"](https://productsway.gitbook.io/typescript-tips/notes/carlillo-1591148366070747347)

### Ankita Kulkarni

* [Typescript 4.9 satisfies operator - check if the type matches one of these listed type](https://productsway.gitbook.io/typescript-tips/notes/kulkarniankita9-1594154991148597250)

### Minko Gechev

* [Enum vs const enums](https://productsway.gitbook.io/typescript-tips/notes/mgechev-1309379618034642946)
* [Use labeled tuple elements to get better hints from your text editor](https://productsway.gitbook.io/typescript-tips/notes/mgechev-1361186013029269506)
* [Use `as const` after literals](https://productsway.gitbook.io/typescript-tips/notes/mgechev-1462654597059817481)

### Cory House

* [Avoid making a property optional when the property isn’t valid in a certain case](https://productsway.gitbook.io/typescript-tips/notes/housecor-1581638360543600640)
* [Alias the type's name when conflicts with an existing identifier](https://productsway.gitbook.io/typescript-tips/notes/housecor-1586865516395876359)
* [Many optional properties are a code smell](https://productsway.gitbook.io/typescript-tips/notes/housecor-1596861970170671104)

### Tomek Sułkowski

* [Extract it from a component using the handy `ComponentProps`](https://productsway.gitbook.io/typescript-tips/notes/sulco-1160890708615716864)
* [Use `keyof` gets a union type of all properties of the given object](https://productsway.gitbook.io/typescript-tips/notes/sulco-1222507593287028736)

### Sebastien Lorber

* [No need to import DOM event handler types](https://productsway.gitbook.io/typescript-tips/notes/sebastienlorber-1512420374201446405)

### Steve (Builder.io)

* [The `satisfies` operator in TypeScript 4.9 is a game changer](https://productsway.gitbook.io/typescript-tips/notes/steve8708-1605322303319199744)

### StackBlitz

* [Infers array's type as const](https://productsway.gitbook.io/typescript-tips/notes/stackblitz-1325818478675304448)
* [How to use extends](https://productsway.gitbook.io/typescript-tips/notes/stackblitz-1328353096179789824)
* [How to use readonly](https://productsway.gitbook.io/typescript-tips/notes/stackblitz-1330890655351123968)

### Extending existing types

* [`PackageJson`](https://github.com/sindresorhus/type-fest/blob/main/source/package-json.d.ts) - 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>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype) - Make all properties in `T` optional.
* [`Required<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#requiredtype) - Make all properties in `T` required.
* [`Readonly<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#readonlytype) - Make all properties in `T` readonly.
* [`Pick<T, K>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys) - From `T`, pick a set of properties whose keys are in the union `K`.
* [`Record<K, T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) - Construct a type with a set of properties `K` of type `T`.
* [`Exclude<T, U>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion) - Exclude from `T` those types that are assignable to `U`.
* [`Extract<T, U>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#extracttype-union) - Extract from `T` those types that are assignable to `U`.
* [`NonNullable<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#nonnullabletype) - Exclude `null` and `undefined` from `T`.
* [`Parameters<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#parameterstype) - Obtain the parameters of a function type in a tuple.
* [`ConstructorParameters<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#constructorparameterstype) - Obtain the parameters of a constructor function type in a tuple.
* [`ReturnType<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype) - Obtain the return type of a function type.
* [`InstanceType<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#instancetypetype) - Obtain the instance type of a constructor function type.
* [`Omit<T, K>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) - Constructs a type by picking all properties from T and then removing K.
* [`Uppercase<S extends string>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#uppercasestringtype) - Transforms every character in a string into uppercase.
* [`Lowercase<S extends string>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#lowercasestringtype) - Transforms every character in a string into lowercase.
* [`Capitalize<S extends string>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#capitalizestringtype) - Transforms the first character in a string into uppercase.
* [`Uncapitalize<S extends string>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#uncapitalizestringtype) - Transforms the first character in a string into lowercase.

You can find some examples in the [TypeScript docs](https://www.typescriptlang.org/docs/handbook/utility-types.html).

## Contribute

Contributions welcome! Read the [contribution guidelines](https://productsway.gitbook.io/typescript-tips/docs/contributing) first.

### Twitter to markdown file

Create .envrc and fill the value then Use [tweet-to-markdown](https://github.com/kbravh/tweet-to-markdown)

```sh
# .envrc
export TTM_API_KEY=YOUR_API_KEY
```

Then run the [direnv](https://direnv.net/) command

```sh
 direnv allow .
```

And, generate markdown from a twitter url

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

Then save video if available

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

Finally, add the [Thread Reader App](https://threadreaderapp.com) at the end with below format.

```markdown
[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](https://github.com/kbravh/tweet-to-markdown/pull/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](https://github.com/sindresorhus/type-fest): for 2 sections (Extending existing type, Built-in types)
* [kbravh/tweet-to-markdown](https://github.com/kbravh/tweet-to-markdown): A command line tool to convert Tweets to Markdown.
* [jellydn/threadify-plus](https://github.com/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](https://github.com/egoist/download-twitter-video) : The easiest way to download any Twitter video

### Tech Twitter

* [Matt Pocock ✈️ Modern Frontends](https://twitter.com/mattpocockuk)
* [Wes Bos](https://twitter.com/wesbos)
* [Erik Rasmussen](https://twitter.com/erikras)
* [Carlos Caballero](https://twitter.com/Carlillo)
* [Ankita Kulkarni](https://twitter.com/kulkarniankita9)
* [Minko Gechev (@mgechev@mstdn.social)](https://twitter.com/mgechev)
* [Cory House](https://twitter.com/housecor)
* [Tomek Sułkowski](https://twitter.com/sulco)
* [Sebastien Lorber](https://twitter.com/sebastienlorber)
* [Steve (Builder.io)](https://twitter.com/Steve8708)
* [StackBlitz](https://twitter.com/StackBlitz)

## Author

👤 **Huynh Duc Dung**

* Website: <https://productsway.com/>
* Twitter: [@jellydn](https://twitter.com/jellydn)
* Github: [@jellydn](https://github.com/jellydn)

## Show your support

Give a ⭐️ if this project helped you!

[![kofi](https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge\&logo=ko-fi\&logoColor=white)](https://ko-fi.com/dunghd) [![paypal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge\&logo=paypal\&logoColor=white)](https://paypal.me/dunghd) [![buymeacoffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge\&logo=buy-me-a-coffee\&logoColor=black)](https://www.buymeacoffee.com/dunghd)

### Stargazers over time

[![Stargazers over time](https://starchart.cc/jellydn/typescript-tips.svg)](https://starchart.cc/jellydn/typescript-tips)