【TypeScript 编程】001-002 第 1 章导言与第 2 章 TypeScript 概述

r囧r小猫 2023-10-01 11:47 13阅读 0赞

# 【TypeScript 编程】001-002 第 1 章 导言 与 第 2 章 TypeScript 概述 #

### 文章目录 ###

*  【TypeScript 编程】001-002 第 1 章 导言 与 第 2 章 TypeScript 概述
 *  第 1 章 导言
 *  第 2 章 TypeScript 概述
 *   *  1、编译器
     *   *  1.1 与众不同
         *  1.2 程序运行逻辑
         *  1.3 TypeScript 的特殊之处
         *  1.4 TypeScript 如何让代码更安全
         *  1.5 类型检查
         *  1.6 TypeScript 编译过程
         *  1.7 关于 JavaScript
         *  1.8 重申一下
     *  2、类型系统
     *   *  2.1 类型系统
         *  2.2 两种类型系统
         *  2.3 JavaScript VS TypeScript
         *  2.4 类似是如何绑定的（存疑）
         *  2.5 是否自动转换类型
         *  2.6 何时检查类型
         *  2.7 何时报告错误
     *  3、代码编辑器设置
     *   *  3.1 准备
         *  3.2 tsconfig.json
         *  3.3 tslint.json
     *  4、index.ts
     *  5、练习题
     *   *  5.1 代码
         *  5.2 截图说明

# 第 1 章 导言 #

一言以蔽之！**TypeScript 是未来！**

**参考文章：**

TypeScript 简介与优势

https://blog.csdn.net/Aria\_Miazzy/article/details/105430400

# 第 2 章 TypeScript 概述 #

## 1、编译器 ##

### 1.1 与众不同 ###

与 JavaScript 和 Java 等主流语言相比，TypeScript 的**运作方式**显得**与众不同**！

### 1.2 程序运行逻辑 ###

第一步：程序员编写**代码**文本、形成文件、构成程序；

第二步：编译器将程序代码转换成**抽象句法树**（abstract syntax tree, AST）；

> AST 是去掉了空白、注释和缩进用的制表符或空格之后的数据结构。

第三步：编译器把 AST 转换成**字节码**；

第四步：字节码再传给运行时程序**计算**，得到最终结果。

**概述：运行程序就是让运行时计算**由**编译器**从源码解析得来的 **AST** 生成的**字节码**。

不同语言的具体**细节**有所不同，但**整体**大致如此！

### 1.3 TypeScript 的特殊之处 ###

TypeScript 不直接编译成**字节码**，而是编译成 **JavaScript 代码**，然后像往常那样执行 JavaScript 代码！

### 1.4 TypeScript 如何让代码更安全 ###

TypeScript 编译器生成 AST 之后，真正运行代码之前，TypeScript 会对代码做**类型检查**。

### 1.5 类型检查 ###

**类型检查器：检查代码是否符合类型安全要求**的特殊程序。

**类型检查是 TypeScript 的魔力所在！**

### 1.6 TypeScript 编译过程 ###

**TS阶段**——由 TSC 操作

第一步：TypeScript 源码 => TypeScript AST ；

第二步：类型检查其检查 AST ；

第三步：TypeScript AST => JavaScript 源码 ；

**JS阶段**——由浏览器、NodeJS或其他 JavaScript 引擎中的 JavaScript 运行时操作

第四步：JavaScript 源码 => JavaScript AST ；

第五步：AST => 字节码；

第六步：运行时计算字节码。

### 1.7 关于 JavaScript ###

JavaScript 编译器和运行时通常聚在一个称为**引擎**的程序中。

程序员一般就是**与引擎交互**。

V8（驱动NodeJS、Chrome 和 Opera 的引擎）、SpiderMonkey（Firefox）、JSCode（Safari）和 Chakra（Edge）都是如此！

所以，JavaScript 看起来才像是一门解释型语言！

### 1.8 重申一下 ###

重申一下 TSC 将 TypeScript 转化成 JavaScript 时，不会考虑类型！也就意味着，类型不会对生成的 JavaScript 代码产生任何影响，类型只在类型检查这一步发挥作用！

## 2、类型系统 ##

### 2.1 类型系统 ###

类型检查器是**程序分配类型时**使用的一系列**规则**。

### 2.2 两种类型系统 ###

第一种：通过**显式句法**告诉编译器所有值的类型；

第二种：**自动推导**值的类型。

两种类型系统，**各有利弊**！

**TypeScript 身兼两种类型系统！可以显式注解类型，也可以让 TypeScript 推导多数类型。**

本书，只在必要时使用显式注解，多数情况下把工作交给 TypeScript 的推导功能。

### 2.3 JavaScript VS TypeScript ###

