Author: John Au-Yeung

Sometimes, we want to allow image import with TypeScript.

In this article, we’ll look at how to allow image import with TypeScript.

How to allow image import with TypeScript?

To allow image import with TypeScript, we can use declare to declare the type for image files.

For instance, we write

declare module "*.png" {
  const value: any;
  export = value;
}

to declare the type for modules with the .png extension.

We just allow any property to be exported with

const value: any;
export = value;

And then we can import .png files without errors.

Conclusion

To allow image import with TypeScript, we can use declare to declare the type for image files.

Sometimes, we want to extend an enum in Typescript.

In this article, we’ll look at how to extend an enum in Typescript.

How to extend an enum in Typescript?

To extend an enum in Typescript, we can combine the 2 enums into a union type.

And then we can use the spread operator to spread the enum entries into a new object.

For instance, we write

enum Color1 {
  Red = "Red",
  Green = "Green",
}

enum Color2 {
  Yellow = "Yellow",
  Blue = "Blue",
}

type Colors = Color1 | Color2;
const Colors = { ...Color2, ...Color1 };

to create the Color1 and Color2 enums.

Then we create a union type between them and assign it to Colors.

Next, we create an object by spreading Color2 and Color1 into a new object and assign it to Colors.

Conclusion

To extend an enum in Typescript, we can combine the 2 enums into a union type.

And then we can use the spread operator to spread the enum entries into a new object.

To add the className prop to a component with React and TypeScript, we can add the React.HTMLAttributes type into our prop type.

For instance, we write

class MyComponent extends React.Component<
  MyProps & React.HTMLAttributes<HTMLDivElement>,
  {}
> {
  render() {
    return <div className={this.props.className}>My Div</div>;
  }
}

to set the prop type of MyComponent to MyProps & React.HTMLAttributes<HTMLDivElement>.

MyProps & React.HTMLAttributes<HTMLDivElement> is an intersection of the MyProps and React.HTMLAttributes<HTMLDivElement> types.

So the props that are in both types would be allowed in the combined types.

React.HTMLAttributes<HTMLDivElement> has the valid attributes of a div element as its properties, which includes className.

Conclusion

To add the className prop to a component with React and TypeScript, we can add the React.HTMLAttributes type into our prop type.

Sometimes, we want to add global types in TypeScript.

In this article, we’ll look at how to add global types in TypeScript.

How to add global types in TypeScript?

To add global types in TypeScript, we can add the declare global statement in a .d.ts file.

For instance, we write

declare global {
  interface String {
    fancyFormat(opts: StringFormatOptions): string;
  }
}

to add the String interface into the global type declaration to add the fancyFormat method to a string object.

We specify the signature of it with (opts: StringFormatOptions) and we specify that it returns a string.

Conclusion

To add global types in TypeScript, we can add the declare global statement in a .d.ts file.

Sometimes, we want to fix the "declaration or statement expected" error when exporting a function with TypeScript.

In this article, we’ll look at how to fix the "declaration or statement expected" error when exporting a function with TypeScript.

How to fix the "declaration or statement expected" error when exporting a function with TypeScript?

To fix the "declaration or statement expected" error when exporting a function with TypeScript, we can use the export keyword.

For instance, we write

const myfunction = () => {
  //...
};

export { myfunction };

to define the myFunction function and export it with export.

Conlusion

To fix the "declaration or statement expected" error when exporting a function with TypeScript, we can use the export keyword.