5 Powerful TypeScript Tricks
Tags: typescript, javascript, learning
Published: 2024-05-25 07:55:37

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.

```typescript
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.

```typescript
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!

```typescript
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.

```typescript
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.

```typescript
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**](https://www.linkedin.com/in/sachin-chaurasiya)
    
* [**Twitter**](https://twitter.com/sachindotcom)
    
* [**GitHub**](https://github.com/Sachin-chaurasiya)