Things I Wish I Knew When Starting TypeScript

When beginning to use TypeScript, one might mistakenly believe it's merely JavaScript with type annotations. However, the true challenge lies in mastering the thinking behind types. Here are some valuable insights I wish I had known when starting TypeScript:

1. Not everything requires explicit typing. I initially tried annotating every variable, but TypeScript can often infer types on its own. For instance, instead of writing const name: string = 'John';, you can simply use const name = 'John';. This approach emphasizes writing code that provides useful information through types, rather than simply adding as many type annotations as possible.

2. The 'any' type should be used sparingly. When TypeScript flags an error, the instinct might be to resort to any as a solution. However, this approach negates many of TypeScript's benefits. For example, instead of const user: any = data;, it's better to describe the expected type more precisely: type User = { name: string; age: number; }; function getUser(user: User) { return user.name; }. This allows TypeScript to assist in ensuring the correct usage of the variable.

3. Types serve as documentation. A well-defined type can explain code without the need for comments. For instance, comparing function updateUser(user: any, options: any) { // ... } to type User = { id: string; name: string; email: string; }; type UpdateUserOptions = { name?: string; email?: string; }; function updateUser(user: User, options: UpdateUserOptions) { // ... } demonstrates how types become part of the API for your code, aiding comprehension and facilitating teamwork.

4. Understand types and interfaces, but avoid overcomplicating them. Initially, I spent excessive time deciding between using type or interface in TypeScript. The key is to learn both and understand their differences. For most frontend scenarios, either option works well. For example, both type User = { id: string; name: string; }; and interface User { id: string; name: string; } describe an object with the same structure.

While there are subtle differences, particularly around declaration merging and extending types, you do not need to memorize every detail before starting a project. Begin coding and you will quickly discover when the differences matter.

5. Unions are a powerful feature. One of my favorite aspects of TypeScript is the ability to define union types. For example, type Status = 'loading' | 'success' | 'error'; allows you to assign 'loading' to a variable of type Status. This becomes particularly useful in frontend applications, such as defining RequestState = | { status: 'loading' } | { status: 'success'; data: User[] } | { status: 'error'; message: string }; This enables more precise handling of different states and data structures within your application.