TypeScript--如何从小白进阶成高手--搭建环境篇

如何从一个小白实现到一个高手的进阶,需要一个完整的生命周期的学习,或许需要去填很多的坑,当然更重要的是需要我们对最简单的知识点有更加熟练的运用和思考。

接下来让我们慢慢的揭开一个已经不那么神秘的面纱, 由浅入深的去探索这个新的世界

首先, 我们可以先来了解一下 TypeScript 有哪些优势

TypeScript 的优势

• 避免大量的低级错误, 节约实际开发的时间。
• 在我们多人协同工作的场景下, 可以减少工作成本, 对于大型项目友好,省时省力
• 在实际的开发过程中, 有好的代码提示是一种很好的体验

搭建 TypeScript 开发环境

俗话说，"工欲善其事, 必先利其器", 想要学好一门语言,我们需要有一个合适并且高效的开发环境.

当然开始搭建 TypeScript 环境之前我们的系统需要去安装几种开发的基础环境

1. Node.js  基于目前的稳定版本就可以,我目前的版本是v15.11.0
2. 基于 node 的 包管理工具 npm, yarn
3. 一个可以code的代码编辑，我用的是 vscode

之前笔者有一个比较旧版本的针对于 windows 用户的对于node环境搭建的具体的步骤指导,有需要的可以看一下

那么接下来我会按照自己的mac作为基本搭建

其实官网提供了对于 npm, yarn 安装的指南

npm install typescript --save-dev

yarn add typescript --dev

如果直接 去安装在全局的话

npm install -g typescript

创建环境

创建我们项目所在的目录

 mkdir ts-learning

打开所在目录结构

 cd ts-learning

紧接着 我们创建 src 目录

 mkdir src && touch src/index.ts

用 npm 将目录初始化

npm init

package.json

{
  "name": "ts-learing",
  "version": "1.0.0",
  "description": "ts-learing",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jiuwo",
  "license": "ISC"
}

当然了 对于 ts 而言我们也是需要做一次初始化的工作

tsc --init

之后会生成一份tsconfig.json 我们需要结合自己所需要的部分进行一些自定义的配置

{
  "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",
  ]
}

然后呢, 我们需要对自己的 package.json 文件进行相应的修改

   {
      "name": "ts-learing",
      "version": "1.0.0",
      "description": "ts-learing",
      "main": "index.js",
      "scripts": {
        "build": "tsc", // 编译
        "build:w": "tsc -w" // 监听文件，有变动即编译
      },
      "author": "jiuwo",
      "license": "ISC",
      "devDependencies": {
        "typescript ": "^3.6.4"
      }
    }

搭建环境告一段落, 那么接下来我们做一个简单的测试

   function firstTest(human) {
      return "hello" + human
   }

这个错误可能就是之前有一些同事会把 ts成为 anySrcipt的原因，我们需要一种严格的开发模式, 开启了 noImplicitAny 模式,对于隐含类型 any 变量和类型会进行相应提示和警告⚠️

   function firstTest(human: string) {
      return "hello" + human
   }

从上面我们可以看到函数的返回值的类型，当然这都是归功于 TypeScript 自带的类型推导。