<table> 
 <thead> 
  <tr> 
   <th>类型系统特性</th> 
   <th>JavaScript</th> 
   <th>TypeScript</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>类型是如何绑定的？</td> 
   <td>动态</td> 
   <td>静态</td> 
  </tr> 
  <tr> 
   <td>是否自动转换类型？</td> 
   <td>是</td> 
   <td>否（多数时候）</td> 
  </tr> 
  <tr> 
   <td>何时检查类型？</td> 
   <td>运行时</td> 
   <td>编译时</td> 
  </tr> 
  <tr> 
   <td>何时报告错误？</td> 
   <td>运行时（多数时候）</td> 
   <td>编译时（多数时候）</td> 
  </tr> 
 </tbody> 
</table>

### 2.4 类似是如何绑定的（存疑） ###

① JavaScript **动态绑定类型**，因此**必须运行程序才能知道类型**。此前，JavaScript 对类型一无所知！

② TypeScript 是**渐进式类型**语言。这意味着，在编译时知道所有类型能让 TypeScript 充分发挥作用，**但在编译程序之间，并不需要知道全部类型。**（存疑PS：前面说知道所有的类型能让 TypeScript 充分发挥作用，后面又说编译程序之前不需要知道全部类型！这么说啥意思啊！）

③ **渐进式类型**特别便于把没有类型的 JavaScript 代码基迁移到具有类型的 TypeScript 。然而，除非你正处在迁移代码基的过程之中，否则应该实现 100% 的类型覆盖率！如无特殊说明，本书都采用这种策略！（存疑PS：没看懂啊这！）

> 渐进编译式语言在小修小改后可以快速重新编译，而不用重新编译整个程序（包括那些没有改动的部分）。

### 2.5 是否自动转换类型 ###

JavaScript 是**弱类型语言**！如果执行**无效的操作**，例如计算一个数与一个数组的和，JavaScript 将根据一系列规则判断你的真正意图！

下面以 JavaScript 表达式 3 + \[1\] 为例说明**具体步骤**：

第一步：JavaScript 发现 3 是一个数字，\[1\] 是一个数组；

第二步：由于使用 + ，JavaScript 假定你是想**拼接**二者；

第三步：JavaScript 把 3 隐式地**转换为字符串**，得到“3”；

第四步：JavaScript 把 \[1\] 隐式地**转换为字符串**，得到“1”；

第五步：把两个字符串拼接在一起，得到“31”。

我们可以**更明确地表达意图**（让 JavaScript 跳过第 1 步、第 3 步和第 4 步）：

3 + \[1\]; // 求职结果为“31”

(3).toString() + \[1\].toString() // 求职结果为“31”（这就是**表达了明确的意图**）

JavaScript 会“**自作聪明**”，自动转换类型，而 TypeScript 发现无效的操作时则**报错**（如果表达了**明确的意图**， TypeScript 不会报错）！

总结，如果必须进行类型转换，请**明确你的意图**！

### 2.6 何时检查类型 ###

① 多数情况下，JavaScript 不在乎你使用的是什么类型，它会尽自己所能把你提供的值转换成预期的类型。

② TypeScript 会在**编译时**对代码进行**类型检查**。TypeScript 会对代码做静态分析，找出此类错误，在**运行之前反馈给你**。如果代码不能编译，很可能表明**代码中有错误**，在运行之前要修正。

> 为代码编辑器（如 VS Code）安装恰当的 TypeScript 扩展，若代码出错则会有提示。

### 2.7 何时报告错误 ###

① JavaScript 在**运行时**抛出异常；

> 其实，JavaScript 在解析程序之后、运行程序之前报告句法错误和部分缺陷（例如在同一个作用域中多次使用 const 声明同名变量）。如果是在构建过程中解析 JavaScrpt（例如使用 Babel ），错误则在构建时报告。

② TypeScript 在**编译时**报告句法和类型相关的错误，这些错误会在编辑器内显式，输入代码后立即有反馈；

③ 还有大量错误是TypeScript 在**编译时**无法捕获的，比如堆栈溢出、网络断连、恶意的用户输入等，这些属于运行时异常；

④ TypeScript 所能做的是**把纯 JavaScript 代码中那些运行时错误提前到编译时报告！**（PS：这应该就是 TypeScript 的核心功能了！）

## 3、代码编辑器设置 ##

### 3.1 准备 ###

**第一步：安装 VS Code + Node JS（省略细节）；**

**第二步：新建一个文件夹，初始化一个新的 NPM 项目**

