Categories
TypeScript Answers

How to do method overloading in TypeScript?

To do method overloading in TypeScript, we can add multiple signatures for the same method.

For instance, we write

class TestClass {
  someMethod(stringParameter: string): void;
  someMethod(numberParameter: number, stringParameter: string): void;
  someMethod(stringOrNumberParameter: any, stringParameter?: string): void {
    if (stringOrNumberParameter && typeof stringOrNumberParameter == "number") {
      //...
    } else {
      //...
    }
  }
}

to add the someMethod in TestClass that has multiple signatures.

We specify all the possible signatures for the method by adding the parameters and their types for each one.

And then we check the values of the parameters with if statements before we do anything with them.

Categories
TypeScript Answers

How to fix ‘instanceof’ in TypeScript give me the error “‘Foo’ only refers to a type, but is being used as a value here.” error?

Sometimes, we want to fix ‘instanceof’ in TypeScript give me the error "’Foo’ only refers to a type, but is being used as a value here." error.

In this article, we’ll look at how to fix ‘instanceof’ in TypeScript give me the error "’Foo’ only refers to a type, but is being used as a value here." error.

How to fix ‘instanceof’ in TypeScript give me the error "’Foo’ only refers to a type, but is being used as a value here." error?

To fix ‘instanceof’ in TypeScript give me the error "’Foo’ only refers to a type, but is being used as a value here." error, we should only use instanceof with constructors.

For instance, we write

interface Foo {
  abcdef: number;
}

let x: Foo | string;

if ('abcdef' in x) {
  // ...
}

to create the Foo instance.

And we check if x implements Foo with 'abcdef' in x.

If the abcdef property is in x, then we know x is a Foo object since strings don’t have the abcdef property and x is either a Foo object or a string.

Conclusion

To fix ‘instanceof’ in TypeScript give me the error "’Foo’ only refers to a type, but is being used as a value here." error, we should only use instanceof with constructors.

Categories
TypeScript Answers

How to fix error TS2693: ‘Promise’ only refers to a type, but is being used as a value here with TypeScript?

Sometimes, we want to fix error TS2693: ‘Promise’ only refers to a type, but is being used as a value here with TypeScript.

In this article, we’ll look at how to fix error TS2693: ‘Promise’ only refers to a type, but is being used as a value here with TypeScript.

How to fix error TS2693: ‘Promise’ only refers to a type, but is being used as a value here with TypeScript?

To fix error TS2693: ‘Promise’ only refers to a type, but is being used as a value here with TypeScript, we install the @types/es-promise package.

To install it, we run

npm i --save-dev  @types/es6-promise

Then we use it by writing

import { Promise } from "es6-promise";

to import the Promise type.

Categories
TypeScript Answers

How to declare return types for functions in TypeScript?

Sometimes, we want to declare return types for functions in TypeScript.

In this article, we’ll look at how to declare return types for functions in TypeScript.

How to declare return types for functions in TypeScript?

To declare return types for functions in TypeScript, we put it after the colon and before the function body.

For instance, we write

const sum = (a: number, b: number): number => a + b;

to set the return type of the sum to number with : number before the function body.

Conclusion

To declare return types for functions in TypeScript, we put it after the colon and before the function body.

Categories
TypeScript Answers

How to mock dependency in Jest with TypeScript?

Sometimes, we want to mock dependency in Jest with TypeScript.

In this article, we’ll look at how to mock dependency in Jest with TypeScript.

How to mock dependency in Jest with TypeScript?

To mock dependency in Jest with TypeScript, we set the type of the mocked dependency to jest.Mock<typeof dep.default>.

For instance, we write

import * as dep from "../dependency";
jest.mock("../dependency");

const mockedDependency = <jest.Mock<typeof dep.default>>dep.default;

it("should do what I need", () => {
  mockedDependency.mockReturnValueOnce("return");
});

to get the cast the type of dep.default to jest.Mock<typeof dep.default>.

Then we can call mockReturnValueOnce without TypeScript compiler errors.

Conclusion

To mock dependency in Jest with TypeScript, we set the type of the mocked dependency to jest.Mock<typeof dep.default>.