TypeScript的初学者指南Typescript是Javascript的一个类型化超集，可以编译成普通的JavaSc

Typescript是Javascript的一个类型化超集，可以编译成普通的JavaScript。 TypeScript对JavaScript有一个额外的编译步骤，在到达运行时和破坏代码中的某些东西之前，可以捕捉各种错误。

什么是TypeScript

TypeScript是 "JavaScript"的类型化超集，但它假定你知道什么是 "超集"和 "类型化"的意思。因此，为了简单起见，你可以把TypeScript看成是JavaScript的**"上面一层"**。

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

如果编译步骤的想法让你感到困惑，请记住，JavaScript已经被编译了，然后被解释了。有一个JavaScript引擎可以读取和执行你的代码。

JavaScript引擎不能读取TypeScript代码，所以任何TypeScript文件都应该经过 "预翻译 "过程，称为编译。

在第一个编译步骤之后，你就剩下纯粹的JavaScript代码了，可以在浏览器中运行。稍后你会看到TypeScript的编译是如何完成的。

现在，让我们记住，**TypeScript 是一种特殊的 JavaScript，**但它在浏览器中运行之前需要一个 "翻译器"。

TypeScript中的类型是什么？

现在，你应该对 TypeScript 的作用有了一定的了解。一切都围绕着类型展开。这些不是经典的JavaScript "类型"，如String、Object、Boolean，等等。

TypeScript在自己的基础上增加了更多的类型，如any（以及更多）。

特别是 "any "是TypeScript的一个 "松散 "类型。

它意味着：这个变量可能是任何类型：字符串、布尔值、对象，我不在乎，这就像根本没有类型检查。如果把strict设置为true，你就会对TypeScript说："不要让我的代码有歧义"。

出于这个原因，我建议在TypeScript上保持最大程度的严格性，即使一开始会更难修复所有错误。现在我们几乎可以看到TypeScript的实际应用了!

TypeScript示例

TypeScript是一种开源的、面向对象的语言，由微软维护。由于TS中的静态类型化，用TypeScript编写的代码更容易预测，通常比普通JS更容易调试。

在用TypeScript编码之前，我们需要在本地机器上安装它。我们可以使用NPM拉取TypeScript包，最好是通过输入以下命令进行全局安装。

npm install -g typescript

当它被安装后，我们可以通过运行命令来验证它。

tsc -v

它将显示最近在你的机器上安装的typecript的版本：

TypeScript 编码

让我们用TypeScript写一些代码，看看输出结果。TypeScript的文件扩展名是.ts。

创建一个名为app.ts 的文件并添加以下代码：

// app.ts

const spiderman = (person) => {
    return 'Hello, ' + person;
}

let user = 'Peter Parker';
console.log(spiderman(user));

现在，首先，我们需要将这段代码编译成Javascript，然后我们可以在服务器或浏览器中使用这个文件。我们将在服务器上测试我们的代码，因为我们使用Node.js。

好的，现在用下面的命令编译该文件。它将生成同名的javascript文件：

tsc app.ts

所以，在项目根目录下，你可以看到还有一个文件被创建，叫做app.js：

// app.js

var spiderman = function (person) {
    return 'Hello, ' + person;
};
var user = 'Peter Parker';
console.log(spiderman(user));

现在，使用下面的命令将该文件作为node服务器运行：

node app

它将返回像下面这样的输出：

支持TypeScript的文本编辑器

TypeScript是一个开源项目，但它是由微软公司开发和维护的，它最初只在微软的Visual Studio平台上支持。

现在，许多文本编辑器和IDE，无论是原生的还是通过插件，都支持TypeScript语法、自动完成建议、错误捕捉，甚至是内置编译器。

Visual Studio Code- 微软的另一个，轻量级的开源代码编辑器。TypeScript支持是内置的。
Sublime Text的官方免费插件。
最新版本的 WebStorm 有内置支持。
更多的包括Vim、Atom、Emacs和其他。

