什么是 Typescript？

Typescript是JavaScript的类型化超集，由Microsoft于2012年创建，旨在帮助Javascript开发人员使用大规模应用程序。Typescript旨在作为大型代码库的结构机制提供帮助，因为它有助于避免会减慢您速度的常见错误。它使团队更容易处理同一个项目，因为该语言允许修改并生成可读的代码。如果有多个开发人员在一个项目上工作，Typescript可以防止在调试上浪费大量时间。

这种语言使我们能够更有效地使用我们的Javascript技能。事实上，在你编译代码之后，所有的Typescript东西都会消失，并产生干净、跨平台安全的Javascript代码。除了可互操作之外，Typescript还增加了独特的功能，包括静态类型，接口，类等。

TypeScript vs. JavaScript

Javascript是一种用于制作交互式网页的动态脚本语言，因此它不是为复杂的应用程序设计的。另一方面，Typescript是一种静态脚本语言，是Javascript的超集，这意味着它是JS代码之上的额外层。Typescript并不是为了取代或取代Javascript而设计的。事实上，它永远不会覆盖现有的行为。它需要Javascript的现有行为来纠正其局限性并利用该语言的常见问题。

Typescript和Javascript之间有很多区别。这里仅举几例：

  • TypesScript是一种面向对象的编程语言，而JavaScript是一种脚本语言（支持面向对象编程）。
  • TypeScript具有静态类型，而JavaScript则没有。
  • TypeScript 使用类型和接口来描述数据的使用方式。
  • TypeScript 具有接口，这些接口是在代码中定义协定的强大方法。
  • TypeScript 支持 JavaScript 不支持的函数的可选参数。

为什么要使用Typescript？

使用Typescript有很多重要的好处。让我们分解一下。

Typescript在早些时候会捕获JavaScript代码中的错误。Typescript能够在运行时之前捕获bug和错误，因此您将编写可靠的代码并减轻仅在运行时发现的JavaScript陷阱。

  • 转译允许您生成 ECMAScript，并且可以指定您更喜欢使用的 JavaScript 版本。这意味着您可以编写与旧浏览器兼容的代码，同时使用最新的工具。
  • Typescript支持JS库和API文档，包括JQuery，BootStrapJS，React等。您可以使用您已经知道的所有熟悉的工具，因此学习曲线不会太糟糕。
  • Typescript 引入了静态类型来构建代码并改进面向对象的编程技术。Typescript 的静态类型化功能还使代码更易于重构，因为您可以导航到函数成员的引用。
  • Typescript使用NPM，它使您可以访问数百万个可靠的库。这也使得学习Typescript变得更加容易，因为您不必创建自定义工具来访问库。
  • **Typescript 更易于维护。**该语言通常更易于阅读和访问。内置的自文档使检查代码中的类型和对象变得更加容易。
  • **Typescript使得使用React，Angular和Vue变得更加容易。**Typescript与这些框架很好地集成，特别是React，它被描述为与Typescript的完美契合。对于这些框架来说，Typescript的使用不是强制性的，但它可以增加生产力和易用性。

步骤 1：设置打字脚本

安装 TypeScript

您可以通过安装TS Visual Studio插件或使用NPM（Node Package Manager）来访问Typescript。

安装 NPM 后，在终端中写入以下命令以安装 TS。

npm install -g typescript

若要检查您使用的版本，请在 shell 中运行以下命令行

tsc -v

TypeScript Compilers

要编译 TS 代码，我们运行 命令 。这将创建一个同名的JS文件，因此我们最终可以在浏览器上使用它。tsc filename.ts

步骤 2：探索 TypeScript 类型

类型

顾名思义，Typescript中的所有内容都处理类型。由于Typescript是JS的类型化版本，我们可以在声明变量时为变量指定类型。这使您的代码更具可伸缩性和可靠性，您可以在运行时之前检查代码是否正常运行。

