Category: TypeScript

To extend a component with additional properties with React and TypeScript, we can create our own interface.

For instance, we write

export interface AnimalTableProps extends DataTableProps {
  onClickFunction: Function;
}

export class DataTable<T extends DataTableProps> extends React.Component<
  T,
  {}
> {}

export class AnimalTable extends DataTable<AnimalTableProps> {
  render() {
    //...
  }
}

to create the AnimalTableProps interface.

Then we use that as the argument for DataTable assuming it’s a generic type.

And then we can use the properties listed in AnimalTableProps and DataTableProps without compiler errors.

Sometimes, we want to transpile TypeScript to ES6.

In this article, we’ll look at how to transpile TypeScript to ES6.

How to transpile TypeScript to ES6?

To transpile TypeScript to ES6, we can set the compilerOptions.target option to 'es2015' in tsconfig.json.

For instance, we write

{
  "compilerOptions": {
    "target": "es2015"
  }
}

into tsconfig.json to make the TypeScript compiler build our code to ES6 JavaScript code.

Conclusion

To transpile TypeScript to ES6, we can set the compilerOptions.target option to 'es2015' in tsconfig.json.

Sometimes, we want to add a day to a date in TypeScript.

In this article, we’ll look at how to add a day to a date in TypeScript.

How to add a day to a date in TypeScript?

To add a day to a date in TypeScript, we can call the getDate and setDate methods.

For instance, we write

const addDays = (date: Date, days: number): Date => {
  date.setDate(date.getDate() + days);
  return date;
};

to define the addDays function that takes the number of days to add to the date.

We get the date of date with getDate.

Then we add days to the date returned by getDate and use the sum as the argument of setDate to add the days to date.

And then we return date.

Conclusion

To add a day to a date in TypeScript, we can call the getDate and setDate methods.

Sometimes, we want to add the colSpan attribute in React.

In this article, we’ll look at how to add the colSpan attribute in React.

How to add the colSpan attribute in React?

To add the colSpan attribute in React, we can add the colSpan prop.

For instance, we write

<th colSpan={2}>{this.props.category}</th>;

to add the colSpan prop in a th element to set the colspan to 2.

Conclusion

To add the colSpan attribute in React, we can add the colSpan prop.

Sometimes, we want to get the difference between two arrays with TypeScript.

In this article, we’ll look at how to get the difference between two arrays with TypeScript.

How to get the difference between two arrays with TypeScript?

To get the difference between two arrays with TypeScript, we use the array filter and indexOf methods.

For instance, we write

const a1 = ["a", "b", "c", "d", "e", "f", "g"];
const a2 = ["a", "b", "c", "d", "z"];

const missing = a1.filter((item) => a2.indexOf(item) < 0);
console.log(missing);

to get the items in a1 that aren’t in a2 and return the list of items as an array.

To do this, we call a1.filter with a callback that checks if each item in a1 isn’t in a2 with a2.indexOf(item) < 0.

Then missing would have the items in a1 that aren’t in a2 in an array.

Conclusion

To get the difference between two arrays with TypeScript, we use the array filter and indexOf methods.