全网最全的，最详细的，最友好的 Typescript 新手教程，拿走不谢，希望给个点赞，在看，转发，谢谢

本文翻译自

TypeScript tutorial for beginners: who this guide is for

TypeScript新手教程:本指南是给谁看的

下面的指南是一个TypeScript教程，供有兴趣学习更多TypeScript知识的JavaScript开发者使用。这意味着您需要对“普通的”JavaScript有足够的了解，尽管我将在接下来的过程中为您提供一些基本的指导。

单词TypeScript和“初学者”属于同一个教程吗?在写这篇指南之前，我并不确定，但每天我都看到很多初学者对TypeScript感兴趣。如果你决定这样做，要意识到，在你早期的时候，同时学习TypeScript和JavaScript是很难的。但从长远来看，这是值得的。继续前进!如果这是你的情况，欢迎你继续阅读。

在开始之前，请确保系统上安装了最新版本的Node.js。

现在享受阅读吧!

TypeScript初学者教程:什么是TypeScript?

官方网站上的定义是:“JavaScript的类型化超集”，但它假设你知道“超集”是什么，以及“类型化”是什么意思。为了简单起见，你可以把TypeScript看作是JavaScript的“顶层”。

TypeScript是一个层，因为你可以在你的编辑器中编写TypeScript代码。编译之后，所有TypeScript的东西都消失了，剩下的只是简单的JavaScript。

如果编译步骤的概念让您感到困惑，请记住JavaScript已经编译并解释过了。有一个JavaScript引擎读取并执行你的代码。

但是JavaScript引擎不能读取TypeScript代码，所以任何TypeScript文件都要经过“预翻译”过程，也就是编译。只有在第一个编译步骤之后，才剩下纯JavaScript代码，可以在浏览器中运行。稍后你会看到TypeScript是如何编译的。

现在我们要记住，TypeScript是一种特殊的JavaScript，但在浏览器中运行之前，它需要一个“转换器”。

TypeScript新手教程:为什么是TypeScript?

一开始，你不会完全理解TypeScript为什么有意义，毕竟它在变成JavaScript代码之前已经被剥离了。你会问:“TypeScript有什么用?”这是个好问题，我的朋友。

实际上，只要它能捕获代码中严重和愚蠢的错误，您就会看到它的好处。更重要的是，您的代码库将变得结构良好，并且几乎是自文档化的。您还将欣赏编辑器中改进的自动完成功能，但这只是一个不错的副作用。

不管怎么说，Twitter或“orange网站”上时不时会弹出一个新帖子，说TypeScript没用(TypeScript税)或太尴尬。

街垒的两边几乎都有游击队员。TypeScript有褒有贬，但重要的是，TypeScript是一个可靠的工具，把它放在你的工具带上不会有什么坏处。

我的目标是展示这个工具，并帮助你形成自己对TypeScript的看法。

初学者的TypeScript教程:设置TypeScript

设置?为什么如此?TypeScript不只是一种语言吗?种。TypeScript还有一个二进制代码，可以把TypeScript代码编译成JavaScript代码。记住，浏览器并不理解TypeScript。那么，让我们安装二进制文件。在一个新的文件夹中创建一个新的节点项目:

mkdir typescript-tutorial && cd $_
npm init -y

然后用以下方式安装TypeScript:

npm i typescript --save-dev

接下来，配置一个节点脚本，这样我们就可以轻松地运行TypeScript编译器了:

"scripts": {
    "tsc": "tsc"
  },

tsc代表TypeScript编译器，当编译器运行时，它会寻找一个名为tsconfig的文件。json在项目文件夹中。让我们为TypeScript生成一个配置文件:

npm run tsc -- --init

如果一切顺利，您将得到“消息TS6071:成功创建tsconfig。您将在项目文件夹中看到新文件。现在,保持冷静。tsconfig。json是一个可怕的配置文件。你不需要知道它的每一个要点。在下一节中，您将看到入门的相关部分。

TypeScript新手教程:配置TypeScript编译器

初始化一个git repo并提交原始tsconfig是一个好主意。在接触文件之前。我们将只保留一些配置选项，并删除其他所有选项。稍后，你可能会想要将你的版本与原始版本进行比较。为了开始打开tsconfig.json和替换所有的原始内容与以下:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true
  }
}

