Author: John Au-Yeung

Sometimes, we want to get the union of the keys of a TypeScript interface.

In this article, we’ll look at how to get the union of the keys of a TypeScript interface.

How to get the keys of a TypeScript interface?

To get the union of the keys of a TypeScript interface, we can use the keyof keyword.

For instance, we write

interface Person {
  name: string;
  age: number;
  location: string;
}

type Keys = keyof Person;

to create the Keys type by setting it to keyof Person.

keyof Person returns the literal type "name" | "age" | "location".

Conclusion

To get the union of the keys of a TypeScript interface, we can use the keyof keyword.

Sometimes, we want to assert a type of an HTMLElement in TypeScript.

In this article, we’ll look at how to assert a type of an HTMLElement in TypeScript.

How to assert a type of an HTMLElement in TypeScript?

To assert a type of an HTMLElement in TypeScript, we can use brackets or use the as keyword.

For instance, we write

const script: HTMLScriptElement = <HTMLScriptElement>(
  document.getElementsByTagName("script")[0]
);

to cast document.getElementsByTagName("script")[0] to type HTMLScriptElement.

We can also write

const script: HTMLScriptElement = document.getElementsByTagName(
  "script"
)[0] as HTMLScriptElement;

to use as to cast document.getElementsByTagName("script")[0] to type HTMLScriptElement.

Conclusion

To assert a type of an HTMLElement in TypeScript, we can use brackets or use the as keyword.

Sometimes, we want to implement a TypeScript decorator.

In this article, we’ll look at how to implement a TypeScript decorator.

How to implement a TypeScript decorator?

To implement a TypeScript decorator, we should create a function that modifies an existing function and returns it.

For instance, we write

const Entity = (discriminator: string) => {
  return function (target) {
    // ...
  };
};

@Entity("cust")
export class MyCustomer {
  //...
}

to create the Entity function that returns a function.

Then we use the Entity decorator with the discriminator parameter set with the argument.

It returns a modified version of the MyCustomer class which is the function that’s being returned in Entity.

Conclusion

To implement a TypeScript decorator, we should create a function that modifies an existing function and returns it.

Sometimes, we want to extract the type of TypeScript interface property.

In this article, we’ll look at how to extract the type of TypeScript interface property.

How to extract the type of TypeScript interface property?

To extract the type of TypeScript interface property, we can use indexed access types.

For instance, we write

interface I1 {
  x: any;
}

interface I2 {
  y: {
    a: I1;
    b: I1;
    c: I1;
  };
  z: any;
}

let x: I2["y"];

to get the type of I2 interface’s y property with I2["y"].

And then we assign the returned type as the type of x.

Conclusion

To extract the type of TypeScript interface property, we can use indexed access types.

Sometimes, we want to add TypeScript types in object destructuring.

In this article, we’ll look at how to add TypeScript types in object destructuring.

How to add TypeScript types in object destructuring?

To add TypeScript types in object destructuring, we can add the type after the colon.

For instance, we write

interface User {
  name: string;
  age: number;
}

const obj: any = { name: "jane", age: 25 };
const { name, age }: User = obj;

to create the User interface.

And then we set it as the type of obj on the last line by putting User after the colon.

Then name and age will be assign the type of string and number respectively because of the type assignment.

Conclusion

To add TypeScript types in object destructuring, we can add the type after the colon.