View profile

All Things Typescript Newsletter - Issue #5

Maina Wycliffe
Maina Wycliffe
Hey fellow Typescript wizards, I hope you had a great weekend. In the last week, Typescript 4.7 Beta was announced, with some new exciting features; please check out the official announcement in the Announcements section below.
I will answer two of the challenges I set last week in this issue. I am still struggling with the best format for this, and I hope soon I might be able to switch to short video content, about 2 - 3 minutes, instead of writing down.
I hope you will enjoy the current issue and as always, if you have any suggestions, comments, or questions, feel free to reach out to me on Twitter - @mwycliffe_dev; my DMs are open.

Answer to Last Week Challenges
Challenge 1: Different Uses of the Record<Keys, Type> Utility Types
There are a number of ways you can use Record<Keys, Type> Utility types. One of the common ways I use this is to create a strongly typed object or key-value map in Typescript. For instance, if we had an object, whose keys were strings and values were strings or numbers, we could do it like this:
type Obj = Record<string, number | string>;
Then we can use it as follows:
const obj : Obj = {
    "key1": "string is valid",
    "key2": 1,
}
If we were to assign the wrong type of value, we would get the following error:
const obj : Obj = {
    "key3": false, // Type 'boolean' is not assignable to type 'string | number'.
}
We can do some cool stuff with Record, like using a Union to restrict the number of properties an object can take and also the values each can have. For instance, if we had a Switch union - type Switch = "On" | "Off", we could create an object that accepts only two keys "On" or Off and the values of each of those two keys can only be On or Off.
type Obj = Record<Switch, Switch>;
Usage:
const obj : Obj = {
    "On": "On",
    "Off": "Off",
}
I hope this inspires you on how you can utilize the Record<Keys, Type> Utility Types.
Challenge 2: Building a Customer Partial<T> Utility Type
In the second challenge, I asked you to think about how you can create a clone of the Partial<T> utility type. To achieve this, we will start by defining a PartialClone type that accepts a generic type parameter T.
We can then constrain the types that are passed in to prevent types that don’t have keys and values from being passed in for instance strings and numbers. In my simple partial clone, I am using the Record<Keys, Type> for the type constraint, which you can learn more about here.
type PartialClone<T extends Record<string | number, unknown>> = {
    // content here
}
Next, we need to mark all keys inside the Type passed in as optional, by adding a question mark next to the keys of the type.
type PartialClone<T extends Record<string | number, unknown>> = {
    [KeyType in keyof T]?: T[KeyType];
}
We are using keyof type operator to get the keys in the Type passed in and then for each, adding a question mark to make it optional. And that’s it, we now have a very simple clone of the Partial<T> Utility Type. We can use it just like the built-in one.
type Person = {
    name: string;
    age: number;
}
type PartialPerson = PartialClone<Person>;
You can find the above example here in Typescript playground. If you are interested in taking this further, you can think of you can create clones of the following utility Types which are similar in nature:
  1. Required<T>
  2. Readonly<T>
Announcements
Announcing TypeScript 4.7 Beta - TypeScript
Top Articles
The Type System Every Programmer Should Know
Tweets
Simon Høiberg
TypeScript Tip 💡

️Did you know?
You can assign field variables inline using TypeScript ✌️ https://t.co/QQAg2mWrh2
Matt Pocock
🔥 TypeScript Tip #18 🔥

You can do some really, really neat stuff with assertion functions inside classes.

Here, we assert that the user is logged in and get proper inference on the user's logged in user id. https://t.co/4XmfKsrsTe
Coner Murphy
Web Developer Quiz: Q43 ❓

In today's question, we're looking at TypeScript and a possible scenario. Why would this cause a TS error and how do you resolve it?

Check out the question, and share your answer below. 💬

The correct answer will be shared tomorrow morning. ⏰ https://t.co/47YQJN9JYq
Ben Lesh 👈😎👈
I've run across this pattern for enums in TypeScript, and it seems weirdly better than the actual enums?

And WEIRDER: The output is smaller?! https://t.co/xNU1MIlSJj
🇺🇦 Oliver Jumpertz
💛 TypeScript explained 💛

Interfaces are a way to define the structure of objects in TypeScript.

You can use them to explicitly type function parameters, variables, and function return types. ↓ https://t.co/dzDFaSi4KN
Mini Bhati
💡 TIL about the Pick Utility type in #Typescript

Pick<Type, Keys> constructs a type by picking a set of properties specified in Keys from Type.

It is useful in creating types that are based on some other types but with a few properties removed. https://t.co/dT0mqqRNVa
Did you enjoy this issue? Yes No
Maina Wycliffe
Maina Wycliffe @mwycliffe_dev

Hand-picked typescript and related content on a weekly basis to help you improve your skills and knowledge.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.