接口和类

Mike解释说，接口和类都来自面向对象的原理。那么，这些原则是什么？面向对象的原理是编程中使用的一组想法，用于组织代表实际事物或概念的对象。

接口

接口定义对象应具有的属性的结构和类型。这是一个名字和姓氏变量的示例：

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

const dracoMalfoy: Wizard = {
  firstName: "Draco",
  lastName: "Malfoy",
};

您可以创建另一个界面，例如Sport Quidditch的界面，并从向导接口继承信息。

interface QuidditchPlayer extends Wizard {
  position: string;
  team: string;
}

const quidditchPlayer: QuidditchPlayer = {
  firstName: "Draco",
  lastName: "Malfoy",
  position: "Seeker",
  team: "Slytherin",
};

课程

类也可以以类似于接口的方式使用，但具有创建构造函数和方法的附加功能。

class Wizard {
  firstName: string;
  lastName: string;

  constructor(firstName: string, lastName: string) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

const dracoMalfoy = new Wizard("Draco", "Malfoy");

class QuidditchPlayer extends Wizard {
  position: string;
  team: string;

  constructor(firstName: string, lastName: string, position: string, team: string) {
    super(firstName, lastName);
    this.position = position;
    this.team = team;
  }

  getPlayerInfo(): string {
    return `${this.getFullName()} is a ${this.position} for the ${this.team} Quidditch team.`;
  }
}

const quidditchPlayer = new QuidditchPlayer("Draco", "Malfoy", "Seeker", "Slytherin");

仿制药

仿制药在打字稿中是可重复使用的组件，可以在保持类型安全性的同时与不同的数据类型一起使用。它们允许您在不指定固定数据类型的情况下创建灵活和可重复使用的功能或类，确保代码具有适应性和类型保护。

function starTrek<T>(entry: Array<T>): Array<T> {
  return entry;
}

let starTrekData = starTrek<(number | string | boolean)[]>([1701, "Live long and prosper.", true]);

在此代码中，我们有一个通用函数starTrek，该函数接受Array<T>类型的参数entry并返回相同类型Array<T>的数组。 <T>表示通用类型，允许该功能在数组中与不同的数据类型一起使用，同时保持类型安全性。

然后，我们用包含数字，字符串和布尔值的数组调用该函数，展示其灵活性和可重复性。

当您不知道将返回的变量类型时，

generics很有用，因为它们允许您的代码具有适应性，可重复使用和类型的安全性，从而确保了更坚固且可维护的代码库。

ðâ€>提示： 练习打字稿的一种好方法是将您的JavaScript项目转换为Typescript！

打字稿编译

与JavaScript不同，浏览器不能直接读取打字稿。它需要编译。

使用打字稿编译器（TSC）用于此目的。它检查类型错误并生成可以在浏览器中执行的JavaScript代码。这样可以确保您的打字稿代码是类型的安全性和可维护的，同时仍与Web浏览器兼容。

要设置并运行打字稿编译器（TSC），请执行以下步骤：

1. 使用NPM全局安装打字稿：npm install -g typescript

2. 创建一个打字稿文件，例如，example.ts

3. 将打字稿文件编译到JavaScript：tsc example.ts

4. 要在开发时设置打字稿编译器以连续运行，请使用--watch标志：tsc example.ts --watch
   

tsc example.ts --watch

此命令将在手表模式下启动打字稿编译器，这意味着它将连续监视example.ts文件以进行更改并在文件检测到任何更改时重新编译该文件，检查该过程中的代码和键入错误。

tsconfig.json文件是打字稿编译器的配置文件。它允许您自定义设置，例如目标JavaScript版本，严格模式和输出目录。要创建和配置tsconfig.json文件，请按照以下步骤：

1. 在您项目的根目录中，创建一个名为“ tsconfig.json”的新文件

2. 在您的文本编辑器中打开tsconfig.json文件。

3. 添加以下基本配置：
   

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "outDir": "./dist"
  }
}

1. 保存文件。

在此示例中，“ target ”选项设置为“ es5 ”，这意味着打字稿编译器将生成与Ecmascript 5标准兼容的JavaScript代码。 “ strict ”选项设置为“ true ”，启用严格的类型检查以获得更好的代码质量。 “ OUTDIR ”选项为编译的JavaScript文件指定输出目录，在这种情况下，该文件是“ dist ”。项目的根目录中的文件夹。

您可以根据项目的要求进一步自定义带有其他选项的tsconfig.json文件。

开始学习打字稿

要开始学习打字稿，请遵循以下可行的步骤：

1. 访问打字稿官方文档：https://www.typescriptlang.org/docs/

2. 参加迪伦以色列的免费Scrimba课程：https://www.youtube.com/watch?v=Z7O5pQwCmqI&t=21s

3. 通过将现有的JavaScript项目转换为打字稿来练习。

4. 加入与打字稿相关的论坛或社区以进行支持和网络。

通过遵循这些步骤并利用提供的资源，您将竭尽全力掌握打字稿并增强您的网络开发技能！

一定要听这集！

第249集 Do You Need To Learn TypeScript in 2023?

一定要查看社交活动上的所有内容！

• Twitter

• LinkedIn

• TikTok

• Instagram

scrimba折扣！

• 学习使用Scrimba与其交互式后续代码编辑器

学习代码

• 加入他们的独家不和谐社区和网络以找到您的第一份工作！

• 使用此URL在所有付费计划中获得10％的折扣：tinyurl.com/ScrimbaHATT

本文包含会员链接，这意味着我们可能会收到通过这些链接进行的任何购买的佣金，而无需支付额外费用。这有助于支持我们的工作，并使我们能够继续提供有价值的内容。谢谢您的支持！

我的其他所有内容

• Mastering JavaScript Fundamentals: Unleashing Your Framework Readiness

• How to Transition from JR Dev to an In-Demand Developer: Your Path to Getting Hired

• How to Get Started Learning Web Development from Scratch

结论

typeScript是为了解决JavaScript的限制，例如动态键入，这可能导致运行时错误和困难的代码维护。

Learning TypeScript通过提供静态键入，改进的工具和鲁棒的代码可维护性来增强您的Web开发技能。它还将为更多的工作机会打开大门，并为您带来竞争优势！

首先要学习基础知识，然后逐渐纳入更高级的功能，以增强您的技能和网络开发职业。打字稿基础知识包括静态键入，接口和类，仿制药和类型推理。

请记住，由于浏览器无法直接读取它，因此需要编译打字稿！要编译TypeScript，请使用打字稿编译器（TSC）并使用tsconfig.json文件进行配置。

要开始学习打字稿，您可以参加由科技名人迪伦·以色列（Dylan Israel）教授的免费Scrimba课程！ Intro to Typescript Tutorial with Dylan Israel

让我们连接吧！我活跃于 LinkedIn 和 Twitter 。

您可以阅读我的所有文章 selftaughttxg.com