TS1373: Convert to type-only import

TypeScript is a powerful programming language that builds on JavaScript by adding static types. These types are a way to define the structure of your data, enabling you to catch errors early in the development process. Types can be primitive (like numbers and strings), or complex (like interfaces, which are outlines for objects). For those eager to dive deeper into TypeScript and enhance their coding skills, I recommend subscribing to my blog or using AI tools like gpteach to learn how to code effectively.

What Are Types?

In TypeScript, types provide a means of documenting the expected shape and behavior of data structures. They can help ensure that variables hold the appropriate values and that functions are called with the right arguments. Types can be broadly categorized into several groups, including primitive types (e.g., string, number, boolean), object types (e.g., interfaces, classes), and union types (which allow for multiple possible types).

---

TS1373: Convert to type-only import

The error TS1373 generally arises when there is confusion between importing types and regular values in TypeScript. This issue typically occurs when you try to import a type definition but inadvertently import the actual implementation instead. Knowing how to resolve this can enhance code clarity and efficiency.

Error Scenario

Suppose you have a file shapes.ts:

// shapes.ts
export interface Circle {
    radius: number;
}

export class Square {
    constructor(public side: number) {}
}

And in another file, you're trying to import Circle and Square:

// index.ts
import { Circle, Square } from './shapes';

In this example, the import of Square is a value import, but if you only need to use the type of Circle, TypeScript will give you a TS1373 error.

Fixing TS1373: Convert to type-only import

To resolve the TS1373 error, you should convert your import to a type-only import:

// Corrected index.ts
import type { Circle } from './shapes'; // Type-only import
import { Square } from './shapes'; // Regular value import

By using import type, we indicate to TypeScript that this import is only for type-checking purposes, and no actual code from shapes.ts will be included in the final output.

Important to Know!

• Type-only imports are a way to optimize the code, avoiding unnecessary code bundling in the output.
• Always use import type for importing types if you do not need the implementation in your output code.

More Examples

Another common issue that leads to the TS1373 error happens when we try to use a type in a context where TypeScript expects a value. Consider the following:

// shapes.ts
export type Shape = Circle | Square;

And if you try to use Shape like this:

// index.ts
import type { Shape } from './shapes';

const myShape: Shape = new Shape(); // TS1373 error here

Important to Know!

• Shape is a type, not a class. You cannot instantiate a type.
• Use union types to define shapes but instantiate the actual classes that represent those shapes.

FAQ Section

Q: What does it mean to import a type-only?
A: Importing a type-only means you're only using that import for type checking and you do not want the actual implementation to be included in the output code.

Q: Can I mix value and type imports?
A: Yes, you can mix them as shown in the example. Just make sure to use import type for types.

Q: Why is TS1373 important?
A: Understanding and properly using type-only imports helps manage dependencies better and can lead to smaller output files in TypeScript projects.

By following these guidelines and understanding the TS1373: Convert to type-only import error, you can enhance the maintainability of your TypeScript code and ensure better performance. Remember, clarity in imports often leads to clarity in your applications!