Author: John Au-Yeung

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.

Sometimes, we want to reexport a class in TypeScript.

In this article, we’ll look at how to reexport a class in TypeScript.

How to reexport a class in TypeScript?

To reexport a class in TypeScript, we can use the export keyword.

To export a class that’s a member of another module, we write

export { A } from "a";

where A is the class that we want to export from module a.

To export a class that’s a default export, we write

export { default } from "d";

to export default instead of the class name.

Conclusion

To reexport a class in TypeScript, we can use the export keyword.

Sometimes, we want to fix the "is not newable" error when passing class as parameter with TypeScript.

In this article, we’ll look at how to fix the "is not newable" error when passing class as parameter with TypeScript.

How to fix the "is not newable" error when passing class as parameter with TypeScript?

To fix the "is not newable" error when passing class as parameter with TypeScript, we can create a interface with the new keyword and then use that as the type of the class parameter.

For instance, we write

interface IMyClass {
  new (name: string): MyClass;
}

const test = (MyClass: IMyClass) => {
  const obj = new MyClass("hello");
};

to create the IMyClass interface that has the new property with the signature being the MyClas constructor’s signature and the type set to MyClass.

Then we set that as the type of the MyClass parameter in the test function and then we can create a new MyClass instance in the function without errors.

Conclusion

To fix the "is not newable" error when passing class as parameter with TypeScript, we can create a interface with the new keyword and then use that as the type of the class parameter.

Sometimes, we want to check for string equality with TypeScript.

In this article, we’ll look at how to check for string equality with TypeScript.

How to check for string equality with TypeScript?

To check for string equality with TypeScript, we can use the === operator.

For instance, we write

if (x === y) {
} else {
}

to check if x and y have the same value with ===.

Conclusion

To check for string equality with TypeScript, we can use the === operator.