TypeScript基础入门

水深无声 2022-12-26 13:26 164阅读 0赞

### 目录 ###

*   *   *  本文概览：
         *  1. TypeScript的特点
         *  2. TypeScript的安装与使用
         *   *  （1）项目初始化
             *  （2）配置TSLint

### 本文概览： ###

![在这里插入图片描述][20201205190137441.png]

### 1. TypeScript的特点 ###

**TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，扩展了 JavaScript 的语法，最终会被编译为JavaScript代码。** 虽然TypeScript是JavaScript的超集，但它始终紧跟ECMAScript标准，所以是支持ES6/7/8/9 等新语法标准的。并且，在语法层面上，对一些语法进行了扩展。

**注意：TypeScript实际上也是静态弱类型语言，它跟C语言是一样的，并不是所谓的强类型，因为要兼容JavaScript，所以TypeScript几乎不会限制JavaScript中原有的隐式类型转换它对类型的隐式转换是有容忍度的，而真正的静态强类型语言比如 Java、C\# 是不会容忍隐式转换的。**

那既然有了JavaScript，**为什么还要提出TypeScript呢？它的出现解决了什么问题呢？**

JavaScript是一种轻量级的解释性脚本语言。也是弱类型、动态类型语言，允许隐式转换，只有运行时才能确定变量的类型。正是因为在运行时才能确定变量的类型，JavaScript代码很多错误在运行时才能发现，比如：

*  调用一个函数时，少传了参数
 *  访问了一个对象没有的属性
 *  函数的返回值是一个数字，却被当成字符串使用
 *  …

诸如此类的问题还有很多。而TypeScript在JavaScript的基础上，包装了类型机制，使其变身成为**静态类型**语言。TypeScript的静态类型**增强了代码的可读性和可维护性。**

在 JavaScript 项目中最常见的十大错误，如果使用 TypeScript 在编写阶段就可以规避了：  
![在这里插入图片描述][20201205190215954.png]

从上面我们看出，TypeScript最大的亮点就是它的**类型系统。** 这使得在编写代码的时候就能检测到一些错误。而JavaScript 是一门动态脚本语言，它不需要编译成二进制代码运行。Node 服务端代码也不需编译即可在服务器起一个服务，我们甚至可以直接在服务器修改服务代码然后重启就可以，不需要编译等操作。这一切特点使得JavaScript 的所有调试都需要在运行时才能进行，在编写代码的时候很多问题是无法提前知晓的，而且就JavaScript目前的使用场景来看，它在至少很长一段时间内会保持这样的特点。

TypeScript 和 JavaScript 不同的就是，它可以在编写代码的时候，就对一些错误进行提示，还能在使用某个数据的时，为我们列出这个数据可以访问的属性和方法。当我们的项目较为庞大，需要由多人合作开发时，多人协作是需要沟通成本和 review 成本的。一些接口的定义，一些方法的使用，都可能因为个人习惯或沟通不畅导致逻辑实现的差异。而如果引入TypeScript，则会对一些实现进行强校验。如果不按接口实现，编译就没法通过。

**总结，TypeScript的主要特性：**

*  **超集** ：TypeScript 是 JavaScript 的一个超集。
 *  **类型系统** ：正如其名，TypeScript在JavaScript的基础上，包装了类型机制，使其变身为静态类型语言。
 *  **编辑器功能** ：增强了编辑器和IDE功能，包括代码补全、接口提示、跳转到定义、重构等。
 *  **错误提示** ：可以在编译阶段就发现大部分错误，帮助调试程序。

现在，感觉TypeScript越来越火，有很多广为人知使用TypeScript开发的项目：

*  **VSCode**：开源的高质量代码编辑器VSCode使用TypeScript开发，所以它天生就支持 TypeScript；
 *  **Vue 3.0和React**：Vue和React都是目前比较火的前端框架，React 已经使用 TypeScript编写，最新的VUe3.0页使用TypeScript进行了重构。如果使用TypeScript开发会得到更好的支持。
 *  **Element Plus**：11月30日，饿了么团队推出了Element UI for Vue 3.0 beta版，这是第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库，它对非常火的Element UI进行了重构，期待它更好的表现。
 *  **Ant Design**：使用 React 开发项目的开发者大多应该都知道蚂蚁金服开源UI组件库Ant Design，同样使用TypeScript进行编写。保证了代码质量的同时，也能很好地支持开发者使用TypeScript进行React项目的开发。Ant Design 也提供了Vue 版的组件库，风格和功能和 React 版的保持一致，共享单元测试和设计资源，对TypeScript的支持也一样很好。

