Intefaces vs Types in TypeScript

1. the Similarities of Interfaces and Types in TypeScript
2. Differences Between Interfaces and Types in TypeScript
3. Conclusion

TypeScript is a programming language maintained by Microsoft and is a superset of JavaScript with support for strong typing. TypeScript becomes extremely useful for organizations having large codebases.

TypeScript helps prevents run time errors which would be inevitable in the case of JavaScript for wrongly inferred types.

Proper tools and IDE supporting TypeScript can suggest code completions, detect errors in types, automatically fix errors, and much more. TypeScript can give all this support with the help of Interfaces and Types.

This article focuses on the various aspects of Interfaces and Types and when to use them. There are some basic types in TypesSript using Interfaces and Types are constructed.

the Similarities of Interfaces and Types in TypeScript

The following code segment shows an example of an interface in TypeScript.

interface Point {
    x : number;
    y : number;
}
interface Circle{
    center : Point;
    radius : number;
}
const circle : Circle = {
    center : {
        x : 2, 
        y : 3
    }, 
    radius: 5
}
console.log(`Circle = [center :{${circle.center.x}, ${circle.center.y}}, \
radius : ${circle.radius} ]`)

Now we can implement the same construct with Types. The following code segment shows this.

type Point =  {
    x : number;
    y : number;
}
type Circle = {
    center : Point;
    radius : number;
}

Both of the constructs will give the same output.

Output:

Circle = [center :{2, 3}, radius : 5 ]

A simple typo in the attribute name will fail the compilation and prevent run-time errors.

Differences Between Interfaces and Types in TypeScript

Both Types and Interfaces can extend others, thus supporting the strongly-typed OOP paradigm.

However, the syntax for extending is different. The following code segments show how this is possible.

type PointType = {
    x : number
    y : number
}

interface RadiusType {
    radius : number
}

// valid
type Circle = RadiusType & PointType;
// valid
interface Circle extends RadiusType, PointType {}

// use it as
const circle : Circle = {
    x : 3, 
    y : 4, 
    radius : 3
};

Interfaces and classes in TypeScript act as static blueprints and therefore can not extend type aliases with union operators in the type definition. For example:

type Animal = string;
type Living = bool;

type AnimalOrLiving = Animal | Living;
// will show error in compilation
interface Creature extends AnimalOrLiving {}
// will show error in compilation
class Creature extends AnimalOrLiving {}

Finally, Interfaces in TypeScript support declaration merging, which doesn’t work with Type Aliases. Interfaces declared multiple times would merge into one, while multiple declarations of Type Aliases will give errors.

It becomes useful in the case of the production of a public API so that consumers can make further additions to the API by declaring it again. For example:

interface Animal {
    type: string
}

interface Animal {
    legs : number
}

interface Animal {
    eyes : number
}

// use it as 
const Dog : Animal = {
    type : 'dog',
    legs : 2, 
    eyes : 2
}

Conclusion

Thus to summarize, there are subtle differences to be kept in mind while working with Types and Interfaces in TypeScript.

Interfaces are preferred when designing an API library or declaring objects. Types are preferred more in declaring constants and as return types for functions.