保存并关闭该文件。首先，你可能想知道tsconfig是什么。json。TypeScript编译器和任何支持TypeScript的代码编辑器都会读取这个配置文件。

TypeScript编译成“普通的”JavaScript。关键目标确定所需的JavaScript版本ES5(或最新版本)。

这取决于tsconfig的“严格程度”。如果您没有将适当的类型注释添加到代码中，编译器和编辑器将遵守此规则(稍后将详细介绍这一点)。

当strict设置为true时，TypeScript会在你的代码中强制执行最大级别的类型检查:

noImplicitAny true:当变量没有定义类型时，TypeScript会报错

always sstrict true:严格模式是JavaScript的一种安全机制，它可以防止意外全局变量，默认此绑定，等等。当always sstrict设置为true时，TypeScript会在每个JavaScript文件的最顶部发出"use strict"。

还有更多可用的配置选项。随着时间的推移，你会学到更多，目前以上两个选项是你开始需要知道的一切。但"any"是什么意思?

关于types的几个单词

现在你应该知道TypeScript是做什么的了。一切都围绕着类型展开。它们不是典型的JavaScript“类型”，如String、Object、Boolean。TypeScript会自己添加更多类型，就像any(或更多)一样。

any是一个“松散的”TypeScript类型。这意味着:这个变量可以是任何类型:字符串，布尔值，对象，真的，我不在乎。这实际上就像根本没有类型检查一样。当strict设置为true时，你就会对TypeScript说“不要在我的代码中产生歧义”。

出于这个原因，我建议对TypeScript保持最大程度的严格，即使在一开始修复所有错误会比较困难。现在我们几乎已经准备好看到TypeScript的运行了!

初学者的TypeScript教程:TypeScript的作用

一切都以合法的(显然)JavaScript函数filterByTerm开头。在你的项目文件夹中创建一个名为filterByTerm.js的新文件，并将以下代码复制到其中:

