Category: TypeScript

Sometimes, we want to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript.

In this article, we’ll look at how to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript.

How to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript?

To fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript, we can create a type with an index signature that allows any properties to be in the object.

For instance, we write

const myObj: { [index: string]: any } = {};

to set myObj to the { [index: string]: any } type so that the object assigned can have any properties in it.

Conclusion

To fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript, we can create a type with an index signature that allows any properties to be in the object.

Sometimes, we want to extend HTML elements in React and TypeScript while preserving props.

In this article, we’ll look at how to extend HTML elements in React and TypeScript while preserving props.

How to extend HTML elements in React and TypeScript while preserving props?

To extend HTML elements in React and TypeScript while preserving props, we can include the React.HTMLProps<HTMLButtonElement> type in our prop type.

For instance, we write

export const Button: React.FC<
  ButtonProps & React.HTMLProps<HTMLButtonElement>
> = ({ ...props, children, icon }) => (
  <StyledButton {...props}>
    {icon && <i className="material-icons">{icon}</i>}
    {children}
  </StyledButton>
);

to set the prop type of the Button component to ButtonProps & React.HTMLProps<HTMLButtonElement>.

ButtonProps is the prop type that we created and React.HTMLProps<HTMLButtonElement> is the prop type of the HTML button element.

We combine then with & so that properties from both interfaces are valid props.

Conclusion

To extend HTML elements in React and TypeScript while preserving props, we can include the React.HTMLProps<HTMLButtonElement> type in our prop type.

Sometimes, we want to use "this" inside a class method with TypeScript.

In this article, we’ll look at how to use "this" inside a class method with TypeScript.

How to use "this" inside a class method with TypeScript?

To use "this" inside a class method with TypeScript, we can use it like we do in JavaScript.

For instance, we write

class Messenger {
  message = "Hello World";

  start() {
    setTimeout(() => alert(this.message), 3000);
  }
}

to use this inside the setTimeout callback, which is an arrow function that is inside the start method.

Therefore, this would still reference the Messenger instance since arrow functions don’t change the scope of this.

And using this in a method at the top level would reference the class instance.

Conclusion

To use "this" inside a class method with TypeScript, we can use it like we do in JavaScript.

Sometimes, we want to iterate over array of objects in TypeScript.

In this article, we’ll look at how to iterate over array of objects in TypeScript.

How to iterate over array of objects in TypeScript?

To iterate over array of objects in TypeScript, we can use the for-of loop.

For instance, we write

for (const product of products) {
  console.log(product.productDesc);
}

to loop through the products array.

product is the object being iterated through, so we can get the productDesc property from the object.

Conclusion

To iterate over array of objects in TypeScript, we can use the for-of loop.

Sometimes, we want to fix TypeScript cannot find name window or document.

In this article, we’ll look at how to fix TypeScript cannot find name window or document.

How to fix TypeScript cannot find name window or document?

To fix TypeScript cannot find name window or document, we should add 'dom' to the compilerOptions.lib property in tsconfig.json.

For instance, we write

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"]
    //...
  },
  "include": ["./src/**/*"]
}

to add the 'dom' option into the compilerOptions.lib array in tsconfig.json so that the TypeScript compiler knows that the browser side global variables are available in our TypeScript project.

Conclusion

To fix TypeScript cannot find name window or document, we should add 'dom' to the compilerOptions.lib property in tsconfig.json.