operator Keyword in Typescript

by

Do you want to know about the operator keyword in Typescript? In this Typescript tutorial, I will explain how to use the operator keyword in Typescript. We will explore the concept of the Operator keyword in TypeScript, its uses, and some practical examples.

The Operator keyword in TypeScript, while not explicitly defined, refers to using operators within types for advanced type manipulations, such as conditional types, mapped types, and key remapping in mapped types. These features allow for dynamic and precise type definitions, enhancing type safety and code maintainability in TypeScript applications. For example, conditional types enable type checking based on conditions, mapped types allow for the transformation of existing types, and key remapping facilitates dynamic property renaming.

What is the Operator Keyword in Typescript?

In TypeScript, the Operator keyword is often used in the context of utility types and advanced type manipulations. TypeScript doesn’t have an Operator keyword per se, but it allows for the use of operators in types, such as conditional types, mapped types, and key remapping in mapped types.

How to use Operator Keyword in Typescript?

Now, let us see how to use the operator keyword in Typescript.

Conditional Types

Conditional types in TypeScript allow you to define a type based on a condition. It’s similar to ternary operators in JavaScript but used in the type system.

Example:

type Check<T> = T extends string ? 'String' : 'Not a string';

// Usage
type Type1 = Check<string>;  // Type1 is 'String'
type Type2 = Check<number>;  // Type2 is 'Not a string'

In this example, Check is a conditional type that checks whether a type T extends string. If it does, the type becomes ‘String’, otherwise ‘Not a string’.

Mapped Types

Mapped types allow you to take an existing type and transform each of its properties into a new type.

Example:

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

// Usage
interface Person {
    name: string;
    age: number;
}

type ReadOnlyPerson = ReadOnly<Person>;

In this example, ReadOnly is a mapped type that iterates over all properties of type T and makes them read-only.

Key Remapping in Mapped Types

With TypeScript 4.1, you can remap keys in mapped types using the as clause.

Example:

type MappedWithNewKeys<T> = {
    [P in keyof T as `new${Capitalize<string & P>}`]: T[P]
}

// Usage
interface Person {
    name: string;
    age: number;
}

type PersonWithNewKeys = MappedWithNewKeys<Person>;
// PersonWithNewKeys is { newName: string; newAge: number; }

This example shows how to prepend new to each key of the Person type.

Conclusion

Although TypeScript doesn’t have an Operator keyword explicitly, the language’s powerful type system, with features like conditional types, mapped types, and key remapping, effectively serves the same purpose. These features provide a level of dynamism and precision in type manipulation, proving invaluable in developing large-scale, robust applications.

You may also like:

>