Category: TypeScript

Sometimes, we want to export a variable with TypeScript.

In this article, we’ll look at how to export a variable with TypeScript.

How to export a variable with TypeScript?

To export a variable with TypeScript, we can use the export keyword.

We can export a variable as a default export by writing

const arr = [1, 2, 3];
export default arr;

We use export default to export arr as a default export.

Then we can import it by writing

import arr from "./file1";

We can also export something as a named import.

To do this, we write

const arr = [1, 2, 3];
export { arr };

to export the arr variable.

Then we can import it by writing

import { arr } from "./file1";

Conclusion

To export a variable with TypeScript, we can use the export keyword.

Sometimes, we want to fix the "X refers to a value, but is being used as a type here (TS2749)" error with React and TypeScript.

In this article, we’ll look at how to fix the "X refers to a value, but is being used as a type here (TS2749)" error with React and TypeScript.

How to fix the "X refers to a value, but is being used as a type here (TS2749)" error with React and TypeScript?

To fix the "X refers to a value, but is being used as a type here (TS2749)" error with React and TypeScript, we should make sure our React TypeScript component files have the .tsx extension rather than .ts.

If they have the .ts extension, then we should rename them to have the .tsx extension.

Conclusion

To fix the "X refers to a value, but is being used as a type here (TS2749)" error with React and TypeScript, we should make sure our React TypeScript component files have the .tsx extension rather than .ts.

Sometimes, we want to cast int to enum strings in TypeScript.

In this article, we’ll look at how to cast int to enum strings in TypeScript.

How to cast int to enum strings in TypeScript?

To cast int to enum strings in TypeScript, we can use numbers to access the enum values unless we assign the enum to different values.

For instance, we write

export enum Type {
  Info,
  Warning,
  Error,
  Fatal,
}

const x = Type[0];

to create the Type enum.

Then we can get 'Info' by using Type[0] since the first entry of an enum has 0 assigned to it as its value by default.

Conclusion

To cast int to enum strings in TypeScript, we can use numbers to access the enum values unless we assign the enum to different values.

To fix the ‘TypeScript: Spread types may only be created from object types’ error, we can cast our variable into an object.

For instance, we write

const foo = <T extends object>(t: T): T => {
  return { ...(t as object) } as T;
};

to cast t into an object with as so that the TypeScript compiler knows that t is an object.

Then we can use the spread operator on t without TypeScript compiler errors.

Conclusion

To fix the ‘TypeScript: Spread types may only be created from object types’ error, we can cast our variable into an object.

Sometimes, we want to find an array item with TypeScript.

In this article, we’ll look at how to find an array item with TypeScript.

How to find an array item with TypeScript?

To find an array item with TypeScript, we can use the array find method.

For instance, we write

const array = [
  { id: 1, value: "itemname" },
  { id: 2, value: "itemname" },
];

const item1 = array.find((i) => i.id === 1);

to get the item with id 1 from array and return it with

array.find((i) => i.id === 1)

We call find with a callback that returns the condition of the item we’re looking for in array.

Conclusion

To find an array item with TypeScript, we can use the array find method.