DEV Community

Cover image for 5 Powerful TypeScript Tricks
Sachin Chaurasiya
Sachin Chaurasiya

Posted on

5 Powerful TypeScript Tricks

Unlock the full potential of TypeScript with these five powerful tricks that will improve your coding skills. From securing your types with const assertions to mastering the keyof operator, these tips will help you write cleaner, more efficient code.

Locking Down Your Types with const Assertions

Ever wanted to make sure your types stay the same throughout your code? That's where const assertions come in handy! Think of them as superglue for your types. When you use as const, TypeScript ensures nothing changes your types later on. It's like putting a "Do Not Touch" sign on your variables to keep them safe.

const user = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
} as const;

type User = typeof user;

// This will cause a TypeScript error
// user.id = 2;
Enter fullscreen mode Exit fullscreen mode

Creating Custom Types with Pick

Imagine you have a large type, but you only need a few parts of it. No problem! With the Pick trick, you can create a new type that selects only what you need. It's like customizing your order at a restaurant – you get exactly what you want, without any extra stuff.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

const summary: UserSummary = {
  name: user.name,
  email: user.email
};
Enter fullscreen mode Exit fullscreen mode

Narrowing Down Your Options with Extract

Ever had a lot of choices but only needed a few specific ones? That's where Extract helps! It's like a magic wand that picks out exactly what you need from a list of options. Say goodbye to guesswork and hello to precision!

type Fruit = 'apple' | 'banana' | 'cherry' | 'date';
type TropicalFruit = Extract<Fruit, 'banana' | 'date'>;

const myFruit: TropicalFruit = 'banana'; // Valid
// This will cause a TypeScript error
// const myFruit: TropicalFruit = 'apple';
Enter fullscreen mode Exit fullscreen mode

Keeping Things Safe and Sound with Readonly

Imagine you have some important data that should never change. That's where Readonly comes in! It's like putting your data in a secure vault with a strong lock. Once you make something Readonly, no one can change it.

const fruits: ReadonlyArray<string> = ['apple', 'banana', 'cherry'];

// This will cause a TypeScript error
// fruits.push('date');

// This will also cause a TypeScript error
// fruits[1] = 'blueberry';
Enter fullscreen mode Exit fullscreen mode

Mastering the keyof Operator

Ever wanted to find out what keys are in an object? Meet keyof – your helpful tool! It shows you all the keys in an object, making it easier to work with your data.

interface User {
  id: number;
  name: string;
  email: string;
}

type UserKey = keyof User;

const key: UserKey = 'name'; // Valid
// This will cause a TypeScript error
// const invalidKey: UserKey = 'age';
Enter fullscreen mode Exit fullscreen mode

Conclusion

Unlock the full power of TypeScript with five simple tricks: use const assertions to lock your types, create custom types with Pick, narrow down choices with Extract, protect data with Readonly, and use the keyof operator to easily work with object keys. These tips will help you write cleaner and more efficient code.

That's all for this topic. Thank you for reading! If you found this article helpful, please consider liking, commenting, and sharing it with others.

Connect with me

Top comments (2)

Collapse
 
snaildarter profile image
Neal

I feel that your article is great. Without your permission, I translated it into Chinese and published it. If it offends you, I will understand the deletion.

Collapse
 
sachinchaurasiya profile image
Sachin Chaurasiya

Thanks @snaildarter, my main objective is to share knowledge. I saw your article and it has a link to the original article, so no need to worry.