Category: TypeScript

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.

Sometimes, we want to fix the ‘cannot redeclare block scoped variable’ error with TypeScript.

In this article, we’ll look at how to fix the ‘cannot redeclare block scoped variable’ error with TypeScript.

How to fix the ‘cannot redeclare block scoped variable’ error with TypeScript?

To fix the ‘cannot redeclare block scoped variable’ error with TypeScript, we should make sure we didn’t declare the same variable more than once.

For instance, if we write

import * as co from "./co";
const co = 1;

then we’ll get the ‘cannot redeclare block scoped variable’ error since we import a module and set its value to co and we also declared the co variable and set it to 1.

So we declared the same variable twice.

Likewise, we shouldn’t write

let co = 1;
const co = 1;

to declare a variable twice.

Conclusion

To fix the ‘cannot redeclare block scoped variable’ error with TypeScript, we should make sure we didn’t declare the same variable more than once.

Sometimes, we want to disable a TypeScript rule for a specific line.

In this article, we’ll look at how to disable a TypeScript rule for a specific line.

How to disable a TypeScript rule for a specific line?

To disable a TypeScript rule for a specific line, we can add a @ts-ignore comment.

For instance, we write

if (false) {
  // @ts-ignore: Unreachable code error
  console.log("hello");
}

to add the

// @ts-ignore: Unreachable code error

comment so the TypeScript compiler will ignore the unreachable compiler error.

Conclusion

To disable a TypeScript rule for a specific line, we can add a @ts-ignore comment.