草庐IT

关于 TypeScript 接口，你需要知道的十件事

佚名 2023-03-28 原文
TypeScript 中的接口是一个非常灵活的概念。除了抽象类的部分行为外，它还经常被用来描述“一个对象的形状”。

01.必需的属性

定义接口时，需要使用interface关键字：

interface User {
name: string;
sex: string;
}
const user: User = {
name: "Bytefer",
sex: "male",
};
在上面的代码中，我们定义了一个用户界面。然后定义一个用户变量并将其类型设置为用户类型。

但是，如果我们给用户变量赋值，相关的属性就丢失了。然后，TypeScript编译器会提示相关错误。例如，在下面的代码中，我们在分配时缺少 sex 属性：

那么如何解决上面的错误呢？解决方案之一是使用 ? 在定义接口时声明一些属性是可选的。

02.可选属性

interface User {
name: string;
sex?: string;
}
let user: User = { // OK
name: "Bytefer",
};
user = { // Ok
name: "Bytefer",
sex: "male",
};
既然不允许缺少属性，那么可以添加未声明的属性吗？

从上图可以看出，使用对象字面量赋值时，包括未声明的age属性，也会报错。解决此问题的最简单方法是向 User 类型添加一个 age 属性：

interface User {
name: string;
sex?: string;
age: number;
}
这种方案虽然可以解决问题，但是如果我们想添加其他任意属性，这种方式就不太好了。为满足上述要求，我们可以使用索引签名。

03.索引签名

索引签名的语法如下：

键的类型只能是字符串、数字、符号或模板字面量类型，而值的类型可以是任何类型。

现在我们了解了索引签名的语法，让我们更新用户类型：

interface User {
name: string;
sex?: string;
[propName: string]: any; // Index Signatures
}
更新 User 类型，并添加新的 age 和 email 属性后，TypeScript 编译器不会提示错误。

let user: User = {
name: "Bytefer",
sex: "male",
age: 30,
email: "bytefer@gmail.com"
};

04.只读属性

在web系统中，我们需要区分不同的用户，一般情况下，我们会使用一个id属性来标识不同的用户。该属性由Web系统自动生成，用户无法修改。对于上面的场景，我们可以使用readonly修饰符来定义只读属性。

除了属性之外，对象还可能包含方法。在使用接口定义对象类型时，我们还可以同时声明对象上存在的方法：

interface User {
id: string;
name: string;
say(words: string): void;
}
let user: User = {
id: "6666",
name: "Bytefer",
say(words: string) {
console.log(words);
},
};

05.Call Signatures

描述函数的最简单方法是使用函数类型表达式，这些类型在语法上类似于箭头函数：

const log: (msg: string) => void = (msg: string) => {
console.log(msg);
};
log("Bytefer");
语法 (msg: string) => void 的意思是“一个函数，它有一个名为 msg 的参数，类型为字符串，没有返回值”。当然，我们可以使用类型别名来命名函数类型：

type LogFn = (msg: string) => void;
const log: LogFn = (msg: string) => {
console.log(msg);
};
如果我们想描述一些可以用属性调用的东西，函数本身也是一个对象。那么函数类型表达式不能满足这个要求。对于这种场景，我们可以在定义对象类型时使用调用签名：

需要注意的是，在声明调用签名时，也支持重载：

interface Logger {
type: string;
(msg: string): void;
(msg: string, timestamp: number): void
(msg: string, timestamp: number, module: string): void
}

06.构建签名

除了直接调用函数，我们还可以使用new运算符来调用函数，一般称为构造函数。我们可以通过在调用签名前添加 new 关键字来编写构造签名：

interface PointConstructor {
new (x: number, y: number): { x: number; y: number };
}
function createPoint(ctor: PointConstructor,
x: number = 0, y: number = 0) {
return new ctor(x, y);
}
class Point {
constructor(public x: number, public y: number) {}
}
const zero = createPoint(Point);
console.log(zero);

07.混合类型

那么在定义接口的时候，是否可以同时使用调用签名和构造签名呢？答案是肯定的，我们常用的Date对象，它的类型是DateConstructor，其中调用签名和构造签名都用到了：

