3

Can anyone tell me why should I use Interface in Typescript and what are they?

Example with Interface:

interface Person {
    firstName: string;
    lastName: string;
}

class Student {
    fullName: string;
    constructor(public firstName: string, public lastName: string) {
        this.fullName = firstName + " " + lastName;
    }
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let student = new Student("John", "Smith");
console.log(greeter(student));

OUTPUT: Hello, John Smith

Example without Interface same output:

class Student {
    fullName: string;
    constructor(firstName: string, lastName: string) {
        this.fullName = firstName + " " + lastName;
    }
}

function greeter(person : Student) {
    return "Hello, " + person.fullName;
}

let student = new Student("John", "Smith");
console.log(greeter(student));

OUTPUT: Hello, John Smith

Why is interface useful in this particular case? I find it hard to understand use of interface in typescript. Any detailed explanation is very appreciated!

Improve this question
4

3 Answers 3

Reset to default
3

JS is a loosely typed language. So following is possible:

var a = new Student();
a.fullName = a.firstName + ' ' + a.lastName

When you have interface defined, it knows what the schema of the object is and it will give you an error if you do the option.

The whole objective of Typescript is to provide compile time warnings. This can only be achieved, if your objects have pre-defined structure. This also helps in typings as IDE can give you valid suggestions.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Note: If you think above answer is incorrect/ not required. Please share your views along with your vote.
I think this is good answer for me to understand the difference, thanks!
@Mizlul Glad i was able to help you.
1

Interface are very nice way of defining the properties your object literal will have. It is the very similar to defining a contract based on strategy pattern on which your object literal will be validated by typescript. Your code will not compile as you are not implementing Person.

Improve this answer

Comments

1

Interfaces are useful for static type checking. Meaning, when you develop your app, your IDE (e.g. WebStorm or VS Code) can tell you you're going to try to access an undefined property, or that you are putting strings into a variable which expects a number.

Then again you can run these checks on build/transpile time. So, if you ship such code, you can tell it to prevent shipping faulty code.

E.g. in JavaScript you could ship this:

const x = {
  user: {
      name: 'Rajesh',
  },
};
console.log(x.myUser.name);

This code will ship and compile. But if you try to call it, this script will break and your website will not work.

If you had it as an interface, your IDE could warn you about the problem. And if you configure the bundler (e.g. tsc compiler) to not allow these problems, it will not even let you ship buggy code and your website will keep working.

So it's not exactly doing things technically useful once compiled into JavaScript, but from the build/"devops" perspective. Same as linters, same as tests, same as documentation. If you don't have it, it's ok, your website is working, but if you have any of those, it's less likely you're gonna break it.

Improve this answer

1 Comment

very nice explanation, thnx!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.