You’re building a simple form and need to handle user profile data: name, email, and age. You want strong TypeScript type checking, clean code, and something easy to refactor later. But now you’re stuck: should this be a class or an interface?
This question shows up everywhere, API response models, form validation, domain models, even small utility objects. Sometimes you just need a shape for your data. Other times you also need behavior, like methods that validate or transform that data. That’s exactly where choosing between TypeScript classes and interfaces becomes important.
In this article, I’ll show you 4 ways to choose between TypeScript classes and interfaces in TypeScript.
Method 1 – Use Interfaces for Pure Data Shapes
When you only care about the structure of your data and don’t need behavior or instances, an interface fits best. This is perfect for API responses, plain objects, and form values.
We’ll use a consistent example: a user profile coming from a form or an API.
Step 1: Define the interface for your data
interface UserProfile {
name: string;
email: string;
age: number;
isActive: boolean;
}How does this code work?
The interface keyword declares a UserProfile type with four properties: name, email, age, and isActive, all required. Any object that you assign to UserProfile must have these properties with the correct TypeScript type. The interface exists only at compile time and disappears when JavaScript is generated, so it’s used purely for type checking and not for runtime behavior.
Step 2: Use the interface in a function
function createWelcomeMessage(user: UserProfile): string {
return `Welcome ${user.name}! Your email is ${user.email}.`;
}
const newUser: UserProfile = {
name: "Alex",
email: "alex@example.com",
age: 30,
isActive: true,
};
const message = createWelcomeMessage(newUser);
console.log(message);Expected output:
Welcome Alex! Your email is alex@example.com.
You can refer to the screenshot below to see the output.
How does this code work?
The createWelcomeMessage function accepts a user parameter of type UserProfile, which ensures the object passed in has the required properties with correct types. The constant newUser is a plain object that TypeScript checks against the UserProfile interface. The compiler throws errors if you forget a property or use a wrong type, giving you strong type safety without runtime overhead.
Pro Tip
Use interfaces for data-only models like API payloads, Redux state, or form values. They keep your code light because there’s no runtime class and only compile-time type checking.
Method 2 – Use Classes When You Need Behavior
When you need both data and operations that act on that data, a class is often the better choice. This fits domain models, entities, and reusable logic.
We’ll extend the same user profile example but add behavior like activation and validation.
Step 1: Create a class with data and methods
class UserProfileModel {
name: string;
email: string;
age: number;
isActive: boolean;
constructor(name: string, email: string, age: number, isActive: boolean = false) {
this.name = name;
this.email = email;
this.age = age;
this.isActive = isActive;
}
activate(): void {
this.isActive = true;
}
getDisplayName(): string {
return `${this.name} (${this.email})`;
}
}
const userModel = new UserProfileModel("Alex", "alex@example.com", 30);
userModel.activate();
console.log(userModel.getDisplayName(), userModel.isActive);Expected output:
Alex (alex@example.com) true
You can refer to the screenshot below to see the output.
How does this code work?
The UserProfileModel class defines properties and methods in one place. The constructor runs when you create a new instance with the new keyword and sets up the initial values. The activate method changes the isActive flag, and getDisplayName returns a formatted string. Unlike interfaces, classes become real JavaScript objects at runtime, and you can use features like constructors, member visibility, and instance methods.
Pro Tip
Use classes when you need instances, methods, or behavior tied to your data. Think of classes as blueprints for objects, while interfaces are contracts for their shape.
Method 3 – Combine Interface + Class for Strong Contracts
Often, the best choice is to use a TypeScript interface to define the contract and a class to implement it. This keeps your public shape clear while letting you add logic inside the class.
This is useful when you have a public API, shared models, or you work in a team and need clear structure.
Step 1: Define the interface for the contract
interface IUserProfile {
name: string;
email: string;
age: number;
isActive: boolean;
activate(): void;
getDisplayName(): string;
}How does this code work?
The IUserProfile interface defines both properties and method signatures. It acts as a contract that states any implementing type must have name, email, age, isActive, plus activate and getDisplayName. TypeScript checks any implementation against this contract at compile time.
Step 2: Implement the interface in a class
class UserProfileEntity implements IUserProfile {
name: string;
email: string;
age: number;
isActive: boolean;
constructor(name: string, email: string, age: number, isActive: boolean = false) {
this.name = name;
this.email = email;
this.age = age;
this.isActive = isActive;
}
activate(): void {
this.isActive = true;
}
getDisplayName(): string {
return `${this.name} (${this.email})`;
}
}
const userEntity: IUserProfile = new UserProfileEntity("Alex", "alex@example.com", 30);
userEntity.activate();
console.log(userEntity.getDisplayName(), userEntity.isActive);Expected output:
Alex (alex@example.com) true
You can refer to the screenshot below to see the output.
How does this code work?
The UserProfileEntity class uses the implements keyword to promise that it follows the IUserProfile interface. TypeScript enforces that the class includes all required properties and methods with matching types. The TypeScript variable userEntity is typed as IUserProfile, which means other parts of your code depend on the contract, not the concrete class. This pattern improves type safety and makes refactoring easier because you can swap implementations as long as they respect the interface.
Pro Tip
Combine interfaces and classes when you want clear contracts plus behavior. This is especially useful in larger apps, libraries, or when you design public APIs.
Method 4 – Use Interfaces with Utility Objects and Functions
Sometimes you don’t need a full class; utility functions plus interfaces are more flexible. This works well when you rely on TypeScript type inference and pure functions instead of stateful objects.
We’ll keep the same user profile but use helper functions instead of methods on a class.
Step 1: Define a reusable interface for user profile
We’ll reuse the UserProfile interface from Method 1, but you could also create a narrower interface just for validation.
interface UserProfile {
name: string;
email: string;
age: number;
isActive: boolean;
}How does this code work?
This UserProfile interface again defines the shape of your user data. It lets you reuse the same type across different functions, modules, or features, while keeping everything strongly typed. Interfaces are ideal for sharing types without coupling them to a Typescript class.
Step 2: Create utility functions that use the interface
function isAdult(user: UserProfile): boolean {
return user.age >= 18;
}
function toUserSummary(user: UserProfile): string {
const status = user.isActive ? "active" : "inactive";
return `${user.name} (${user.email}) - ${status}, age ${user.age}`;
}
const userObj: UserProfile = {
name: "Alex",
email: "alex@example.com",
age: 30,
isActive: true,
};
console.log(isAdult(userObj));
console.log(toUserSummary(userObj));Expected output:
true
Alex (alex@example.com) - active, age 30
How does this code work?
The isAdult and toUserSummary functions take a UserProfile parameter, so TypeScript checks the incoming object against the interface. The functions stay pure and stateless, which makes them easy to test and reuse. You get strong type safety from the interface without adding a class or extra runtime code.
Pro Tip
Prefer interfaces + functions when you don’t need object instances or inheritance. This keeps your code more functional, testable, and avoids overusing classes for simple data transformations.
Things to Keep in Mind
- Interfaces vanish at runtime
Interfaces are only for type checking and do not exist in the compiled JavaScript. Don’t expect to use instanceof with an interface. - Classes are real runtime objects
Classes compile to JavaScript functions and prototypes. You can instantiate them, use new, and rely on methods, constructors, and member visibility like public, private, and protected. - Use interfaces for data, classes for behavior
As a practical rule, use interfaces for data containers such as DTOs or API models, and classes when you need encapsulated behavior, state changes, or inheritance. - Watch optional properties and strict mode
When you add optional properties with ?, be careful under strict mode and strict null checks. Always handle missing values to avoid runtime errors. - Be careful with any vs unknown
Avoid any because it turns off type checking. Prefer unknown and narrow it using runtime checks, especially when working with API data or external input. - Interfaces can extend multiple types
Interfaces can extend multiple other interfaces, which is handy for composing complex shapes. Classes can only extend one base class, so don’t use them just to stack data contracts.
You’ve seen four practical ways to choose between TypeScript classes and interfaces using a single user profile example. Use interfaces when you only need a data shape, classes when you need behavior and instances, and mix both when you want clear contracts and implementation flexibility.
Pick the method that matches your use case: simple data (interfaces), rich behavior (classes), or a combination for larger apps. I hope you found this article helpful.
You may also like to read:
- Convert JSON to TypeScript Interface in TypeScript
- Set Default Values for TypeScript Types in TypeScript
- TypeScript Generic Anonymous Functions
- What does “TypeError: is not a function” mean in TypeScript?
Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.
