Unveiling 10 TypeScript Techniques Employed by Professionals

TypeScript, a statically typed superset of JavaScript, has become a go-to language for many developers. Its ability to catch errors during development rather than at runtime is a game-changer. Professionals use ten secret TypeScript techniques to enhance their coding efficiency.

• Type Assertion: Type assertion is a way To assure the compiler that one is knowledgeable and capable; one may say, "Have faith in me; I know what I am doing." It's a way of specifying the specific type of value.

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// or
let strLength: number = (someValue as string).length;

• Nullish Coalescing: The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

let input = undefined;
let storedValue = input ?? 'Default Value';

• Optional Chaining: Optional chaining allows you to write code where TypeScript can immediately stop running some expressions if it runs into a null or undefined.

let x = foo?.bar.baz();

• Mapped Types: With mapped types, it is possible to generate fresh types using existing ones. Ones by transforming properties.

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

• Conditional Types: Conditional types can create a type resulting from a condition. It selects one of two possible types based on a condition expressed as a type relationship test.

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

• Utility Types:
  Globally available in TypeScript are
  utility types that make common type transformations easier to
  handle.

• Type Guards:
  Type guards are a way to narrow down the
  type of object within a conditional block.
  

if (typeof someVariable === "string") {
    // In this block, someVariable is of type string
    console.log(someVariable.length); // OK
}

• Enums: Enums or enumerations are a new data type supported in TypeScript. They are used to store a collection of related values.

enum Direction {
    Up = 1,
    Down,
    Left,
    Right,
}

• Generics: Generics provide a way to make components work with any data type and are not restricted to one data type.

function identity<T>(arg: T): T {
    return arg;
}

• Decorators: Decorators are a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

function sealed(target) {
    // do something with 'target' ...
}

These are just a few of the many powerful features and tricks that TypeScript offers. As you continue to explore and use TypeScript, you'll undoubtedly discover even more ways to improve your code and make it more robust and maintainable. Happy coding!

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal

I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!