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;

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
};

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';

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';

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';

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

• LinkedIn

• Twitter

• GitHub