declare var Date: DateConstructor;
在上面的代码中，除了调用签名和构造签名外，还定义了 Date 构造函数上的属性和方法。

08.通用接口

通用类型也可以与接口一起使用。下面是一个通用接口。

interface KeyPair<T, U> {
key: T;
value: U;
}
let kv1: KeyPair<number, string> = { key: 1, value: "Bytefer" };

09.扩展接口

接口可以扩展一个或多个接口，这使得编写接口灵活且可重用。

interface Point1D {
x: number;
}
interface Point2D extends Point1D {
y: number;
}
interface Point3D extends Point2D {
z: number;
}
const point1D = { x: 0 };
const point2D = { x: 0, y: 0 };
const point3D = { x: 0, y: 0, z: 0 };
除了扩展单个接口，TypeScript 还允许我们扩展多个接口：

interface CanSay {
say(words: string) :void
}
interface CanWalk {
walk(): void;
}
interface Human extends CanSay, CanWalk {
name: string;
}

10.扩展类

当声明一个接口时，我们可以扩展一个或多个接口。其实我们也可以扩展一个声明的类：

class Point1D {
public x!: number;
}
interface Point2D extends Point1D {
y: number;
}
const point2D: Point2D = { x: 0, y: 0 }
对于一个类，在声明类的时候，可以同时实现多个接口：

interface CanSay {
say(words: string) :void
}
interface CanWalk {
walk(): void;
}
class Person implements CanSay, CanWalk {
constructor(public name: string) {}
public say(words: string) :void {
console.log(`${this.name} says：${words}`);
}
public walk(): void {
console.log(`${this.name} walk with feet`);
}
}
对于 TypeScript 开发者来说，接口和类型有很多相似之处，当然也有一些不同。

TypeScript关于spanstylecolor开发前端$TypeScript接口

有关关于 TypeScript 接口，你需要知道的十件事的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

  3. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  4. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

  5. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  6. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  7. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

    我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

  8. ruby - 我需要从 facebook 游戏中抓取数据——使用 ruby - 2

    修改(澄清问题)我已经花了几天时间试图弄清楚如何从Facebook游戏中抓取特定信息；但是，我遇到了一堵又一堵砖墙。据我所知，主要问题如下。我可以使用Chrome的检查元素工具手动查找我需要的html-它似乎位于iframe中。但是，当我尝试抓取该iframe时，它​​是空的(属性除外):如果我使用浏览器的“查看页面源代码”工具，这与我看到的输出相同。我不明白为什么我看不到iframe中的数据。答案不是它是由AJAX之后添加的。(我知道这既是因为“查看页面源代码”可以读取Ajax添加的数据，也是因为我有b/c我一直等到我可以看到数据页面之后才抓取它，但它仍然不存在)。发生这种情况是因为

  9. ruby - 需要重构为新的 Ruby 1.9 哈希语法 - 2

    这个问题在这里已经有了答案:HashsyntaxinRuby[duplicate](1个回答)关闭5年前。我有一个Recipe，其中包含以下未通过lint测试的代码:service'apache'dosupports:status=>true,:restart=>true,:reload=>trueend失败并出现错误:UsethenewRuby1.9hashsyntax.supports:status=>true,:restart=>true,:reload=>true不确定新语法是什么样的...有人可以帮忙吗？

  10. ruby-on-rails - 我真的需要在 Rails 中使用 csv gem 吗？ - 2

    我的问题很简单:我是否必须在使用RubyonRails的类上require'csv'？如果我打开一个railsconsole并尝试使用CSVgem它可以工作，但我必须在文件中这样做吗？ 最佳答案 CSVlibrary是ruby​​标准库的一部分；它不是gem(即第三方库)。与所有标准库(与核心库不同)一样，csv不会由ruby​​解释器自动加载。所以是的，在您的应用程序中某处您确实需要要求它:irb(main):001:0>CSVNameError:uninitializedconstantCSVfrom(irb):1from/Us

随机推荐