Author: John Au-Yeung

Sometimes, we want to add TypeScript type for the input onchange event.target.value property.

In this article, we’ll look at how to add TypeScript type for the input onchange event.target.value property.

How to add TypeScript type for the input onchange event.target.value property?

To add TypeScript type for the input onchange event.target.value property, we set the type of the event object to React.ChangeEvent<HTMLInputElement>.

For instance, we write

const App = () => {
  //...
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    //...
  };
  //...
};

to add the onChange function into the App component and set it to a function that takes the e event object parameter.

We set e‘s type to React.ChangeEvent<HTMLInputElement> so that we get the correct autocomplete items and type check from the TypeScript compiler.

Conclusion

To add TypeScript type for the input onchange event.target.value property, we set the type of the event object to React.ChangeEvent<HTMLInputElement>.

Sometimes, we want to exclude property from type with TypeScript.

In this article, we’ll look at how to exclude property from type with TypeScript.

How to exclude property from type with TypeScript?

To exclude property from type with TypeScript, we can use the Omit type.

For instance, we write

interface Test {
  a: string;
  b: number;
  c: boolean;
}

type OmitA = Omit<Test, "a">;
type OmitAB = Omit<Test, "a" | "b">;

to create the Test interface.

And then we derive 2 types OmitA and OmitAB from it by using the Omit type.

To create OmitA, we use Omit with Test and 'a' to return a type that only has the b and c properties from Test.

And we create OmitAB that returns a type that has a and b excluded so it only takes property c listed in Test.

Conclusion

To exclude property from type with TypeScript, we can use the Omit type.

Sometimes, we want to fix the "Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type" error with TypeScript.

In this article, we’ll look at how to fix the "Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type" error with TypeScript.

How to fix the "Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type" error with TypeScript?

To fix the "Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type" error with TypeScript, we should specify the parameter’s data type if we have the noImplicitAny flag on.

For instance, we write

const user = users.find((user: any) => user.id === query);

to set the user parameter’s type to any to suppress the error.

Conclusion

To fix the "Typescript: TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type" error with TypeScript, we should specify the parameter’s data type if we have the noImplicitAny flag on.

Sometimes, we want to generate a tsconfig.json file with TypeScript.

In this article, we’ll look at how to generate a tsconfig.json file with TypeScript.

How to generate a tsconfig.json file with TypeScript?

To generate a tsconfig.json file with TypeScript, we run tsc --init.

We type

tsc --init

in the command line after we switched to the TypeScript project folder to create a tsconfig.json file.

Conclusion

To generate a tsconfig.json file with TypeScript, we run tsc --init.

Sometimes, we want to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index" error with TypeScript.

In this article, we’ll look at how to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index" error with TypeScript.

How to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index" error with TypeScript?

To fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index" error with TypeScript, we should set the type of the array elements.

For instance, we write

interface TrainInfo {
  name: keyof typeof plotOptions;
  x: Array<number>;
  y: Array<number>;
  type: string;
  mode: string;
}

const allPlotData: Array<TrainInfo> = [
  {
    name: "train1",
    x: [],
    y: [],
    type: "scatter",
    mode: "lines",
  },
  // ...
];
const plotData = allPlotData.filter(({ name }) => plotOptions[name]);

to set the type of the allPlotData array to Array<TrainInfo>

TrainInfo is the type of each entry.

Then we can call allPlotData.filter without any TypeScript compiler errors.

Conclusion

To fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index" error with TypeScript, we should set the type of the array elements.