代码之家 › 专栏 › 技术社区 › Mizlul

为什么要在Typescript中使用接口

typescript javascript

1

Mizlul · 技术社区 · 7 年前

有人能告诉我为什么我要在Typescript中使用接口吗?它们是什么?

接口示例:

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));

输出:

没有相同输出接口的示例:

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));

输出: 你好,约翰·史密斯

为什么接口在这种特殊情况下有用?我发现很难理解typescript中接口的用法。非常感谢您的详细解释!

3 回复 | 直到 7 年前

1

3

Rajesh Rahul 7 年前

JS是一种松散类型的语言。因此,以下是可能的:

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

当您定义了接口时,它知道对象的模式是什么,如果您执行该选项,它将给您一个错误。

Typescript的全部目标是提供编译时警告。只有在对象具有预定义结构的情况下,才能实现这一点。这也有助于打字,因为IDE可以为您提供有效的建议。

2

1

Pranay Tripathi 7 年前

接口是定义对象文字将具有的属性的非常好的方法。这非常类似于基于策略模式定义契约,typescript将根据该策略模式验证对象文本。您的代码不会编译,因为您没有实现 Person .

3

1

Zlatko 7 年前

接口对于静态类型检查很有用。也就是说,当你开发你的应用程序时,你的IDE(例如WebStorm或VS代码)可以告诉你你将尝试访问一个未定义的属性,或者你将字符串放入一个需要数字的变量中。

例如,在JavaScript中,您可以发布以下内容:

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

这段代码将被发送和编译。但是如果你尝试调用它,这个脚本将崩溃,你的网站将无法工作。

如果将其作为接口,IDE可能会警告您该问题。如果您将捆绑程序(例如tsc编译器)配置为不允许出现这些问题,它甚至不会让您发送错误代码,您的网站将继续工作。

所以不是 确切地 在编译成JavaScript后,从build/“devops”的角度做一些技术上有用的事情。与过梁相同,与测试相同,与文档相同。如果你没有,也没关系,你的网站正在运行,但是如果你有这些,你就不太可能破坏它。