Category: TypeScript

Sometimes, we want to get type of array items with TypeScript.

In this article, we’ll look at how to get type of array items with TypeScript.

How to get type of array items with TypeScript?

To get type of array items with TypeScript, we can use lookup types.

For instance, we write

type Foo = Array<{ name: string; test: number }>;
type FooItem = Foo[0];

to get the type for array entries in the Foo type.

To do this, we just use Foo[0] to return the type of the items in with the Foo array type.

And we assign the returned type to FooItem.

Conclusion

To get type of array items with TypeScript, we can use lookup types.

Sometimes, we want to access TypeScript enum by ordinal.

In this article, we’ll look at how to access TypeScript enum by ordinal.

How to access TypeScript enum by ordinal?

To access TypeScript enum by ordinal, we can get the index of the enum entry with Object.keys and array indexOf.

For instance, we write

enum LookingForEnum {
  Romantic = "Romantic",
  Casual = "Casual",
  Friends = "Friends",
  Fun = "Fun",
}

const index: number = Object.keys(LookingForEnum).indexOf("Casual");

to call Object.keys with LookingForEnum to return the keys in the enum.

Then we call indexOf with the key we’re looking for as a string to return the index of the entry.

Therefore, index is 1.

Conclusion

To access TypeScript enum by ordinal, we can get the index of the enum entry with Object.keys and array indexOf.

Sometimes, we want to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript.

In this article, we’ll look at how to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript.

How to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript?

To fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript, we should declare our variable with a type annotation.

For instance, we write

const color: { [key: string]: any } = {
  red: null,
  green: null,
  blue: null,
};

to declare the color object with the { [key: string]: any }, which lets us include any properties with string keys in the color object.

Conclusion

To fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript, we should declare our variable with a type annotation.

Sometimes, we want to fix the "Cannot read property ‘push’ of undefined in [null]" error with TypeScript.

In this article, we’ll look at how to fix the "Cannot read property ‘push’ of undefined in [null]" error with TypeScript.

How to fix the "Cannot read property ‘push’ of undefined in [null]" error with TypeScript?

To fix the "Cannot read property ‘push’ of undefined in [null]" error with TypeScript, we need to make sure the variable we call push on is an array.

For instance, we write

const stringArr: Array<string> = [];

or

const stringArr: string[] = [];

to declare the stringArr array.

Then we can call stringArr.push without errors.

Conclusion

To fix the "Cannot read property ‘push’ of undefined in [null]" error with TypeScript, we need to make sure the variable we call push on is an array.

Sometimes, we want to fix TypeScript ts-jest not recognizing ES6 imports.

In this article, we’ll look at how to fix TypeScript ts-jest not recognizing ES6 imports.

How to fix TypeScript ts-jest not recognizing ES6 imports?

To fix TypeScript ts-jest not recognizing ES6 imports, we need to transform ES6 modules into something Jest can use.

For instance, we write

{
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.tsx?$": "ts-jest"
    }
    // ...
  }
}

in our Jest config file to transform jsx files with babel-jest so they can be run with

"^.+\\.jsx?$": "babel-jest"

Conclusion

To fix TypeScript ts-jest not recognizing ES6 imports, we need to transform ES6 modules into something Jest can use.