Author: John Au-Yeung

Sometimes, we want to add an optional function in Interface with TypeScript.

In this article, we’ll look at how to add an optional function in Interface with TypeScript.

How to add an optional function in Interface with TypeScript?

To add an optional function in Interface with TypeScript, we can add ? after the function name.

For instance, we write

interface I {
  validation?(flag: any): boolean;
}

to create the I interface that has the validation function.

We make the function by add ? after validation.

Conclusion

To add an optional function in Interface with TypeScript, we can add ? after the function name.

Sometimes, we want to export an imported interface with TypeScript.

In this article, we’ll look at how to export an imported interface with TypeScript.

How to export an imported interface with TypeScript?

To export an imported interface with TypeScript, we can use the export keyword.

For instance, we write

export { default as MessageBase } from "./message-base";

to export the MessageBase module as a default export.

We can export a member from a module by writing

export { IMessage } from "./message-types";

We export the IMessage interface from the ./message-types module.

Conclusion

To export an imported interface with TypeScript, we can use the export keyword.

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.