DEV Community

Cover image for Unveiling 10 TypeScript Techniques Employed by Professionals

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;

Enter fullscreen mode Exit fullscreen mode
  • 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';

Enter fullscreen mode Exit fullscreen mode
  • 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();

Enter fullscreen mode Exit fullscreen mode
  • 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];
};

Enter fullscreen mode Exit fullscreen mode
  • 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";

Enter fullscreen mode Exit fullscreen mode
  • 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
}

Enter fullscreen mode Exit fullscreen mode
  • 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,
}

Enter fullscreen mode Exit fullscreen mode
  • 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;
}

Enter fullscreen mode Exit fullscreen mode
  • 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' ...
}

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)