7 Secret TypeScript Tricks Pros Use 😎🤫
Tags: webdev, javascript, typescript, productivity
Published: 2023-05-14 06:15:36

**TypeScript** is an outstanding tool to make our lives easier & avoiding **bugs**, yet sometimes feels overwhelming to use.

![overwhelm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr4etox7q6ywsru1v1lu.gif)

This article outlines 7 **TypeScript** tricks that will make your life easier which all pros use.

## 1. Type Inference

**Typescript** is smart enough to **infer the data types** when you help it narrow them down.

```ts
enum CounterActionType {
  Increment = "INCREMENT",
  IncrementBy = "INCREMENT_BY",
}

interface IncrementAction {
  type: CounterActionType.Increment;
}

interface IncrementByAction {
  type: CounterActionType.IncrementBy;
  payload: number;
}

type CounterAction =
  | IncrementAction
  | IncrementByAction;

function reducer(state: number, action: CounterAction) {
  switch (action.type) {
    case CounterActionType.Increment:
      // TS infers that the action is IncrementAction
      // & has no payload
      return state + 1;
    case CounterActionType.IncrementBy:
      // TS infers that the action is IncrementByAction
      // & has a number as a payload
      return state + action.payload;
    default:
      return state;
  }
}
```

As shown above, **TypeScript** infers the type of the action based on the `type` property, so you DON'T need to check whether `payload` exists.

## 2. Literal Types

Often you need specific values for a variable, that's where **literal types** come in handy.

```ts
type Status = "idle" | "loading" | "success" | "error";
```

It works for numbers too:

```ts
type Review = 1 | 2 | 3 | 4 | 5;

// or better yet:
const reviewMap = {
  terrible: 1,
  average: 2,
  good: 3,
  great: 4,
  incredible: 5,
} as const;

// This will generate the same type as above,
// but it's much more maintainable
type Review = typeof reviewMap[keyof typeof reviewMap];
```

## 3. Type Guards

**Type guards** are another method to narrow down the type of a variable:

```ts
function isNumber(value: any): value is number {
  return typeof value === "number";
}

const validateAge = (age: any) => {
  if (isNumber(age)) {
    // validation logic
    // ...
  } else {
    console.error("The age must be a number");
  }
};
```

NOTE: In the example above, it's better to use:

```ts
const validateAge = (age: number) => {
  // ...
};
```

The example was a simplification to show how **type guards** work.

## 4. Index Signature

When you have **dynamic keys** in an object, you can use an **index signature** to define its type:

```ts
enum PaticipationStatus {
  Joined = "JOINED",
  Left = "LEFT",
  Pending = "PENDING",
}

interface ParticipantData {
  [id: string]: PaticipationStatus;
}

const participants: ParticipantData = {
  id1: PaticipationStatus.Joined,
  id2: PaticipationStatus.Left,
  id3: PaticipationStatus.Pending,
  // ...
};
```

## 5. Generics

**Generics** are a powerful tool to make your code more reusable. It allows you to **define a type that will be determined by the use of your function**.

In the following example, `T` is a Generic type:

```ts
const clone = <T>(object: T) => {
  const clonedObject: T = JSON.parse(JSON.stringify(object));
  return clonedObject;
};

const obj = {
  a: 1,
  b: {
    c: 3,
  },
};

const obj2 = clone(obj);
```

## 6. Immutable Types

You can make your types **immutable** by adding `as const`. This ensures that you don't end up accidentally changing the values.

```ts
const ErrorMessages = {
  InvalidEmail: "Invalid email",
  InvalidPassword: "Invalid password",
  // ...
} as const;

// This will throw an error
ErrorMessages.InvalidEmail = "New error message";
```

## 7. Partial, Pick, Omit & Required Types

Often while working with **server** & **local data**, you need to make some properties **optional** or **required**.

Instead of defining hundreds of interfaces with slightly altered versions of the same data. You can do that using `Partial`, `Pick`, `Omit` & `Required` types.

```ts
interface User {
  name: string;
  age?: number;
  email: string;
}

type PartialUser = Partial<User>;
type PickUser = Pick<User, "name" | "age">;
type OmitUser = Omit<User, "age">;
type RequiredUser = Required<User>;

// PartialUser is equivalent to:
// interface PartialUser {
//   name?: string;
//   age?: number;
//   email?: string;
// }

// PickUser is equivalent to:
// interface PickUser {
//   name: string;
//   age?: number;
// }

// OmitUser is equivalent to:
// interface OmitUser {
//   name: string;
//   email: string;
// }

// RequiredUser is equivalent to:
// interface RequiredUser {
//   name: string;
//   age: number;
//   email: string;
// }
```

And of course, you can use **intersection** to combine them:

```ts
type A = B & C;
```

Where `B` & `C` are any types.

**That's all folks! 🎉**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Resources used

1. [Freepik](https://www.freepik.com/free-photo/positive-young-woman-sunglasses_5980887.htm)
2. [Giphy](https://giphy.com/gifs/hyperxgaming-what-hyperx-rain-man-d8isjk1UBPFTm0EBbd)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **bi-weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

   1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
   2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.