Category: TypeScript

Sometimes, we want to create a global variable in TypeScript.

In this article, we’ll look at how to create a global variable in TypeScript.

How to create a global variable in TypeScript?

To create a global variable in TypeScript, we can put the variable in the Window on Global interfaces in a global type definition file.

For instance, we write

type MyGlobalFunctionType = (name: string) => void;

interface Window {
  myGlobalFunction: MyGlobalFunctionType;
}

in a .d.ts file in our TypeScript project to add the myGlobalFunction property to the Window interface.

Then we can use window.myGlobalFunction any where in our app’s code if it runs in the browser.

Likewise, we can do the same thing to add Node.js global variables by writing

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType;
  }
}

to add the myGlobalFunction property into the Global interface if our Node.js TypeScript project.

Then we can use it by writing global.myGlobalFunction in our Node app without compiler errors.

Conclusion

To create a global variable in TypeScript, we can put the variable in the Window on Global interfaces in a global type definition file.

Sometimes, we want to define interfaces for nested objects with TypeScript.

In this article, we’ll look at how to define interfaces for nested objects with TypeScript.

How to define interfaces for nested objects with TypeScript?

To define interfaces for nested objects with TypeScript, we can use index signatures with interfaces.

For instance, we write

export interface Item {
  id: number;
  size: number;
}

export interface Example {
  name: string;
  items: {
    [key: string]: Item;
  };
}

to create the Item interface that we set as the type for any properties in the items object property in the Example interface.

Adding [key: string] means that items can have any keys.

And we set the type of them to Item so they all have the Item type.

Conclusion

To define interfaces for nested objects with TypeScript, we can use index signatures with interfaces.

Sometimes, we want to fix the ‘Missing file extension "ts" import/extensions’ error with TypeScript and ESLint.

In this article, we’ll look at how to fix the ‘Missing file extension "ts" import/extensions’ error with TypeScript and ESLint.

How to fix the ‘Missing file extension "ts" import/extensions’ error with TypeScript and ESLint?

To fix the ‘Missing file extension "ts" import/extensions’ error with TypeScript and ESLint, we should add the ts extension into the import/extension property.

For instance, we write

{
  //...
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
  //...
}

to add ts into the import/extensions array in .eslintrc to clear the error.

Conclusion

To fix the ‘Missing file extension "ts" import/extensions’ error with TypeScript and ESLint, we should add the ts extension into the import/extension property.

Sometimes, we want to test for array of string type in TypeScript.

In this article, we’ll look at how to test for array of string type in TypeScript.

How to test for array of string type in TypeScript?

To test for array of string type in TypeScript, we can use the Array.isArray and the array every instance method.

For instance, we write

const isArrayOfStrings = (value: any): boolean => {
  return (
    Array.isArray(value) && value.every((item) => typeof item === "string")
  );
};

to call Array.isArray to check if value is an array.

And we use

value.every((item) => typeof item === "string");

to check if every item in value is a string with value.every.

Conclusion

To test for array of string type in TypeScript, we can use the Array.isArray and the array every instance method.

Sometimes, we want to use Object.values with TypeScript.

In this article, we’ll look at how to use Object.values with TypeScript.

How to use Object.values with TypeScript?

To use Object.values with TypeScript, we should set the compilerOptions.lib option to include 'es2017' or a later version of JavaScript.

For instance, we write

{
  //...
  "compilerOptions": {
    "lib": ["es2017", "dom"]
  }
  //...
}

in tsconfig.json to include 'es2017' in the compilerOptions.lib array so that the TypeScript compiler is aware that features in ES2017, including Object.values are available.

Conclusion

To use Object.values with TypeScript, we should set the compilerOptions.lib option to include 'es2017' or a later version of JavaScript.