Category: TypeScript

To use react-router-dom with TypeScript, we can create an interface that extends RouteComponentProps.

For instance, we write

type RouteParams = {
  id: string;
};

interface Props
  extends RouteComponentProps<RouteParams>,
    React.Props<RouteParams> {}

type State = {
  players: Array<Player>;
};

export class PlayersContainer extends React.Component<Props, State> {}

to create the RouteParams type with the route parameter properties and types.

Tben we create the Props interface that extends the RouteComponentProps<RouteParams> interface and React.Props<RouteParams>.

RouteComponentProps is provided by react-router-dom.

And then we create another type for our component’s State.

Next, we make our component extend React.Component<Props, State> so the props and state types will be correct in our component.

Conclusion

To use react-router-dom with TypeScript, we can create an interface that extends RouteComponentProps.

Sometimes, we want to add types of generic stateless component with React and TypeScript.

In this article, we’ll look at how to add types of generic stateless component with React and TypeScript.

How to add types of generic stateless component with React and TypeScript?

To add types of generic stateless component with React and TypeScript, we can create an interface that takes a generic type argument.

For instance, we write

interface IMyComponentProps<T> {
  name: string
  type: T
}

type MyComponentI<T = any> = React.FC<IMyComponentProps<T>>

const MyComponent: MyComponentI = props => <p {...props}>Hello</p>

const TypedComponent = MyComponent as MyComponentI<number>

to create the IMyComponentProps interface that takes the type argument T.

Then we can use that to create the MyComponentI<T = any> type set to React.FC<IMyComponentProps<T>>.

React.FC is the type for function components.

IMyComponentProps<T> is the props object’s type.

And then we can cast the type of MyComponent to whatever we want like

MyComponent as MyComponentI<number>

to set T to number.

Conclusion

To add types of generic stateless component with React and TypeScript, we can create an interface that takes a generic type argument.

Sometimes, we want to break or continue across nested for each loops in TypeScript.

In this article, we’ll look at how to break or continue across nested for each loops in TypeScript.

How to break or continue across nested for each loops in TypeScript?

To break or continue across nested for each loops in TypeScript, we replace forEach with a for-of loop.

For instance, we write

for (const a of this.tab.committee.ratings) {
  if (somethingWrong) {
    break;
  }
}

to loop through the this.tab.committee.ratings iterable object with a for-of loop.

And if somethingWrong is true, then we use break to stop the loop.

We can also use continue in a for-of loop to skip to the next iteration.

Conclusion

To break or continue across nested for each loops in TypeScript, we replace forEach with a for-of loop.

Sometimes, we want to break a forEach loop in TypeScript.

In this article, we’ll look at how to break a forEach loop in TypeScript.

How to break a forEach loop in TypeScript?

To break a forEach loop in TypeScript, we replace forEach with a for-of loop.

For instance, we write

for (const a of this.tab.committee.ratings) {
  if (somethingWrong) {
    break;
  }
}

to loop through the this.tab.committee.ratings iterable object with a for-of loop.

And if somethingWrong is true, then we use break to stop the loop.

Conclusion

To break a forEach loop in TypeScript, we replace forEach with a for-of loop.

Sometimes, we want to declare a delegate type in TypeScript.

In this article, we’ll look at how to declare a delegate type in TypeScript.

How to declare a delegate type in TypeScript?

To declare a delegate type in TypeScript, we can define an interface that restricts the signature and return type of a function.

For instance, we write

interface Greeter {
  (message: string): void;
}

const sayHi = (greeter: Greeter) => {
  greeter("Hello!");
};

sayHi((msg) => console.log(msg));

to define the Greeter interface that has signature (message: string) and has the void return type.

Then we set the greeter parameter of the sayHi function to the Greeter type.

Therefore, greeter takes a string and returns nothing.

Conclusion

To declare a delegate type in TypeScript, we can define an interface that restricts the signature and return type of a function.