如果你以前使用过Javascript，你就会知道它有八种类型：字符串，数字，null，unfined，object，symbol，bigint和boolean。Javascript是动态类型的，这意味着在运行时和变量可以更改其类型之前，它不知道变量的类型。即使我们故意更改它们，也经常会出现错误和错误。Typescript 通过向代码中添加静态类型来帮助解决此问题。

Typescript 中有三类类型：、 和 。any``Built-in``User-defined

  • any 类型是所有 Typescript 数据类型的超集，它是我们可用的最宽松的类型。这意味着变量可以是任何类型。如果我们使用此类型，它将覆盖类型检查。
  • **内置**类型包括数字、字符串、布尔值、未定义、空值和空值。
  • **用户定义的**类型包括枚举、数组、接口、类和元组。

让我们更深入地研究一下其中的每一个，以及如何使用Typescript类型。

分配类型

要在Typescript中分配类型，您需要一个冒号，类型名称，等号和该变量的值。我们来看一个示例。:``=

let variableName: typeScriptType = value;

数

Typescript 支持十进制、十六进制、八进制和二进制文本。在Typescript中，所有数字都是浮点值。

let num: number = 0.444;
let hex: number = 0xbeef;
let bin: number = 0b0010;

布尔

布尔值的功能就像它们在Javascript中一样。

let yes: boolean = true;
let no: boolean = false;

数组

在Typescript中，数组是同一对象的集合。可以通过两种方式声明类型化数组，数据类型后跟 [ ]，或者泛型数组方法后跟 。Array<elemType>

还可以使用运算符将多个类型分配给一个数组，或使用运算符创建多维数组以将一个数组保存到另一个数组中。|``[ ]

const arr3: (Date| string[])[] = [new Date(), new Date(), ["1", "a"]];

元

元组很像数组，但我们可以定义存储在每个位置的数据类型。元组类型使您能够创建有组织的数组。当您知道固定数量的元素的类型并按顺序预定义类型时，可以表示数组。

let numberTuple: [number, number, number];

Void

Void 是 的子类型。它是一种返回类型，可以在需要时用不同的类型替换。当我们返回函数时，使用 Void。它基本上告诉我们，一个函数将返回未定义。这可确保函数不返回值。undefined

枚举

枚举允许我们定义一组命名的预定义常量。这些是使用枚举关键字定义的。您可以定义数字或字符串枚举。

enum MyStringEnum {
    ChoiceA = "A",
    ChoiceB = "B",
}

字符串

Typescript遵循与Javascript相同的语法，在文本周围用双引号或单引号引起来。还可以使用反引号字符来使用多行，或者使用 在字符串中启用计算的操作。${expression}

let w = "Value1";
let x = "this is a string with the value " + w;
let y = 'this is a string with the value ' + w;
let z = `this is a string ${w}`;
console.log(w,x,y,z)

步骤 3：变量基础知识

与大多数编程语言一样，我们使用变量来存储值，例如字符串，布尔值，数字或表达式。在 TS 中，我们可以使用 、 和 定义变量。当我们使用时会出现一些问题。例如，在函数内部声明的变量是函数范围的，但在函数外部声明时是全局范围的。这可能会导致 JavaScript 代码中出现错误。var``let``const``var``var

关键字通过在声明变量的块处设置变量的生存期来解决此问题。类似地， 解决了 与 相同的问题，但在声明时只能初始化一次。Typescript 将确保不能设置任何值。let``const``let

Typescript 中的变量遵循与许多其他编程语言类似的语法规则。

  • 它们可以由字母表的小写和大写字母组成
  • 它们不能以数字开头
  • 它们可以包含特殊字符，如 或 。$``@

步骤 4：在 TypeScript 中注释

TS 中的注释使用与 Javascript 相同的语法 对于单行注释使用双斜杠 斜杠 打开注释块 斜杠 用于关闭注释块

