Author: John Au-Yeung

Sometimes, we want to fix the "error TS2602: JSX element implicitly has type ‘any’ because the global type ‘JSX.Element’ does not exist" error with TypeScript.

In this article, we’ll look at how to fix the "error TS2602: JSX element implicitly has type ‘any’ because the global type ‘JSX.Element’ does not exist" error with TypeScript.

How to fix the "error TS2602: JSX element implicitly has type ‘any’ because the global type ‘JSX.Element’ does not exist" error with TypeScript?

To fix the "error TS2602: JSX element implicitly has type ‘any’ because the global type ‘JSX.Element’ does not exist" error with TypeScript, we can install the @types/react package to add the TypeScript type definitions for React.

To do this, we run

npm install --save-dev @types/react

to install it as a dev dependency.

Conclusion

To fix the "error TS2602: JSX element implicitly has type ‘any’ because the global type ‘JSX.Element’ does not exist" error with TypeScript, we can install the @types/react package to add the TypeScript type definitions for React.

To use namespaces with import in TypeScript, we can create ES6 modules and import them.

For instance, we write

UtilBase.ts

import * as path from "path";

export default class UtilBase {
  protected fixPath(value: string): string {
    return value.replace("/", path.sep);
  }
}

to export the UtilBase class as a default export.

Then we can import the module as a default import with

import UtilBase from "./UtilBase";
export default class UtilOne extends UtilBase {
  //...
}

Sometimes, we want to parse a JSON object to a TypeScript object.

In this article, we’ll look at how to parse a JSON object to a TypeScript object.

How to parse a JSON object to a TypeScript object?

To parse a JSON object to a TypeScript object, we use the JSON.parse method.

For instance, we write

interface Employee {
  departmentId: number;
  permissionsId: number;
  maxWorkHours: number;
  employeeId: number;
  firstName: string;
  lastName: string;
}

const jsonObj: any = JSON.parse(employeeString);
const employee: Employee = <Employee>jsonObj;

to define the Employee interface.

Then we call JSON.parse with the employeeStrigng JSON object string to parse it.

Next, we assign the jsonObj object to employee to and use <Employee> to cast it to an Employee object.

Conclusion

To parse a JSON object to a TypeScript object, we use the JSON.parse method.

Sometimes, we want to explicitly specify types for Express’ application, request, response, etc. with TypeScript.

In this article, we’ll look at how to explicitly specify types for Express’ application, request, response, etc. with TypeScript.

How to explicitly specify types for Express’ application, request, response, etc. with TypeScript?

To explicitly specify types for Express’ application, request, response, etc. with TypeScript, we can get the types from the express module.

For instance, we write

import express = require("express");
//...

app.get("/", function (req: express.Request, res: express.Response) {
  //...
});

to require the express module with

import express = require("express");

Then we set the types for req and res to express.Request and express.Response respectively.

Conclusion

To explicitly specify types for Express’ application, request, response, etc. with TypeScript, we can get the types from the express module.

Sometimes, we want to fix the "No overload matches this call. Type ‘string’ is not assignable to type ‘Signals’" error in TypeScript.

In this article, we’ll look at how to fix the "No overload matches this call. Type ‘string’ is not assignable to type ‘Signals’" error in TypeScript.

How to fix the "No overload matches this call. Type ‘string’ is not assignable to type ‘Signals’" error in TypeScript?

To fix the "No overload matches this call. Type ‘string’ is not assignable to type ‘Signals’" error in TypeScript, we can use a type guard to filter out the values that don’t have the Signals type.

To do this, we write

enum Signals {
  SIGHUP = 1,
  SIGINT = 2,
  SIGTERM = 15,
}

Object.values(Signals)
  .filter((s): s is NodeJS.Signals => typeof s !== "number")
  .forEach((signal) => {
    process.on(signal, {
      //...
    });
  });

to get the enum values from the Signals enum with Object.values.

Then we call filter with a type guard function that filters out all the non-number values from the array returned by Object.values.

Finally, we call forEach on the array returned by filter.

Conclusion

To fix the "No overload matches this call. Type ‘string’ is not assignable to type ‘Signals’" error in TypeScript, we can use a type guard to filter out the values that don’t have the Signals type.