9 tricks that separate a pro Typescript developer from an noob

Typescript is a must-know tool if you plan to master web development in 2025, regardless of whether it's for Frontend or Backend (or Fullstack). It's one of the best tools for avoiding the pitfalls of JavaScript, but it can be a bit overwhelming for beginners. Here are 9 tricks that will kick start your journey from a noob to a pro Typescript developer! 1. Type inference Unlike what most beginners think, you don't need to define types for everything explicitly. Typescript is smart enough to infer the data types if you help narrow it down. // Basic cases const a = false; // auto-inferred to be a boolean const b = true; // auto-inferred to be a boolean const c = a || b; // auto-inferred to be a boolean // Niche cases in certain blocks 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 when the code in this case is // being executed return state + 1; case CounterActionType.IncrementBy: // TS infers that the action is IncrementByAction // & has a number as a payload when the code in this // case is being executed return state + action.payload; default: return state; } } 2. Literal types When you need a variable to hold specific values, the literal types come in handy. Consider you are building a native library that informs the user about the permissions status, you could implement it as: type PermissionStatus = "granted" | "denied" | "undetermined"; const permissionStatus: PermissionStatus = "granted"; // ✅ const permissionStatus: PermissionStatus = "random"; // ❌ Literal types are not only limited to strings, but work for numbers and booleans, too. interface UnauthenticatedUser { isAuthenticated: false; } interface AuthenticatedUser { data: { /* ... */ }; isAuthenticated: true; } type User = UnauthenticatedUser | AuthenticatedUser; const user: User = { isAuthenticated: false, }; // ✅ NOTE: To make realistic examples above, we have used Union with the literal types. You can use them as standalone types, too, but that makes them somewhat redundant (act as a type alias) type UnauthenticatedUserData = null; 3. Enums As TypeScript docs define them: Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript. Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent or create a set of distinct cases. TypeScript provides both numeric and string-based enums. You can define enums as follows: enum PrivacyStatus { Public, Private, } As an added functionality, you can also define string or number enums: enum PrivacyStatus { Public = "public", Private = "private", } By default (if unspecified), enums are mapped to numbers starting from 0. Taking the example above, the default enum values would be: enum PrivacyStatus { Public, // 0 Private, // 1 } But if we introduce a new enum value, the values of the existing enums will change too. enum PrivacyStatus { Public, // 0 OnlyWith, // 1 OnlyExcept, // 2 Private, // 3 } If you plan to store the enum values in a database, it's strongly recommended to define the values each enum should map to, instead of leaving them with the default numbers - else it's easy to run into a plethora of bugs when the list of values the enum contains changes. 4. Type guards Type guards are a way to narrow down the type of a variable. They are functions that help you to check which type a value is at runtime. // continuing from the previous example interface UnauthenticatedUser { isAuthenticated: false; } interface AuthenticatedUser { data: { /* ... */ }; isAuthenticated: true; } const isAuthenticatedUser = (user: User): user is AuthenticatedUser => user.isAuthenticated; if (isAuthenticatedUser(user)) { // user is AuthenticatedUser & you can access the data property console.log(user.data); } You can define custom type guards as per your requirement, but if you are lazy like me, try out @rnw-community/shared for some commonly used type guards such as isDefined, isEmptyString, isEmptyArray, etc 5. Index Signatures and Records When you have dynamic keys in an object, you can use an index signature or Record to define its type: enum PaticipationStatus { Joined = "JOINED", Left = "LEFT", Pending = "PENDING", } // Using index signature interface ParticipantData { [id: string]: PaticipationStatus; }

// Basic cases
const a = false;  // auto-inferred to be a boolean
const b = true;   // auto-inferred to be a boolean
const c = a || b; // auto-inferred to be a boolean

// Niche cases in certain blocks
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 when the code in this case is
      // being executed
      return state + 1;
    case CounterActionType.IncrementBy:
      // TS infers that the action is IncrementByAction
      // & has a number as a payload when the code in this
      // case is being executed
      return state + action.payload;
    default:
      return state;
 }
}

type PermissionStatus = "granted" | "denied" | "undetermined";

const permissionStatus: PermissionStatus = "granted"; // ✅
const permissionStatus: PermissionStatus = "random";  // ❌