function filterByTerm(input, searchTerm) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("inputArr cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

filterByTerm("input string", "java");

如果你现在不明白其中的逻辑，也不要担心。在几行之后，我们来看看这个函数的参数以及它们是如何使用的。仅通过查看代码，您就应该已经发现了问题(不，它不是Java)。

我想知道是否有一种方法可以在我的IDE中检查这个函数，而不需要运行代码或使用Jest测试它。这可能吗?TypeScript在这方面做得很好，事实上，它是JavaScript中静态检查的最佳工具之一，也就是说，在你的代码运行之前“测试”它的正确性。

所以，进入TypeScript世界，把文件的扩展名从filterByTerm.js改为filterByTerm.ts。有了这个改变，你将发现一堆错误在你的代码:

你能看到函数参数下面的红色标记吗?从现在开始，我将以文本形式向你展示错误，但请记住，ide和文本编辑器会在你在TypeScript中出现错误时显示这些红线。

为了确认我们做错了什么，运行:

npm run tsc

看看这些错误:

ilterByTerm.ts:1:23 - error TS7006: Parameter 'input' implicitly has an 'any' type.

filterByTerm.ts:1:30 - error TS7006: Parameter 'searchTerm' implicitly has an 'any' type.

filterByTerm.ts:5:32 - error TS7006: Parameter 'arrayElement' implicitly has an 'any' type.

TypeScript是在告诉你函数参数有any类型，如果你记得的话，它可以是TypeScript中的任何类型。我们需要在TypeScript代码中添加适当的类型注释。

等等，到底什么是型?

什么是类型，JavaScript有什么问题?

JavaScript有类型，如果你在知道有字符串、布尔值、数字、对象等等之前使用过这种语言。到今天为止，JavaScript有8种类型:

• String
• Number
• BigInt
• Boolean
• Null
• Undefined
• Object
• Symbol

列表中的所有内容都是“原语”，除了Object是类型。每个JavaScript类型都有一个对应的表示，可以在我们的代码中使用，比如字符串和数字:

var name = "Hello John";
var age = 33;

JavaScript的“问题”是，变量可以在它(或我们)想要的任何时候改变它的类型。例如，一个布尔值可以在以后变成字符串(将以下代码保存在名为types.js的文件中):

var aBoolean = false;
console.log(typeof aBoolean); // "boolean"

aBoolean = "Tom";
console.log(typeof aBoolean); // "string"

转换可以是有意的，开发人员可能真的想将“Tom”分配给aBoolean，但是这类错误很有可能是偶然发生的。

现在，从技术上讲，JavaScript本身并没有什么问题，因为它的“类型动态性”是有意为之的。JavaScript是作为一种简单的web脚本语言而诞生的，而不是作为一种成熟的企业语言。

然而，JavaScript放松自然会在代码中造成严重的问题，并破坏其可维护性。TypeScript旨在通过在JavaScript中添加强类型来解决这些问题。事实上，如果你把types.js的扩展改为types。你会在IDE中看到TypeScript在抱怨。

编译 types.ts 会产生:

types.ts:4:1 - error TS2322: Type '"Tom"' is not assignable to type 'boolean'.

涉足TypeScript类型

TypeScript围绕着类型展开，而我们的代码看起来根本没有类型。是时候加一些了。我们首先要确定函数参数。通过查看函数的调用方式，可以看出它有两个字符串作为参数:

filterByTerm("input string", "java");

我们确定吗?让我们向函数添加第一个类型注释。方法如下:

function filterByTerm(input: string, searchTerm: string) {
    // omitted
}

// omitted

就是这样!通过给参数添加类型，我们将代码从纯JavaScript迁移到TypeScript。但如果你试图编译代码:

npm run tsc

发生了什么:

filterByTerm.ts:5:16 - error TS2339: Property 'filter' does not exist on type 'string'.

你能看到TypeScript是如何引导你的吗?问题在于过滤器函数:

function filterByTerm(input: string, searchTerm: string) {
    // omitted
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

我们告诉TypeScript“input”是一个字符串，但在后面的代码中，我们对它调用了filter方法，它属于数组。我们真正想要的是将"input"标记为一个数组，也许是一个字符串数组?

为此，您有两种选择。选项1带有string[]:

function filterByTerm(input: string[], searchTerm: string) {
    // omitted
}

或者，如果你喜欢这个语法，选项2 Array<string>:

function filterByTerm(input: Array<string>, searchTerm: string) {
    // omitted

}

我个人更喜欢第二种选择。现在让我们尝试再次编译(npm运行tsc)，下面是:

filterByTerm.ts:10:14 - error TS2345: Argument of type '"input string"' is not assignable to parameter of type 'string[]'.

filterByTerm("input string", "java");

我们将input标记为一个字符串数组，现在我们试图传入一个字符串。这很容易解决!让我们来传递一个字符串数组:

filterByTerm(["string1", "string2", "string3"], "java");

下面是到目前为止的完整代码:

function filterByTerm(input: Array<string>, searchTerm: string) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

filterByTerm(["string1", "string2", "string3"], "java");

我觉得不错。但如果你编译它就不是(npm运行tsc):

filterByTerm.ts:6:25 - error TS2339: Property 'url' does not exist on type 'string'.

好的，TypeScript，很好。我们传入一个字符串数组，但在稍后的代码中，我们尝试访问一个名为“url”的属性:

return arrayElement.url.match(regex);

初学者TypeScript教程:TypeScript对象和接口

因为filterByTerm被传递给了一个字符串数组，所以TypeScript就开始抱怨了。"url"属性不存在类型字符串TypeScript。让我们通过传递一个对象数组来帮助TypeScript，其中每个对象都有需要的url属性:

filterByTerm(
  [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  "java"
);

当你在那里的时候，更新函数签名，让它接受一个对象数组:

function filterByTerm(input: Array<object>, searchTerm: string) {
    // omitted
}

现在让我们编译代码:

npm run tsc

发生

filterByTerm.ts:6:25 - error TS2339: Property 'url' does not exist on type 'object'.

又来了!这是有意义的，至少在TypeScript中是这样:一般的JavaScript对象没有任何名为“url”的属性。对我来说，这是TypeScript真正开始发光的地方。

关键是，你不能给一个随机对象分配属性，然后就完事了。TypeScript要求代码中的每个实体都符合特定的形状。这个形状在TypeScript中有一个名字:interface。

现在，一开始它看起来像陌生的语法，但一旦你习惯了接口，你就会开始在所有地方使用它们。但是什么是界面呢?TypeScript中的接口就像一个合同。换句话说，接口就像实体的“模型”。

看看我们的代码，我们可以想到一个简单的“模型”，命名为Link，对象的形状应该符合以下模式:

它必须有一个类型为string的url属性

在TypeScript中，你可以用一个接口来定义这个“模型”，就像这样(把下面的代码放在filterByTerm.ts的顶部:

interface Link {
  url: string;
}

在接口声明中，我们说:“从现在开始，我想在我的TypeScript代码中使用这个形状。”当然，这不是有效的JavaScript语法，它将在编译过程中被删除。

现在，我们可以通过修改参数"input"来使用我们的接口，它实际上也是一个自定义的TypeScript类型:

function filterByTerm(input: Array<Link>, searchTerm: string) {
    // omitted
}

在这个修复中，我们对TypeScript说“期待一个Link数组”作为该函数的输入。下面是完整的代码:

interface Link {
  url: string;
}

function filterByTerm(input: Array<Link>, searchTerm: string) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

filterByTerm(
  [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  "java"
);

现在所有的错误都应该消失了，你可以运行:

npm run tsc

编译步骤将在项目文件夹中生成一个名为filterByTerm.js的文件，其中包含纯JavaScript代码。你可以签出这个文件，看看TypeScript的特定声明是如何被去掉的。

因为"always sstrict "被设置为true, TypeScript编译器也会在filterByTerm.js的顶部发出"use strict"。

你的第一个TypeScript代码做得很好!在下一节中，我们将进一步探讨接口。

TypeScript新手教程:接口和字段

TypeScript接口是该语言最强大的结构之一。接口有助于在应用程序中形成“模型”，以便任何开发人员在编写代码时都可以选择该模型并遵循它。

到目前为止，我们定义了一个简单的接口Link:

interface Link {
  url: string;
}

如果你想在接口中添加更多的字段，你需要在block中声明它们:

interface Link {
  description: string;
  id: number;
  url: string;
}

现在任何Link类型的对象都必须“实现”新字段，否则就会出现错误。实际上，通过编译代码:

npm run tsc

TypeScript对你吼叫:

filterByTerm.ts:17:4 - error TS2739: Type '{ url: string; }' is missing the following properties from type 'Link': description, id

问题是函数的参数:

filterByTerm(
  [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
  "java"
);

TypeScript可以通过查看函数声明来推断参数的类型是Array of Link。因此，该数组中的任何对象必须具有(实现)接口链接中定义的所有字段。

大多数情况下，这还远远不够理想。毕竟，我们不知道每个Link类型的新对象是否都会有所有的字段。不用担心，要让编译通过，我们可以用一个问号声明接口的字段是可选的:

interface Link {
  description?: string;
  id?: number;
  url: string;
}

TypeScript新手教程:变量类型

到目前为止，你已经看到了如何向函数的形参添加类型:

function filterByTerm(input: Array<Link>, searchTerm: string) {
    //
}

TypeScript并不局限于此，当然，你也可以给任何变量添加类型。为了说明这个概念，让我们逐个提取函数的参数。首先，我要提取每个对象:

const obj1: Link = { url: "string1" };
const obj2: Link = { url: "string2" };
const obj3: Link = { url: "string3" };

注意我是如何告诉TypeScript obj1, obj2和obj3的类型是Link的。在“香草”JavaScript你会写:

const obj1 = { url: "string1" };
const obj2 = { url: "string2" };
const obj3 = { url: "string3" };

接下来，我们可以像这样定义一个Link数组:

const arrOfLinks: Array<Link> = [obj1, obj2, obj3];

最后是搜索词:

const term: string = "java";

最后完整的代码：

interface Link {
  description?: string;
  id?: number;
  url: string;
}

function filterByTerm(input: Array<Link>, searchTerm: string) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

const obj1: Link = { url: "string1" };
const obj2: Link = { url: "string2" };
const obj3: Link = { url: "string3" };

const arrOfLinks: Array<Link> = [obj1, obj2, obj3];

const term: string = "java";

filterByTerm(arrOfLinks, term);

好的，我理解你。与JavaScript相比，TypeScript看起来更冗长，有时甚至是多余的。但是随着时间的推移，您会发现添加的类型越多，您的代码就越健壮。

通过添加类型注释，你越多地帮助TypeScript理解代码的意图，你以后就会越好。这样你的开发经验就会飞速增长。

例如，现在arrOfLinks与正确的类型(Link的数组)相关联，编辑器可以推断数组中的每个对象都有一个名为url的属性，就像Link接口中定义的那样:

现在告诉我这不是很棒，因为它确实很棒。除了字符串、数组和数字，TypeScript还有很多其他类型。

有布尔值，元组，"any"， never，枚举。假以时日，你会全都学会的。如果您好奇，请查看基本类型的文档。

现在让我们继续扩展接口。

(大多数时候，Typescript可以自己推断类型。作为经验法则，让它为你发挥作用吧!)

TypeScript新手教程:扩展接口

TypeScript接口很棒。然而，总有一天你需要在你的代码中添加一个新的实体，而这个实体恰好与另一个现有的接口几乎相同。例如，我们想要一个名为TranslatedLink的新接口，具有以下属性:

• id, number
• url, string
• description, string
• language, string

描述、id和url…看起来我们已经有了具有相同属性的Link接口:

interface Link {
  description?: string;
  id?: number;
  url: string;
}

有办法重用接口链接吗?原来，在TypeScript中，我们可以通过将接口的属性赋值给新接口来扩展接口，比如TranslatedLink就从Link“继承”了一些特性。下面是如何做到这一点，注意关键字extends:

interface Link {
  description?: string;
  id?: number;
  url: string;
}

interface TranslatedLink extends Link {
  language: string;
}

现在，任何TranslatedLink类型的对象都将具有可选属性description、id、url和新属性language:

interface Link {
  description?: string;
  id?: number;
  url: string;
}

interface TranslatedLink extends Link {
  language: string;
}

const link1: TranslatedLink = {
  description:
    "TypeScript tutorial for beginners is a tutorial for all the JavaScript developers ...",
  id: 1,
  url: "www.valentinog.com/typescript/",
  language: "en"
};

当link1这样的对象使用接口时，我们说link1实现了该接口中定义的属性。另一方面，当接口用于描述代码中的一个或多个对象时，它就具有了实现。

扩展接口意味着借用它的属性并扩展它们以实现代码重用。但是等等，还有更多!你很快就会看到TypeScript接口也可以描述函数。

但首先让我们看看索引!

TypeScript新手教程:索引插曲

JavaScript对象是键/值对的容器。想象一个简单的物体:

const paolo = {
  name: "Paolo",
  city: "Siena",
  age: 44
};

我们可以使用点语法访问任意键的值:

console.log(paolo.city);

或者使用括号语法(JavaScript数组也是如此，因为数组是一种特殊的对象):

console.log(paolo["city"]);

现在，假设键变成了动态的，这样我们就可以把它放到一个变量中，并在括号内引用它:

const paolo = {
  name: "Paolo",
  city: "Siena",
  age: 44
};

const key = "city";

console.log(paolo[key]);

现在，让我们添加另一个对象，将两个对象都放到数组中，并像在filterByTerm.js中那样，使用filter方法过滤数组。但这一次键是动态传递的，因此可以通过任何键进行过滤:

const paolo = {
  name: "Paolo",
  city: "Siena",
  age: 44
};

const tom = {
  name: "Tom",
  city: "Munich",
  age: 33
};

function filterPerson(arr, term, key) {
  return arr.filter(function(person) {
    return person[key].match(term);
  });
}

filterPerson([paolo, tom], "Siena", "city");

相关内容如下:

return person[key].match(term);

会工作吗?是的，因为JavaScript并不关心paolo或tom是否通过动态键“可索引”。那么TypeScript呢?在这种情况下它会给出一个错误吗?

让我们看看:在下一节中，我们将使用可变键使filterByTerm更加动态。

function filterByTerm(input: Array<Link>, searchTerm: string) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement.url.match(regex);
  });
}

function filterByTerm(
  input: Array<Link>,
  searchTerm: string,
  lookupKey: string = "url"
) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement[lookupKey].match(regex);
  });
}

