Category: TypeScript

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.

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.