TypeScript开发环境安装
1. npm install TypeScript1，安装TypeScript包
如果您的本地环境已经安装了npm工具，则可以直接使用npm工具安装TypeScript。 虽然TypeScript Package也是一个Compiler，但是你可以使用这个Complier将typescript编译成javascript。
可以使用以下命令安装它：
npm install -g typescript
安装完成后，我们可以使用tsc命令来执行TypeScript的相关代码。 以下是查看版本号：
tsc -v # Version 3.2.2
2. 将 TypeScript 转换为 JavaScript 代码（编译）
TypeScript转换为JavaScript的过程如右图所示：
然后我们创建一个新的 my1.ts 文件。 一般我们使用.ts作为TypeScript代码文件的扩展名。 代码如下所示：
var message:string = "Hello World" console.log(message)
然后执行以下命令将 TypeScript 转换为 JavaScript 代码：
tsc my1.ts
此时会在当前目录（与my1.ts同目录）生成一个my1.js文件，代码如下：
var message = "Hello World"; console.log(message);
注意：我们可以同时编译多个ts文件：
tsc file1.ts file2.ts file3.ts
tsc的常用编译参数如下表所示：
3.使用node命令执行JavaScript
执行my1.js文件：
node my1.js # Hello World
2.vscode直接调试ts文件
许多IDE都支持TypeScript插件，例如：VisualStudio、SublimeText2、WebStorm/PHPStorm、Eclipse等。
我们可以在左侧窗口中点击当前编辑的代码文件，选择openincommandprompt（在终端中打开），
这时，我们可以使用tsc命令来执行屏幕左下半部分的TypeScript文件代码。
如果PowerShell中断，可能会出现以下错误：
无法加载文件 C:UsersTANGAppDataRoamingnpmnrm.ps1，因为在此系统上严格禁止运行脚本
可以通过以下方法解决：
1.安装打字
typings主要用于获取.d.ts文件。 当 typescript 使用外部 JavaScript 库时需要此文件。 事实上，许多编译器使用它来减少智能感知。
npm install -g typings
2.在VSCode中集成ESLint检测
在编辑器中集成ESLint检测可以检测开发过程中的错误，大大降低了开发效率。
要在VSCode中集成ESLint检测，我们需要先安装ESLint插件，点击“扩展”按钮，搜索ESLint，然后安装。
VSCode 中的 ESLint 插件默认不检测 .ts 后缀。 您需要在“文件=>首选项=>设置”中添加以下配置：
{
"eslint.validate": [
"typescript"
]
}
创建一个测试项目
进入：
npm init
创建依赖包文件：package.json
3.创建并配置tsconfig.json
在项目根目录下，执行以下命令：
tsc –-init
手动创建 TypeScript 配置文件：tsconfig.json
最主要的是将sourceMap 设置为true。 请注意输出和输入目录。
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}
4.使用手动实时编译
借助vscode的任务typescript更新命令，可以手动将ts编译为js。 还可以使用其他形式的编译，例如：gulp、webpack等。
Ctrl+Shift+B 运行构建任务将显示以下“tsc build-tsconfig.json”选项：
或者点击“终端”菜单中的“运行任务”
手动添加任务文件：/.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for thedocumentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
//-p 指定目录；-w watch,检测文件改变自动编译
"args": ["-p", ".","-w"],
"showOutput": "always",
"problemMatcher": "$tsc"
}
之后，Ctrl+Shift+B运行构建任务typescript更新命令，会显示以下选项
选择“tsc:monitor-tsconfig.json”，回车运行，编辑好的代码保存后会进行手动编译。
5、配置调试
调试时需要配置vscode的launch.json文件。 该文件记录了启动选项。
添加或编辑文件 /.vscode/launch.json。
{
"version": "0.2.0",
"configurations": [
{
"name": "launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/main.js",
"args": [],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
注意：program需要设置为你要调试的ts生成的对应js。
如果您需要调试/src/main.ts，这里是${workspaceRoot}/dist/main.js。
6、调试
打开main.ts，两边添加断点，调试。
3.使用ts-node调试ts文件（方便）
ts-node调试ts文件时，不会显式生成js。 如果你不想编译成js然后调试，可以考虑这些形式。
1.安装npm依赖包（本地非全局）
npm install typescript npm install ts-node
2.配置launch.json
打开DEBUG界面并添加配置
或者编辑/.vscode/launch.json。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Current TS File",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"args": [
"${relativeFile}"
]
}
]
}
或者将 args 更改为以下内容以调试单独的 ts 文件
"args": [
"${workspaceFolder}/src/index.ts"
]
3、调试
TypeScript开发环境的安装文章到此结束。 希望对您的学习有所帮助，也希望您多多支持编程宝库。
下一节：node.js+postman+mongodb搭建测试注册socket实现JS编程技术
我打算为了工作申请一个免费的MongoDB，注册并申请一个500M的MongoDB数据库。 登录后自动创建数据库...