npm run tsc

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Link'.
  No index signature with a parameter of type 'string' was found on type 'Link'.

return arrayElement[lookupKey].match(regex);

interface Link {
  description?: string;
  id?: number;
  url: string;
  [index: string]: string;
}

error TS2411: Property 'description' of type 'string | undefined' is not assignable to string index type 'string'.
error TS2411: Property 'id' of type 'number | undefined' is not assignable to string index type 'string'.

interface Link {
  description?: string;
  id?: number;
  url: string;
  [index: string]: string | number | undefined;
}

[index: string]: string | number | undefined;

error TS2339: Property 'match' does not exist on type 'string | number'.
return arrayElement[lookupKey].match(regex);

interface Link {
  description?: string;
  id?: number;
  url: string;
  [index: string]: any;
}

function filterByTerm(
  input: Array<Link>,
  searchTerm: string,
  lookupKey: string = "url"
) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement[lookupKey].match(regex);
  });
}

filterByTerm(arrOfLinks, "string3"); 

// EXPECTED OUTPUT:
// [ { url: 'string3' } ]

function filterByTerm(
  input: Array<Link>,
  searchTerm: string,
  lookupKey: string = "url"
) {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input
    .filter(function(arrayElement) {
      return arrayElement[lookupKey].match(regex);
    })
    .toString();
}

