> For the complete documentation index, see [llms.txt](https://productsway.gitbook.io/typescript-tips/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://productsway.gitbook.io/typescript-tips/readme.md).

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

### Wes Bos

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

### Erik Rasmussen

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

### Carlos Caballero

* [Use look up tables instead of "if"](/typescript-tips/notes/carlillo-1591148366070747347.md)

### Ankita Kulkarni

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

### Minko Gechev

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

### Cory House

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

### Tomek Sułkowski

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

### Sebastien Lorber

* [No need to import DOM event handler types](/typescript-tips/notes/sebastienlorber-1512420374201446405.md)

### Steve (Builder.io)

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

### StackBlitz

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

### 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](/typescript-tips/docs/contributing.md) 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://productsway.gitbook.io/typescript-tips/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.