TypeScript基础入门

目录

本文概览：

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 在编写阶段就可以规避了：

从上面我们看出，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 &

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.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：可以指定规则配置文件，这里指定相对路径。