### 2. TypeScript的安装与使用 ###

使用TypeScript之前需要以下准备：

*  Node.js > 8.0，最好是最新的稳定版
 *  一个包管理工具 npm 或者 yarn

#### （1）项目初始化 ####

TypeScript的基本使用步骤：  
1）全局安装TypeScript：

// npm
    npm install -g typescript
    // yarm
    yarn global add typescript
    // 查看版本
    tsc -v

2）创建项目目录，并打开：

mkdir demo & cd demo

3）在demo目录中创建ts文件：

index.ts

4）编译ts代码：

tsc index.ts

5）使用typescript进行初始化：

tsc --init

命令执行完之后，项目根目录多了一个 tsconfig.json 文件，里面包含ts的配置项（可能因为版本不同而配置略有不同）。

{ 
      "compilerOptions": { 
        "target": "es5",                            // 指定 ECMAScript 目标版本: 'ES5'
        "module": "commonjs",                       // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
        "moduleResolution": "node",                 // 选择模块解析策略
        "experimentalDecorators": true,             // 启用实验性的ES装饰器
        "allowSyntheticDefaultImports": true,       // 允许从没有设置默认导出的模块中默认导入。
        "sourceMap": true,                          // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
        "strict": true,                             // 启用所有严格类型检查选项
        "noImplicitAny": true,                      // 在表达式和声明上有隐含的 any类型时报错
        "alwaysStrict": true,                       // 以严格模式检查模块，并在每个文件里加入 'use strict'
        "declaration": true,                        // 生成相应的.d.ts文件
        "removeComments": true,                     // 删除编译后的所有的注释
        "noImplicitReturns": true,                  // 不是函数的所有返回路径都有返回值时报错
        "importHelpers": true,                      // 从 tslib 导入辅助工具函数
        "lib": ["es6", "dom"],                      // 指定要包含在编译中的库文件
        "typeRoots": ["node_modules/@types"],
        "outDir": "./dist",
        "rootDir": "./src"
      },
      "include": [                                  // 需要编译的ts文件一个*表示文件匹配**表示忽略文件的深度问题
        "./src/**/*.ts"
      ],
      "exclude": [
        "node_modules",
        "dist",
        "**/*.test.ts",
      ]
    }

#### （2）配置TSLint ####

[TSLint(deprecated)][TSLint_deprecated]是一个通过tslint.json配置在你写TypeScript代码时，对你的代码风格进行检查和提示的插件。

如果对代码风格有要求，就需要用到TSLint了。除此之外，TSLint会给你在很多地方起到提示作用，建议使用。

**TSLint使用步骤如下：**  
（1）在全局安装TSLint，要用管理员身份运行：

npm install tslint -g

（2）在项目根目录下，使用TSLint初始化我们的配置文件：

tslint -i

运行结束之后，项目根目录下多了一个tslint.json文件，这个就是TSLint的配置文件了，它会根据这个文件对代码进行检查，生成的tslint.json文件有下面几个字段：

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

这几个字段的内容如下；

*  **defaultSeverity**：提醒级别，如果为error则会报错，如果为warning则会警告，如果设为off则关闭，那TSLint就关闭了；
 *  **extends：** 可指定继承指定的预设配置规则；
 *  **jsRules：** 用来配置对`.js`和`.jsx`文件的校验，配置规则的方法和下面的rules一样；
 *  **rules：** TSLint检查代码的规则都是在这个里面进行配置，比如当我们不允许代码中使用`eval`方法时，就要在这里配置`"no-eval": true`；
 *  **rulesDirectory：** 可以指定规则配置文件，这里指定相对路径。

[20201205190137441.png]: /images/20221120/24b21a9a8536400aae02c1b450dd3a91.png?
[20201205190215954.png]: /images/20221120/108e4f87d0f44849aa167c2c1280082a.png?
[TSLint_deprecated]: https://marketplace.visualstudio.com/items?itemName=eg2.tslint