静态类型化

TypeScript中的类型注释是记录函数或变量的预期契约的轻量级方式。

让我们看看下面的例子：

// app.ts

const spiderman = (person: String) => {
    return 'Hello, ' + person;
}

let user = 1;
console.log(spiderman(user));

在上面的例子中，我们已经告诉TS编译器，spiderman 函数期望的参数是一个字符串，而不是一个整数、对象或数组数据类型。但是，我们还是传递了一个整数参数。

现在看看下面的输出：

我们得到了一个错误，说这个数字不能分配给参数String。

TypeScript的一个引人注目的特点是支持静态类型。

这意味着你可以声明变量的类型，而编译器将确保它们不会被分配到错误的值。

TypeScript中的数据类型

Number- 一个数字类型代表所有的数值；没有单独的定义整数、浮点数或其他。
String- 文本类型的数据类型，就像vanilla JS的字符串一样，可以用 "单引号 "或 "双引号 "包围。
布尔（Boolean ）是真或假；使用 0和1会导致编译错误。
Any- 具有这种类型的变量可以其值设置为字符串、数字或其他任何东西。
数组- 有两种可能的语法：my_arr: number[] 或my_arr:Array。
Void- 用于不返回任何东西的函数上。

TypeScript中的面向对象编程

TypeScript支持ES Next和面向对象编程的所有最新功能，例如类和接口。

这种能力对JavaScript来说是一个巨大的推动，因为它一直在为它的OOP功能而挣扎，尤其是在开发者开始将其用于大规模应用时。

TypeScript中的接口

接口用于类型检查对象是否具有特定的结构。

我们可以通过定义接口来命名变量的特定组合，确保它们总是在一起。

当从Typescript编译成JavaScript时，接口就消失了--它们唯一的作用是在开发阶段提供帮助：

// app.ts

interface OS {
    name: String;
    language: String;
}
const desert = (type: OS): void => {
  console.log('Android ' + type.name + ' has ' + type.language + ' language');
};

const nougat = {
  name: 'N', 
  language: 'Java'
}

desert(nougat);

在上面的例子中，我们创建了一个叫做OS 的接口。它有两个属性，叫做名字和语言。

下一步是定义一个有一个参数叫做type 的函数，这个参数就是接口OS的类型。

你可以将该文件编译为JS，并看到输出：

tsc app.ts

你的app.js 文件看起来像下面的代码：

// app.js

var desert = function (type) {
    console.log('Android ' + type.name + ' has ' + type.language + ' language');
};
var nougat = {
    name: 'N',
    language: 'Java'
};
desert(nougat);

输出结果如下：

TypeScript中的类

在面向对象的编程语言中，类是对象的模板。因此，类定义了一个对象的功能的外观。

类也封装了一个对象的数据。

TypeScript内置支持ES5和早期版本的Javascript所不支持的类，这意味着我们可以使用class关键字来轻松声明一个类。

让我们看看下面的例子：

// app.ts

class Car {
    model: String;
    doors: Number;
    isElectric: Boolean;
    
    constructor(model: String, doors: Number, isElectric: Boolean) {
        this.model = model;
        this.doors = doors;
        this.isElectric = isElectric;
    }

    make(): void {
        console.log(`This car is ${this.model} which has ${this.doors} doors` );
    }
}
let newCar = new Car('Innova', 4, false);
newCar.make();

在上面的例子中，我们定义了一个带有参数化构造函数、属性和方法的类。

然后我们创建了一个该类的对象，并通过参数来构造一个对象并赋值。

然后我们调用了make 方法来创建并在控制台中显示汽车。最后，编译该文件并在控制台内看到输出：

tsc app.ts

如果代码没有错误，你会看到更新的app.js 文件，现在运行该文件：

node app

请看下面的输出：

这就是Typescript例子的内容了。

TypeScript的初学者指南