Author: John Au-Yeung

To fix the ‘What does the error "JSX element type ‘…’ does not have any construct or call signatures"’ error with TypeScript and React, we should use new to instantiate React component classes.

For instance, we shouldn’t write

class Greeter extends React.Component<any, any> {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

//...
const Greet = new Greeter();
<Greet whoToGreet="world" />;

Instead, we write

class Greeter extends React.Component<any, any> {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

//...
<Greet whoToGreet="world" />;

to use the Greet component after we defined it.

Sometimes, we want to import a JSON file in TypeScript.

In this article, we’ll look at how to import a JSON file in TypeScript.

How to import a JSON file in TypeScript?

To import a JSON file in TypeScript, we can use the import statement directly.

For instance, we write

import colorsJson from "../colors.json";

to import the JSON from colors.json.

colorsJson will be a regular JavaScript object parsed from the JSON in colors.json.

Conclusion

To import a JSON file in TypeScript, we can use the import statement directly.

To override interface property type defined in Typescript d.ts file, we can omit properties from them and extend them.

For instance, we write

interface A {
  x: string;
}

export type B = Omit<A, "x"> & { x: number };

to create type B that removes the existing x property with Omit from interface A and add the x property with type number.

We can also create a new interface from an existing one with Omit and extends.

For instance, we write

interface A {
  x: string;
}

interface B extends Omit<A, "x"> {
  x: number;
}

to create interface B that extends interface A without the x property by extending Omit<A, "x">.

Then we add the x property again with type set to number.

Conclusion

To override interface property type defined in Typescript d.ts file, we can omit properties from them and extend them.

Sometimes, we want to clone an object with TypeScript.

In this article, we’ll look at how to clone an object with TypeScript.

How to clone an object with TypeScript?

To clone an object with TypeScript, we can use the spread operator.

For instance, we write

const clone = { ...customer };
clone.name = "Steve";
clone.example.type = "SteveType";

to create a clone of the customer object and assign it to clone.

Then we add some properties into the clone object.

Conclusion

To clone an object with TypeScript, we can use the spread operator.

Sometimes, we want to fix cannot use JSX unless the ‘–jsx’ flag is provided issue with TypeScript.

In this article, we’ll look at how to fix cannot use JSX unless the ‘–jsx’ flag is provided issue with TypeScript.

How to fix cannot use JSX unless the ‘–jsx’ flag is provided issue with TypeScript?

To fix cannot use JSX unless the ‘–jsx’ flag is provided issue with TypeScript, we should set the jsx option to react.

For instance, we add

{
  "compilerOptions": {
    "jsx": "react"
  }
}

into tsconfig.json to make the TypeScript compiler compile JSX code.

Conclusion

To fix cannot use JSX unless the ‘–jsx’ flag is provided issue with TypeScript, we should set the jsx option to react.