View profile

All Things Typescript Newsletter - Issue #4

Maina Wycliffe
Maina Wycliffe
Good morning and welcome to another issue of All Things Typescript. I apologize for not being able to publish last week, as I had a lot on my hand and couldn’t find enough time to work on the content for a full issue. This issue will cover the last two weeks of articles and tweets. Hopefully, you will find this issue very illuminating, and feel free to share it with friends and colleagues.

This issue is divided into the following sections:
  • This Weeks Lesson - This is new and hopefully you will find this section very useful.
  • Weekly Challenge - This is also new and will pose challenges that will be answered in the next issue, subscribe to stay updated.
  • Courses, Articles, and Tweets - This is a list of courses, articles, and tweets from other authors and experts in the field
This Weeks Lesson - Utility Types
In the last issue, I promised to start including lessons in my issues. This week, we will start with something that I really find useful in my day-to-day activities.
These are Utility Types, they help use create types from other types by transforming them. We will look at a few Utility Types in this issue that are useful and then you can continue the process of learning by reading them on the Typescript docs.
Partial Utility Type
This utility type marks all the top levels of an object as optional, allowing you to make a new type with optional fields instead. Please note this works only with top levels and doesn’t apply nested fields:
For instance, if we had the following type:
type Person = {
    name: string;
    age: string;
}
We can make the fields optional using the Partial<T> as shown below:
type PartialPerson = Partial<Person>
And this will result in a type similar to this:
type Person = {
    name?: string;
    age?: string;
}
Required<T> Utility Type
This is the opposite of the above utility type in that it makes all top-level fields that are optional, required. If we had the following type of Person, with age being an optional field:
type Person = {
    name: string;
    age?: string;
}
We can make it required by using the Required<T> utility Type as shown below:
type NewPerson = Required<Person>
And this will result in a Type similar to the one below, with age being a required field:
type NewPerson = {
    name: string;
    age: string;
}
Omit<T> Utility Type
Once in a while, I usually need to create a new type from an existing type by removing some of its fields. The Omit<T> utility type enables me to do this. If we continue with our type of Person above, with name and ages:
type Person = {
    name: string;
    age: string;
}
We can create a new Type from the above with just the name field, by omitting age as shown below:
type NewPerson = Omit<Person, "age">
This will result in a type similar to the following:
type NewPerson = {
    name: string;
}
Pick<T> Utility Type
This utility type operates the opposite of the above utility, by picking the fields you want instead of omitting them. If took the Person type above, we can create a new type by Picking age instead of omitting it.
type Person = {
    name: string;
    age: string;
}
Then, using the Pick<T> utility type, we can pick the fields we are interested in, in this case, age.
type NewPerson = Pick<Person, "age">
And this will result in a type similar to the following:
type Person = {
    age: string;
}
Challenge
In the above section, we took a pick into the Utility types and how to use them, this week, I have two challenges for you.
Challenge 1:
In this challenge, I want you to go through typescript docs on Utility types and learn more about Utility Types and how to use them. Focus on the Record<Keys, Type> and the various ways you can use to help you to make object types more type-safe.
Challenge 2:
This is a little bit more involving but we constitute the lesson for next week. How do Utility types work under the hood and how can you create your own custom utility types?
We will answer the above challenges in the next issue, which will ship on Monday. If you have any questions, ideas, or suggestions please feel free to reach out to me on Twitter - @mwycliffe_dev.
That’s it for the lesson and challenge sections, below are a number of courses, articles, and tweets to help you improve your Typescript skills and knowledge.
Courses
How to Use TypeScript – Beginner-Friendly TS Tutorial
Top Articles
How to use type guards in TypeScript
Top Tweets
Michael Hoffmann
💡 TypeScript Tip:

Make every property of an interface required using the <Required> utility type https://t.co/qeL0gzey6N
Decoded Frontend (Dmytro Mezhenskyi)
Frontend Snack #5💡 #TypeScript 4.3 introduces a new "override" keyword that allows you explicitly indicate that you override some specific method from the parent class. #webdevelopment #angular #ReactJS #VueJS #js #FrontEndDevelopment https://t.co/OgBoCSBWbF
Matt Pocock
🔥 TypeScript Tip #11 🔥

Deep partials are SUPER useful and not natively supported by TypeScript. Here, I use one to help with mocking an entity in a (imaginary) test file. https://t.co/jgKkwTzSKL
Matt Pocock
🔥 TypeScript Tip #13 🔥

Want to turn a module into a type? You can use typeof import('./') to grab the type of any module, even third-party ones.

Here, we create a type from a constants.ts file, then map over the values to create a union. https://t.co/NjUzh3AYnq
Michael Hoffmann
💡 JavaScript Tip:

Destructure array to get elements

👉🏻 length: the size of the array
👉🏻 0: the first element in the array
👉🏻 [length-1]: computed property for the last element in the array https://t.co/OoSxA7Damr
Matt Pocock
@GavinRayDev 🤯 CORRECTION ALERT 🤯

I got a correction on the above tweet that proved to be just as fascinating as the original tweet:

Turns out string & {} is very powerful for preventing a member of a union from expanding across the rest of the union. Crazy stuff.

Thanks @eddyw_dev! https://t.co/h94g5lKKUM
Conclusion
I hope you found this issue very illuminating, do not forget to subscribe if you haven’t and share with your friends and colleagues. See you next week and until then, keep on learning.
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.