Author: John Au-Yeung

Sometimes, we want to define optional constructor arguments with defaults in TypeScript.

In this article, we’ll look at how to define optional constructor arguments with defaults in TypeScript.

How to define optional constructor arguments with defaults in TypeScript?

To define optional constructor arguments with defaults in TypeScript, we can set default values for constructor parameters.

For instance, we write

export class Test {
  constructor(private foo: string = "foo", private bar: string = "bar") {}
}

We set foo‘s default value to 'foo' and bar‘s default value to 'bar' in the Test class.

Conclusion

To define optional constructor arguments with defaults in TypeScript, we can set default values for constructor parameters.

To fix the ‘SyntaxError: Cannot use import statement outside a module’ with Jest, we need to tell Jest to transpile ES6 modules before we can use them.

To do this, we write

{
  //...
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|(@[a-zA-Z]+/)?(bs|reason|rescript)-(.*)+)"
    ]
  }
  //...
}

in our Jest config.

We set transformIgnorePatterns to an array with the pattern of the module names that we want to transform before we run our tests.

Then Jest will transform the modules into something it can use.

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.