D:\MyFile\VSCodeProjects\hello-ts>npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help init` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (hello-ts)
    version: (1.0.0)
    description:
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to D:\MyFile\VSCodeProjects\hello-ts\package.json:
    
    {
        
      "name": "hello-ts",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this OK? (yes)
    
    D:\MyFile\VSCodeProjects\hello-ts>

**第三步：安装 TSC 、TSLint 和 NodeJS 的类型声明**

> TSC 是通过 TypeScript 编写的命令行应用，需要通过 NodeJS 运行，我们称之为自托管编译器或自编译型编译器。

D:\MyFile\VSCodeProjects\hello-ts>npm install --save-dev typescript tslint @types/node
    npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
    
    added 42 packages, and audited 43 packages in 8s
    
    3 packages are looking for funding
      run `npm fund` for details
    
    found 0 vulnerabilities
    
    D:\MyFile\VSCodeProjects\hello-ts>

### 3.2 tsconfig.json ###

每个 TypeScript 项目都应该在根目录中放一个名为 `tsconfig.json` 的文件，**在该文件中定义要编译那些文件、把文件编译到哪个目录中，以及使用哪个版本的 JavaScript 运行。**

第一步：在根目录下新建一个名为 `tsconfig.json` 的文件

第二步：使用代码编辑器输入下面内容

**下面的内容应该得到重视！**

{
        
        "compilerOptions": {
        
            "lib": ["ES2015"], // TSC 假定运行代码的环境有哪些 API ？包括 ES5 的 Function.prototype.bind 、ES2015 的 Object.assign 和 DOM 的 document.querySelector
            "module": "commonjs", // TSC 把代码编译成哪个模块（CommonJS、SyatemJS、ES2015等）
            "outDir": "dist", // TSC 把生成的 JavaScript 代码放在哪个文件夹中
            "sourceMap": true,
            "strict": true, // 检查无效代码时尽量严格。该选项强制所有代码都正确声明了类型。本书中所有示例都是用这个选项，你的 TS 项目也应如此！
            "target": "ES2015" // TSC 把代码变成成哪个 JS 版本（ES3、ES5、ES2015、ES2016等）
        },
        "include": [ // 表示 TSC 在哪个目录下寻找 TypeScript 文件
            "src"
        ]
    }

上面只是一小部分选项， `tsconfig.json` 支持的选项有很多，而且一直有新的出现！实际上，这些选项很少改动，\*\*偶尔改动的有：切换模块打包工具时修改 moudle 和 target 设置、编写在浏览器中运行的 TypeScript 时在 lib 中添加 dom （12 章有详细说明）、把现有 JavaScript 代码迁移到 TypeScript 时调整严格（strict）级别（见11.2节）。\*\*此外，TSC 的很多选项可以通过命令设置，可用的命令通过 `./node_moudles/.bin/stc --help` 命令查看

### 3.3 tslint.json ###

> 全局安装命令：npm i tslint --save -g

① `tslint.json` 文件用来保存代码风格上的约定！

② 它不是必要的，**但强烈建议所有的 TypeScript 项目都使用它！**

③ 可以使用 `tslint --init` 生成一个默认的 `tslint.json` 文件，可根据需求调整，下面是默认生成的内容：

{
        
        "defaultSeverity": "error",
        "extends": [
            "tslint:recommended"
        ],
        "jsRules": {
        },
        "rules": {
        },
        "rulesDirectory": []
    }

④ 作者的 `tslint.json` 文件

{
        
        "defaultSeverity": "error",
        "extends": [
            "tslint:recommended"
        ],
        "rules": {
        
            "semicolon": false,
            "trailing-comma": false
        }
    }

## 4、index.ts ##

**第一步：新建 src 目录和 index.ts 文件**

当前项目文件夹目录如下：  
![image-20220103112059121][]

**第二步：编辑 index.ts 文件**

console.log("Hello TypeScript!")

**第三步：使用 TSC 编译 TypeScript**

> 安装：npm install -g typescript

D:\MyFile\VSCodeProjects\hello-ts>tsc

![image-20220103112620785][]

**第四步：运行 js 文件**

D:\MyFile\VSCodeProjects\hello-ts\dist>node index.js
    Hello TypeScript!

## 5、练习题 ##

### 5.1 代码 ###

console.log("Hello TypeScript!")
    
    let a = 1 + 2
    
    let b = a + 3
    
    let c = {
        
        apple : a,
        banana: b
    }
    
    let d = c.apple * 4

### 5.2 截图说明 ###

![image-20220103113004070][]

[image-20220103112059121]: https://img-blog.csdnimg.cn/img_convert/4bad510bc0afa629205906ed44358668.png
[image-20220103112620785]: https://img-blog.csdnimg.cn/img_convert/2348ed83d3ac8efdcdeddf91ac9e3e77.png
[image-20220103113004070]: https://img-blog.csdnimg.cn/img_convert/fee226228013d52b1b174e1f33447fe6.png