Category: TypeScript

Sometimes, we want to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript.

In this article, we’ll look at how to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript.

How to fix the "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript?

The "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript, we should replace the for prop with the htmlFor prop.

For instance, we write

const Input = (props) => {
  //...
  return (
    <label htmlFor={props.inputId} className="input-label">
      {props.label}
    </label>
    //...
  );
};

to set the label‘s for attribute by setting the htmlFor prop to a value.

Conclusion

The "error TS2339: Property ‘for’ does not exist on type ‘HTMLProps’" error with TypeScript, we should replace the for prop with the htmlFor prop.

Sometimes, we want to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter.

In this article, we’ll look at how to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter.

How to tell TypeScript compiler to remove certain types from an array with Array.prototype.filter?

To tell TypeScript compiler to remove certain types from an array with Array.prototype.filter, we can create our own type guard function and use that as the filter method’s callback.

For instance, we write

const arr = [1, 2, 3, 4, "5", 6];
const numArr: number[] = arr.filter((i): i is number => {
  return typeof i === "number";
});

to call arr.filter with

(i): i is number => {
  return typeof i === "number";
}

i is number is a return type that returns a boolean that tells us if the parameter i is a number or not.

Then numArr would be an array with only numbers.

Conclusion

To tell TypeScript compiler to remove certain types from an array with Array.prototype.filter, we can create our own type guard function and use that as the filter method’s callback.

Sometimes, we want to define CSS variables in style attribute in React and TypeScript.

In this article, we’ll look at how to define CSS variables in style attribute in React and TypeScript.

How to define CSS variables in style attribute in React and TypeScript?

To define CSS variables in style attribute in React and TypeScript, we can create an object of type React.CSSProperties in our component.

For instance, we write

const App = () => {
  //...
  const style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>;
};

to create the style variable of type React.CSSProperties.

Then we can assign that as the value of the style prop of the div without compiler errors.

Conclusion

To define CSS variables in style attribute in React and TypeScript, we can create an object of type React.CSSProperties in our component.

Sometimes, we want to fix TypeScript enum switch statement not working.

In this article, we’ll look at how to fix TypeScript enum switch statement not working.

How to fix TypeScript enum switch statement not working?

To fix TypeScript enum switch statement not working, we should make sure we’re comparing numbers with switch if we didn’t assign any value non-number to the enum values.

For instance, we write

enum EditMode {
  View = 0,
  Edit = 1,
  Delete = 2,
}

switch (+editMode) {
  case EditMode.Delete:
    //...
    break;
  case EditMode.Edit:
    // ...
    break;
  default:
    //...
    break;
}

to create the EditMode enum that has numbers assigned to each entry.

Then we make sure editMode is a number before doing comparisons by adding a + sign in front of it.

Then the switch statement should do the comparisons property since we’re comparing 2 numbers.

Conclusion

To fix TypeScript enum switch statement not working, we should make sure we’re comparing numbers with switch if we didn’t assign any value non-number to the enum values.

Sometimes, we want to fix the "’string’ can’t be used to index type ‘{}’" error with TypeScript.

In this article, we’ll look at how to fix the "’string’ can’t be used to index type ‘{}’" error with TypeScript.

How to fix the "’string’ can’t be used to index type ‘{}’" error with TypeScript?

To fix the "’string’ can’t be used to index type ‘{}’" error with TypeScript, we should make sure the properties and types of each property listed in the interfaces matches the ones that are in the object.

For instance, we write

interface Item {
  id: number;
  name: string;
  email: string;
}

export type TableGridViewProps = {
  items: Item[];
  tableColumns: TableColumn[];
};

to create the Item interface and the TableGridViewProps prop that has properties set to the Item[] type.

Then the items in items should have objects that have the properties listed in Item and the types of each property should also match the ones listed in Item for each property.

Conclusion

To fix the "’string’ can’t be used to index type ‘{}’" error with TypeScript, we should make sure the properties and types of each property listed in the interfaces matches the ones that are in the object.