All Things Typescript Newsletter - Issue #5
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:
Required<T>Readonly<T>
Announcements
Announcing TypeScript 4.7 Beta - TypeScript
Today we are excited to announce the beta release of TypeScript 4.7! To get started using the beta, you can use npm with the following command: npm install [email protected] You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code and Sublime Text 3.
Top Articles
The Type System Every Programmer Should Know
This article will introduce those parts that cannot be ignored in various programming languages — the type system.
Secrets of ‘unknown’ Types in TypeScript
This post will introduce the unknown type in TypeScript, which was introduced in TypeScript 3.0 and is the type-safe counterpart of any. Why do I say this? Next, I will show the characteristics of unknown type and its advantages compared with any, let’s get started!
Essential VS Code extensions for TypeScript
TypeScript has classes, interfaces, and modules that can be useful to define types. It’s always a good practice to use TypeScript with JavaScript. If you’re using VS Code for writing code, then it has rich extensions to help configure and use TypeScript easily.
The definitive guide to typing functions in TypeScript
JavaScript is one of the world’s most popular programming languages, and the language of the web. However, because it’s not strongly typed, there is a possibility of introducing bugs into our code inadvertently. This is where TypeScript comes in.
Say ‘Yes’ to Yup (and Middy) — Simple Schema Validation for Node.js Lambda Handlers | by Netanel Basal | Apr, 2022 | Netanel Basal
Client-side validation can prevent redundant requests to the server and provide immediate feedback to the user. Unfortunately, we can’t trust users’ input because they can easily bypass the client…
Prevent the introduction of known vulnerabilities into your code
Understanding your supply chain is critical to maintaining the security of your software.