Author: John Au-Yeung

Sometimes, we want to fix the error ‘"Unexpected token *" on import statement’ with Jest.

In this article, we’ll look at how to fix the error ‘"Unexpected token *" on import statement’ with Jest.

How to fix error ‘"Unexpected token *" on import statement’ with Jest?

To fix the error ‘"Unexpected token *" on import statement’ 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.

Conclusion

To fix the error ‘"Unexpected token *" on import statement’ with Jest, we need to tell Jest to transpile ES6 modules before we can use them.

Sometimes, we want to define string literal union type from constants in TypeScript.

In this article, we’ll look at how to define string literal union type from constants in TypeScript.

How to define string literal union type from constants in TypeScript?

To define string literal union type from constants in TypeScript, we can use the typeof operator on the constants and join the types returned together with |.

For instance, we write

const MY_CONSTANT = "MY_CONSTANT";
const SOMETHING_ELSE = "SOMETHING_ELSE";
type MyType = typeof MY_CONSTANT | typeof SOMETHING_ELSE;

to define 2 constants MY_CONSTANT and SOMETHING_ELSE.

Then we get their types with typeof.

Finally, we create the union type with the returned types with | and assign the expression to MyType.

Conclusion

To define string literal union type from constants in TypeScript, we can use the typeof operator on the constants and join the types returned together with |.

Sometimes, we want to use generics in props in React in a functional component.

In this article, we’ll look at how to use generics in props in React in a functional component.

How to use generics in props in React in a functional component?

To use generics in props in React in a functional component, we can create an interface that takes a generic type and use that as the prop type.

For instance, we write

interface IProps<T> {
  collapsed: boolean;
  listOfData: T[];
  displayData: (data: T, index: number) => React.ReactNode;
}

const CollapsableDataList: React.FunctionComponent<IProps<T>> = (props) => {
  /*...*/
};

to define the IProps<T> type and use T as a type for listOfData and the data parameter of displayData.

Then we use that as the prop type with React.FunctionComponent<IProps<T>> where T is any type that we have already defined.

Conclusion

To use generics in props in React in a functional component, we can create an interface that takes a generic type and use that as the prop type.

Sometimes, we want to check if two dates are in the same day or in the same hour with TypeScript.

In this article, we’ll look at how to check if two dates are in the same day or in the same hour with TypeScript.

How to check if two dates are in the same day or in the same hour with TypeScript?

To check if two dates are in the same day or in the same hour with TypeScript, we can check if their year, month, and date are equal.

For instance, we write

const sameDay = (d1, d2) => {
  return (
    d1.getFullYear() === d2.getFullYear() &&
    d1.getMonth() === d2.getMonth() &&
    d1.getDate() === d2.getDate()
  );
};

to create the sameDay function that gets the year of each date with getFullYear.

getMonth gets the month, and getDate gets the date of the month.

Then we compare all 3 and join them with && to check if both dates have the same year, month, and date.

Conclusion

To check if two dates are in the same day or in the same hour with TypeScript, we can check if their year, month, and date are equal.

Sometimes, we want to get enum keys as a union string type in TypeScript.

In this article, we’ll look at how to get enum keys as a union string type in TypeScript.

How to get enum keys as a union string type in TypeScript?

To get enum keys as a union string type in TypeScript, we can use the keyof operator.

For instance, we write

enum MyEnum {
  A,
  B,
  C,
}

type enumValues = keyof typeof MyEnum;

to create the MyEnum enum.

And then we create the enumValues type with keyof typeof MyEnum; which returns the union type with the keys of MyEnum as the values.

So a variable with type enumValues can have value 'A', 'B' or 'C'.

Conclusion

To get enum keys as a union string type in TypeScript, we can use the keyof operator.