Author: John Au-Yeung

Sometimes, we want to derive union type from tuple or array values with TypeScript.

In this article, we’ll look at how to derive union type from tuple or array values with TypeScript.

How to derive union type from tuple or array values with TypeScript?

To derive union type from tuple or array values with TypeScript, we can use the typeof operator.

For instance, we write

const list = ["a", "b", "c"] as const;
type UnionType = typeof list[number];

to create the list array with some values inside.

Then we use the list to create a union type of the list values with typeof list[number].

And we assign that to UnionType.

Therefore, any UnionType variable must be set to value 'a', 'b', or 'c'.

Conclusion

To derive union type from tuple or array values with TypeScript, we can use the typeof operator.

Sometimes, we want to fix the ‘tsc command not found’ error when compiling TypeScript.

In this article, we’ll look at how to fix the ‘tsc command not found’ error when compiling TypeScript.

How to fix the ‘tsc command not found’ error when compiling TypeScript?

To fix the ‘tsc command not found’ error when compiling TypeScript, we can run tsc without installing it with npx.

To run it, we run

npx tsc app.ts

in our project folder.

npx runs tsc directly from the online package source without installing the package.

Conclusion

To fix the ‘tsc command not found’ error when compiling TypeScript, we can run tsc without installing it with npx.

Sometimes, we want to fix the "TypeScript error: Property ‘X’ does not exist on type ‘Window’" error.

In this article, we’ll look at how to fix the "TypeScript error: Property ‘X’ does not exist on type ‘Window’" error.

How to fix the "TypeScript error: Property ‘X’ does not exist on type ‘Window’" error?

To fix the "TypeScript error: Property ‘X’ does not exist on type ‘Window’" error, we add the window property we added into the type definition.

For instance, we write

declare global {
  interface Window {
    FB: any;
  }
}

to declare the Window interface which has the FB property.

Then we can use window.FB in our app without errors by writing

let FB = window.FB;

Conclusion

To fix the "TypeScript error: Property ‘X’ does not exist on type ‘Window’" error, we add the window property we added into the type definition.

To require one of two properties to exist in a TypeScript interface, we can combine multiple interfaces with the | operator, which create a union type.

For instance, we write

export interface BaseMenuItem {
  title: string;
  icon: string;
}

export interface ComponentMenuItem extends BaseMenuItem {
  component: any;
}

export interface ClickMenuItem extends BaseMenuItem {
  click: any;
}

export type MenuItem = ComponentMenuItem | ClickMenuItem;

to create a union type between ComponentMenuItem and ClickMenuItem and assign it to the MenuItem type.

In ComponentMenuItem and ClickMenuItem, there’s one extra property and inherits the rest from BaseMenuItem.

Therefore a variable with type MenuItem has either the component or click property in addition to the properties in BaseMenuItem.

Sometimes, we want to create a function that accept an unlimited number of arguments with TypeScript.

In this article, we’ll look at how to create a function that accept an unlimited number of arguments with TypeScript.

How to create a function that accept an unlimited number of arguments with TypeScript?

To create a function that accept an unlimited number of arguments with TypeScript, we can use the rest syntax.

For instance, we write

const sum = (...nums: number[]): number => {
  return nums.reduce((a, b) => a + b, 0);
};

to create the sum function that accepts an unlimited arguments by using the ... rest operator before nums.

nums is an array of numbers and it has all the arguments that we passed into it.

We set the nums parameter to number[] to make the type explicit.

Conclusion

To create a function that accept an unlimited number of arguments with TypeScript, we can use the rest syntax.