Category: TypeScript

Sometimes, we want to declare third party modules with TypeScript.

In this article, we’ll look at how to declare third party modules with TypeScript.

How to declare third party modules with TypeScript?

To declare third party modules with TypeScript, we use the declare keyword.

For instance, we write

declare module "foo-module" {
  function foo(): void;
  export = foo;
}

in a .d.ts file in our TypeScript project to declare the foo-module module and its members.

Then we can import the module without errors by writing

import * as foo from "foo-module";
foo();

in our code.

Conclusion

To declare third party modules with TypeScript, we use the declare keyword.

To fix the error ‘Component cannot be used as a JSX component. Its return type ‘Element[]’ is not a valid JSX element’ with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Todos(): JSX.Element {
  return (
    <>
      {todos.map((todo) => (
        <li>{todo.task}</li>
      ))}
    </>
  );
}

to put our array of items in a fragment so that the component can be compiled.

We call todos.map to render an array of li elements so we need to wrap them with a fragment.

Sometimes, we want to fix the ‘Cannot find module’ error for paths that are in TypeScript tsconfig.json.

In this article, we’ll look at how to fix the ‘Cannot find module’ error for paths that are in TypeScript tsconfig.json.

How to fix the ‘Cannot find module’ error for paths that are in TypeScript tsconfig.json?

To fix the ‘Cannot find module’ error for paths that are in TypeScript tsconfig.json, we need to add all the paths that we want the TypeScript compiler to pick up.

For instance, we write

{
  "compilerOptions": {
    "baseUrl": ".",
    //...
    "paths": {
      "@project/app/modules/*": ["src/modules/*"],
      "@project/server/data/*": ["server/src/json/*"]
    }
  },

  "include": ["./src", "./server"]
}

in tsconfig.json so that the src/modules/* and server/src/json/* directories and their children are all picked up by TypeScript compiler.

Conclusion

To fix the ‘Cannot find module’ error for paths that are in TypeScript tsconfig.json, we need to add all the paths that we want the TypeScript compiler to pick up.

Sometimes, we want to use React createContext in Typescript.

In this article, we’ll look at how to use React createContext in Typescript.

How to use React createContext in Typescript?

To use React createContext in Typescript, we need to define the types for the context props.

For instance, we write

import React, { useReducer } from "react";
import { initialState, IState, reducer } from "./reducer";

interface IContextProps {
  state: IState;
  dispatch: ({ type }: { type: string }) => void;
}

export const AdminStore = React.createContext({} as IContextProps);

export function AdminStoreProvider(props: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = { state, dispatch };
  return (
    <AdminStore.Provider value={value}>{props.children}</AdminStore.Provider>
  );
}

to create the IContextProps interface and use that as the type for the value prop in AdminStore.Provider by writing

export const AdminStore = React.createContext({} as IContextProps);

IState is a type that we created to add types to the value prop values.

Now the TypeScript compiler should use the types and type errors should clear.

Conclusion

To use React createContext in Typescript, we need to define the types for the context props.

To fix the "Cannot find name ‘it’" error in Jest and TypeScript, we add the ts-jest transform to our test files by adding the entry in jest.config.js.

We install ts-jest by running

npm install jest @types/jest ts-jest

For instance, we write

module.exports = {
  roots: ["<rootDir>/src"],
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

in jest.config.ts to transform "^.+\\.tsx?$" files with ts-jest.

Then in tsconfig.json, we add

{
  "compilerOptions": {
    //...

    "types": ["reflect-metadata", "jest"],
    "typeRoots": ["./types", "./node_modules/@types"]

    //...
  },
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["./src/**/*.tsx", "./src/**/*.ts"]
}

to add the 'jest' type to the types option.

Now the TypeScript compiler should be aware of Jest types.