Typescript 引入了一种特殊的语法。如果添加 ，Typescript 将在转换为 Javascript 时保留注释。这使您能够将版权保留在需要在JS中生成的TS文件的顶部。/*!

let x = 1; // This is a single line comment /* This can be spread on  multiple  lines */ let y = 2;

步骤 5：类型推断

类型推断是编译器用于确定不同类型的内容。它足够聪明，可以从它们的值中找出类型。这样，就不必在代码中指定类型。这是Typescript的一个强大功能，允许您操作类型并组合它们。

Typescript 推理功能可以在以下情况下推断类型：

  • 当变量被声明和初始化时
  • 当默认值设置为参数时
  • 确定函数返回类型时

步骤 6：函数

Typescript不会对Javascript的函数范围的核心进行任何重大更改。但是，Typescript确实使用强签名增强了函数，我们可以用来定义参数和返回类型。

我们使用关键字声明一个函数。您还可以使用 在没有关键字的情况下创建函数。这不会随着 Typescript 而改变。我们可以将 Typescript 类型用于函数参数。我们使用冒号来执行此操作。看一个例子：function``fat arrow

function functionWithParameters(arg1: string, arg2: number){}

Typescript函数分为两类：函数表达式或函数声明。函数声明是指在将函数表达式分配给变量时，通过不将其赋值来定义函数。

在Typescript中，您可以使用关键字指定函数的类型。为此，请使用后跟冒号，后跟函数签名的类型。this``this

步骤 7：映射类型

此功能使您能够从现有类型创建新类型。例如，您可以让现有接口保留所有相同的成员，但更改为只读或可选。在映射类型之前，我们必须创建一个额外的接口来反映我们想要的最终状态，这可能会污染代码并导致问题。

如果没有映射的类型，每个接口都需要一个单独的函数，因此事情可能会很快失控。由于Typescript中映射类型的自定义逻辑，我们不必处理这些问题。

Typescript 中有不同的映射函数： partial, nullable, pick, omit, record, extract, exclude, and ReturnType.。

步骤 8：对象和 OOP

Typescript支持面向对象的编程，并添加了新功能以改进Javascript的OOP功能。Typescript 支持通过使用关键字来使用类。可以把它想象成一个对象的模板。让我们看一个例子：class

class class_Name{    
    field;    
    method;    
}

这将生成以下 JavaScript 代码：

// Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

Typescript引入了使用对象的新方法。Typescript 中有许多不同的对象类型：、 、 和 。Typescript 可以使用大括号创建对象，并且必须在初始化时定义其成员。这是一种组织数据的更快方法，并且由于它不是结构语言，因此不需要名称。Object``object``{object}

步骤 9：类型检查和断言

让我们看看如何检查变量是否具有正确的类型。以下是两种最常见的方法。

实例

此运算符可以检查 Javascript 未定义的自定义类型。下面，我们首先编写一个自定义类型，创建一个实例，并检查它是否确实是正确的变量。

class Dog{
 name: string;
 constructor(data: string) {
  this.name = data;
 }
}
let dog = new dog('Rover')
if(dog instanceof Dog){
 console.log(`${dog.name} is a dog`)
}

类型

此运算符可以检查基本数据类型。下面，我们创建一个字符串变量，使用typeof命令将其与另一个变量进行检查，然后打印结果。

let myObject = { name: "test" };
let myOtherObject: typeof myObject; // Borrow type of the "myObject"
myOtherObject = { name: "test2" };
type TypeFromTypeOf = typeof myOtherObject; // Borrow

有时，我们需要将变量转换为数据类型，这通常是当您使用通用类型并需要使其更加具体时。有几种不同的方法可以做到这一点。让我们讨论两种流行的方法。

As关键词

在变量名称后使用 as 关键字，并以所需的数据类型结束它。

let str: any = 'This is a String'
let strLength = (str as string).length

< >算子

我们还可以使用运算符强制转换变量。这对我们的代码具有相同的影响，但实现了更简单的语法。< >

let str: any = 'This is a String'
let strLength = (<string>str).length