Category: TypeScript

Sometimes, we want to fix the "Cannot find name ‘console’" error with Node.js and TypeScript.

In this article, we’ll look at how to fix the "Cannot find name ‘console’" error with Node.js and TypeScript.

How to fix the "Cannot find name ‘console’" error with Node.js and TypeScript?

To fix the "Cannot find name ‘console’" error with Node.js and TypeScript, we can install the @types/node package into our Node.js project.

To install it, we run

npm install @types/node --save-dev

to add @types/node as a dev dependency.

Conclusion

To fix the "Cannot find name ‘console’" error with Node.js and TypeScript, we can install the @types/node package into our Node.js project.

Sometimes, we want to create a function interface with TypeScript.

In this article, we’ll look at how to create a function interface with TypeScript.

How to create a function interface with TypeScript?

To create a function interface with TypeScript, we can put the signature and return type of the function in an interface.

For instance, we write

interface IFormatter {
  (data: string, toUpper: boolean): string;
}

const upperCaseFormatter: IFormatter = (data: string) => {
  return data.toUpperCase();
};

to create the IFormatter interface that requires a function to have signature that some or all of the parameters in (data: string, toUpper: boolean) and returns a string.

We can then create the upperCaseFormatter function with type IFormatter and with the data string parameter and returns a string.

Conclusion

To create a function interface with TypeScript, we can put the signature and return type of the function in an interface.

Sometimes, we want to define a regex-matched string type in TypeScript.

In this article, we’ll look at how to define a regex-matched string type in TypeScript.

How to define a regex-matched string type in TypeScript?

To define a regex-matched string type in TypeScript, we can create a literal type that matches the pattern of a given string.

For instance, we write

type MarkerTime = `${number | ""}${number}:${number}${number}`;
const t: MarkerTime = "09:00";

to create the MarkerTime type which is type that matches a string with 1 to 2 numbers before the colon and 2 numbers after.

Therefore, we can create a MarkTime variable t with value "09:00" and the TypeScript compiler will accept it.

Conclusion

To define a regex-matched string type in TypeScript, we can create a literal type that matches the pattern of a given string.

Sometimes, we want to get types from both keys and values of an object in TypeScript.

In this article, we’ll look at how to get types from both keys and values of an object in TypeScript.

How to get types from both keys and values of an object in TypeScript?

To get types from both keys and values of an object in TypeScript, we can use the keyof to return the union type of all the key values of an object.

Then we can use the returned type to get the types of the values with typeof.

For instance, we write

const keyToVal = {
  key1: "myValue1",
  key2: "myValue2",
} as const;

type Keys = keyof typeof keyToVal;
type Values = typeof keyToVal[Keys];

to create the Keys type with keyof typeof KeyToVal to assign Keys to the union type with 'key1‘ and 'key2' as the members of the union.

Then we create the Values type by using typeof keyToVal[Keys] to create a union type of all the values in keyToVal.

So Values is "myValue1" | "myValue2".

Conclusion

To get types from both keys and values of an object in TypeScript, we can use the keyof to return the union type of all the key values of an object.

Sometimes, we want to fix the ‘Error: *.default is not a constructor’ error with TypeScript.

In this article, we’ll look at how to fix the ‘Error: *.default is not a constructor’ error with TypeScript.

How to fix the ‘Error: *.default is not a constructor’ error with TypeScript?

To fix the ‘Error: *.default is not a constructor’ error with TypeScript, we should make sure the default export we’re importing is a class or constructor.

For instance, we write

export default class MapAction implements IMapAction {
  //...
}

to export the MapAction class as a default export with export default .

Then we can import the class in another module by writing

import MapAction from "./map-action";

Conclusion

To fix the ‘Error: *.default is not a constructor’ error with TypeScript, we should make sure the default export we’re importing is a class or constructor.