TypeScript is an outstanding tool to make our lives easier & avoiding bugs, yet sometimes feels overwhelming to use.
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.
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.
type Status = "idle" | "loading" | "success" | "error";
It works for numbers too:
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:
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:
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:
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:
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.
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.
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:
type A = B & C;
Where B & C are any types.
That's all folks! 🎉
Resources used
Thanks for reading
Need a Top Rated Software Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
Follow my blogs for bi-weekly new Tidbits on Medium
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Latest comments (23)
The
as constthing is also not really correct. If you don't want to be able to mutate properties you should usereadonlybefore each property.as constis used to produce compile-time constants, for example to allow you to map names to string literals at compile time.Great
Nice
Thank you for these tips. Especially the Partial, Pick, Omit & Required Types help me, as I only knew
Partial<>, but I have a usecase for the other ones too.I think the second one is more about mapped value?
Great article and excellent tips.
Some of them are very useful.
I've created a repo to test out the above tips & tricks on my local machine. It is public if anyone wants to clone the repo and tests the tricks that Tapajyoti Bose shared with us.
github.com/Yiannistaos/learning-ty...
Enum is considered bad practice.
It's more flexible to use a const:
Really nice list!! Thank you!!
Thanks, this was very helpful.
Thanks, this was very helpful.