filterByTerm(arrOfLinks, "string3");

// WRONG OUTPUT:
// [object Object]

function filterByTerm(/* omitted for brevity */): Array<Link> {
 /* omitted for brevity */
}

interface Link {
  description?: string;
  id?: number;
  url: string;
  [index: string]: any;
}

function filterByTerm(
  input: Array<Link>,
  searchTerm: string,
  lookupKey: string = "url"
): Array<Link> {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input
    .filter(function(arrayElement) {
      return arrayElement[lookupKey].match(regex);
    })
    .toString();
}

const obj1: Link = { url: "string1" };
const obj2: Link = { url: "string2" };
const obj3: Link = { url: "string3" };

const arrOfLinks: Array<Link> = [obj1, obj2, obj3];

filterByTerm(arrOfLinks, "string3");

npm run tsc

error TS2322: Type 'string' is not assignable to type 'Link[]'.

interface Example {
  authenticated: boolean | number | string;
  name: string;
}

type Authenticated = boolean | number | string;

interface Example {
  authenticated: Authenticated;
  name: string;
}

// the new label
type Links = Array<Link>;
// the new label

function filterByTerm(
  input: Links,
  searchTerm: string,
  lookupKey: string = "url"
): Links {
  if (!searchTerm) throw Error("searchTerm cannot be empty");
  if (!input.length) throw Error("input cannot be empty");
  const regex = new RegExp(searchTerm, "i");
  return input.filter(function(arrayElement) {
    return arrayElement[lookupKey].match(regex);
  });
}

const obj1: Link = { url: "string1" };
const obj2: Link = { url: "string2" };
const obj3: Link = { url: "string3" };

const arrOfLinks: Links = [obj1, obj2, obj3];

filterByTerm(arrOfLinks, "string3");

const tom = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

const tom = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

interface IPerson {
  name: string;
  city: string;
  age: number;
}

const tom: IPerson = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    console.log(`${this.name} - ${this.city}`);
  }
};

interfaces-functions.ts:11:3 - error TS2322: Type '{ name: string; city: string; age: number; printDetails: () => void; }' is not assignable to type 'IPerson'.
  Object literal may only specify known properties, and 'printDetails' does not exist in type 'IPerson'.

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): void;
}

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): string;
}

const tom: IPerson = {
  name: "Tom",
  city: "Munich",
  age: 33,
  printDetails: function() {
    return `${this.name} - ${this.city}`;
  }
};

interface IPerson {
  name: string;
  city: string;
  age: number;
  printDetails(): string;
  anotherFunc(a: number, b: number): number;
}