You’re building a simple user dashboard. You fetch user data, validate inputs, and trigger actions like save or delete. Then your functions start growing. You pass them around objects, and suddenly you lose track of what each function should accept or return.
This is where TypeScript interface function properties help. You can define exactly how a function should behave when it lives inside an object. This keeps your code predictable and easier to maintain.
In this article, I’ll show you 4 ways to use TypeScript interface function properties in TypeScript.
Method 1 – Define Function Properties Directly in an Interface
Use this when you want a clean and simple structure for objects that include functions.
Step 1: Create an Interface with a Function Property
interface UserActions {
save: (name: string) => boolean;
}How does this code work?
The interface UserActions defines a function property called save. It accepts a string and returns a boolean.
Step 2: Implement the Interface
const userActions: UserActions = {
save: (name: string) => {
console.log(`Saving ${name}`);
return true;
}
};Step 3: Call the Function
userActions.save("John");Output:
Saving John
You can refer to the screenshot below to see the output.
How does this code work?
You create an object that matches the interface. TypeScript checks that the function signature matches exactly.
Pro Tip: Always define return types explicitly. It prevents accidental return mismatches in strict mode.
Method 2 – Use Method Syntax in Interfaces
Use this when you prefer a cleaner, class-like syntax.
Step 1: Define Interface Using Method Syntax
interface UserActions {
save(name: string): boolean;
}How does this code work?
Instead of arrow function syntax, you define the function like a method. Both styles are equivalent.
Step 2: Implement the Interface
const userActions: UserActions = {
save(name: string) {
console.log(`Saving ${name}`);
return true;
}
};Step 3: Call the Method
userActions.save("John");Output:
Saving John
You can refer to the screenshot below to see the output.
How does this code work?
TypeScript checks that the object includes a method named save with the correct parameter and return type.
Pro Tip: Use method syntax when your interface models real-world TypeScript objects or services. It improves readability.
Method 3 – Use Optional Function Properties
Use this when a function may or may not exist.
Step 1: Define Optional Function Property
interface UserActions {
save?: (name: string) => boolean;
}How does this code work?
The ? makes the function optional. The object may or may not include it.
Step 2: Implement Without the Function
const userActions: UserActions = {};Step 3: Safely Call the Function
userActions.save?.("John");Output:
No error, no output.
How does this code work?
The optional chaining operator (?.) checks if the function exists before calling it. This prevents runtime errors.
Pro Tip: Always use optional chaining with optional function properties to avoid “undefined is not a function” errors.
Method 4 – Use Function Type Aliases Inside Interfaces
Use this when you reuse the same function signature across multiple interfaces.
Step 1: Create a Function Type Alias
type SaveFunction = (name: string) => boolean;
How does this code work?
A type alias lets you define a reusable function signature.
Step 2: Use It in an Interface
interface UserActions {
save: SaveFunction;
}Step 3: Implement the Interface
const userActions: UserActions = {
save: (name) => {
console.log(`Saving ${name}`);
return true;
}
};Step 4: Call the Function
userActions.save("John");Output:
Saving John
You can refer to the screenshot below to see the output.
How does this code work?
You reuse the SaveFunction type. This avoids repeating the same function signature.
Pro Tip: Use type aliases for shared logic across modules. It keeps your code DRY and consistent.
Things to Keep in Mind
- Match function signatures exactly: Even small mismatches in parameters or return types cause compile errors.
- Avoid using any: It disables type safety and defeats the purpose of TypeScript.
- Use optional chaining for optional functions: Prevent runtime crashes when functions are undefined.
- Understand strict mode behavior: In strict mode, TypeScript enforces null and undefined checks more strictly.
- Prefer reusable types: Use type aliases when multiple TypeScript interfaces share the same function shape.
- Interface vs type choice: Interfaces are better for object structures, while type aliases work well for functions and unions.
You learned four practical ways to use TypeScript interface function properties with real examples.
Use direct definitions for simplicity, method syntax for readability, optional properties for flexibility, and type aliases for reuse.
I hope you found this article helpful.
You may also like to read:
- Require vs Import in TypeScript
- Unknown vs Any in TypeScript
- TypeScript Objects With Advanced Type Safety
- TypeScript Switch Statements
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.
