TS Tip 💁‍♂️ Avoid the boilerplate with `typeof`

Madyan — Fri, 14 Aug 2020 19:07:34 +0000

TLDR 😎

// Detect dark theme var iframe = document.getElementById('tweet-1292936831114387456-219'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1292936831114387456&theme=dark" }

What issue are we solving here? 🤔

We all love TypeScript because it allows us to declare and enforce certain contracts for our types. E.g.

interface User {
  devCommunityUsername: string
  awesomenessLevel: number
}

Now we can reuse this type everywhere the User object is expected:

function iAmExpectingAUserHere(user: User) {
  // now I can safely access user.awesomenessLevel 🤩
}

However, there are instances where you have a huge object that you declare only once like:

const config = {
  username: 'Me',
  password: 'TheyAreWatching 😱',
  ... // imagine many more properties here
}

Say you want to reference the type of this object. However, you don't want to declare a type explicitly as it'll lead into duplication, and with duplication comes maintenance cost (e.g. every time you add a property you need to declare it for the sake of using it in this single instance 😒)

Solution: type inference to the rescue 🦸‍♀️

Turns out TypeScript has a special keyword to automatically infer the type of an existing object, which is exactly what we need here!

// use `typeof`
type Config = typeof config

// this is the same as:
type Config = {
  username: string
  password: string
  ...
}

// you can use it like 🤘
function doSomething(config: Config) { ... }

Looking for more TS tips? 👇

I've recently started tweeting daily tips like the one above. If you've enjoyed it and want to continue learning, follow me for more TypeScript tips ✨

Enjoying TypeScript? Bring it to your DevTools 👩‍💻

Madyan — Wed, 05 Aug 2020 20:44:52 +0000

As web developers, TypeScript has revolutionised our development experience. It helped us catch bugs as we type our code, provided us with rich auto-completions allowing us to discover public interfaces of objects without having to read their source code and overall just made the JavaScript development experience much more fun! 🥳

We tend to spend the majority of our time as developers in our IDEs, which is great since it is where TypeScript excels. However, TypeScript is yet to come to our second homes as web devs, our browsers DevTools 😢

Have you ever tried writing a quick script in your browser's console to manipulate a page? It might have been some experimental code, or perhaps it was a bookmarklet to automate a task? Have you started writing code like this and wished you can get validation ahead of time rather than by trial and error?

JSON.stringify(
  myAwesomeObject,
  2, // which argument was the spacing one again?
)

Well I don't know about you, but I'm not patient enough to wait until Google supports TypeScript in their DevTools, so I've decided to take things into my own hands and build an Open Source Chrome Extension 🙌

This is still experimental, but you can try it out now by downloading it from the Chrome Web Store 👈

Lastly, this is on Open Source project. Hence it wouldn't be awesome without the community's input and contributions. Please submit issues and/or PRs on GitHub to help improve the experience for yourself and other devs 🙏

madyanalj / console-plus

💻 Chrome DevTools extension that allows running TypeScript code from the browser.

Console+

Chrome extension which allows developers to run TypeScript code right from their browsers 💻

🗃 Download from the Chrome Web Store

Stack

Development

Install dependencies using:
```
npm install
```
Run the following to generate the Chrome Extension in /dist:
```
npm run build
```
Go to chrome://extensions/ and ensure "Developer mode" is on.
Click on "Load unpacked" and select the /dist directory.
To make further changes, run npm run build again then click on "Update".

Contribution

Issues and Pull Requests are more than welcome.

View on GitHub

DEV Community: Madyan