您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

TypeScript 安装与使用

本节介绍 TypeScript 的安装与两种使用方式,大家根据本节所介绍的流程一步步操作,相信很快就能编写自己的 TypeScript 。

环境准备:

到 根据自己的操作系统下载对应 Node.js 版本,Node.js npm。安装后,在 终端 执行如下命令,检查是否安装成功:

~ node -v
v10.16.3
~ npm -v
6.9.0

通过 npm 全局安装 TypeScript:

npm install -g typescript

如果权限不足,请使用超管权限安装

TypeScript 在全局安装后,我们可以在任意位置使用 tsc 命令,tsc 命令负责编译 TypeScript 为 JavaScript 。

文中所用 shell 命令在 Windows 环境可以安装 git bash

创建练习目录:

mkdir ts-practice && cd ts-practice

创建 ts :

touch enums.ts

中写入:

// enums.ts
export enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

然后通过 tsc 命令编译 ts :

tsc enums.ts

可以看到在同级目录下,了 enums.js 。文中涉及的 TypeScript 语法之后会详细介绍,这里清楚 ts 的编译过程即可。

在进行简单的语法练习时,可以通过上面介绍的 tsc 命令来编译 ts ,而在实际项目工程中,可以采取另一种工程化方案:

① 在 ts-practice 目录下创建 src 目录:

mkdir src && touch src/index.ts

② 接下来用 npm 进行项目初始化(初始化过程中的交互命令有兴趣可自行查阅相关资料,目前一路按“回车键”即可):

npm init

你会发现目录中多了 package.json ,它定义了这个项目所需要的各种模块,以及项目的配置信息(比如、版本、作者、license等信息)。

将 package.json 中入口选项改为刚刚创建的 index.ts:

{
  "main": "src/index.ts",
}

③ 然后,使用 tsc 命令进行初始化:

tsc --init

这时候你会发现目录下又多了 tscon.json ,它指定了用来编译这个项目的根和编译选项。

Tips:

后续会有专门一节来介绍 tscon.json 的各项参数,这里将刚才的稍作:

{
  "compilerOptions": {
    "target": "ESNext",     /*  ES6 语法 */                      
    "module": "commonjs",                     
    "outDir": "./lib",
    "rootDir": "./src",
    "declaration": true,    /* 相应的.d.ts */
    "strict": true, 
    "strictNullChecks": false,
    "noImplicitThis": true
  },
  "exclude": ["node_modules", "lib", "**/*.test.ts"],
  "include": ["src"]
}

④ 在 package.json 中,加入 script 命令以及依赖关系:

{
  "name": "ts-practice",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^13.1.1",
    "typescript": "^3.7.4"
  }
}

⑤ 根据 package.json 中的配置选项,下载所需模块,也就是配置项目所需的运行和开发环境:

npm install

你会看到多了 node_modules 夹和 package-lock.jsonnode_modules 夹是项目的所有依赖包,package-lock.json 将项目依赖包的版本锁定,避免依赖包大版本造成不兼容问题。

⑥ 与介绍 tsc 命令时一样,将以下写入 index.ts :

// src/index.ts
export enum TokenType {
  ACCESS = 'accessToken',
  REFRESH = 'refreshToken'
}

⑦ 在项目根目录输入编译命令:

npm run tsc

这时候可以看到多了 lib 夹,里面的就是项目的编译结果了! ???

本节主要介绍了 TypeScript 的安装与两种使用方式:

其中第二种工程化方案是我们在实际开发中使用较多的,毕竟 TypeScript 就是为大型项目而生的。希望大家多加练习,熟练使用。


联系我
置顶