Category: TypeScript

To fix the "Property ‘value’ does not exist on type ‘Readonly<{}>’ " error with React TypeScript, we should specify the prop and state types in our React class component.

For instance, we write

type MyProps = {
  //...
};
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
  //...
}

to specify the MyProps and MyState types as the types for the props and state of our React class component with

React.Component<MyProps, MyState>

We should add value into the type specification since it’s specified in the error.

Sometimes, we want to add types for key-value pairs in TypeScript.

In this article, we’ll look at how to add types for key-value pairs in TypeScript.

How to add types for key-value pairs in TypeScript?

To add types for key-value pairs in TypeScript, we can use index signatures.

For instance, we write

interface Foo {
  [key: string]: number;
}

const foo: Foo = {};
foo["hello"] = 123;

to create the Foo interface that accepts any key-value pairs that have numbers as their values with

[key: string]: number;

Then we can create an object that implements the interface with

const foo: Foo = {};
foo["hello"] = 123;

Conclusion

To add types for key-value pairs in TypeScript, we can use index signatures.

Sometimes, we want to fix the "Build:No inputs were found in config file" with the TypeScript tsconfig.json file.

In this article, we’ll look at how to fix the "Build:No inputs were found in config file" with the TypeScript tsconfig.json file.

How to fix the "Build:No inputs were found in config file" with the TypeScript tsconfig.json file?

To fix the "Build:No inputs were found in config file" with the TypeScript tsconfig.json file, we should make sure the source code path is in the include array in tsconfig.json.

For instance, we write

{
  //...
  "include": ["./src/"]
}

in tsconfig.json to set the ./src/ path as one of the path that has TypeScript code files.

Then then TypeScript compiler will compile the code in the directories listed in include.

Conclusion

To fix the "Build:No inputs were found in config file" with the TypeScript tsconfig.json file, we should make sure the source code path is in the include array in tsconfig.json.

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.