TypeScript开发环境的搭建详解
TypeScript开发环境的搭建详解
TypeScript 由微软开发的开源免费的编程语言，是JavaScript语言的一个超集，本质上为JavaScript语言添加了可选的静态类型和基于类的面向对象编程概念。TypeScript的作者是大名鼎鼎的Anders Hejlsberg，是Delphi和C#之父。
TypeScript英文官网
https://www.typescriptlang.org/
TypeScript中文网
typescript 是 javascript 的当前最受欢迎的中间语言，提供了强大灵活的类型系统，typescript 提供一个编译器 tsc 可以将 typescript 编写的代码编译成 javascript。除了 typescript，你可能还听过 coffescript, flow, dart 等 javascript 的中间语言。
TypeScript开发环境的搭建
本文介绍两种TypeScript开发环境的搭建：一是TypeScript命令行开发环境的搭建 ；二是使用VSCode搭建TypeScript开发环境
一、TypeScript命令行开发环境的搭建
命令行的TypeScript编译器可以使用Node.js之npm工具来安装。
在命令行窗口中分别输入node -v 和 npm -v，查看版本信息，验证是否安装。
【Node.JS官网https://nodejs.org/en/ ，Node.js默认就带有npm工具。下载安装，选择好安装路径，一路回车安装即可（需要提醒的是：若不想安装大量的工具，不要点选“automatically install the necessary tools. Note that this will also install chocolatey. The script will pop_up in a new window after the installation completes.“ 意思是：自动安装必要的工具。注意，这也会安装chocolatey。安装完成后，脚本将弹出一个新窗口）。
查看本地下载的包版本信息
npm ls 名字 -g
其中-g查看全局的模块和包信息，去掉查看本地的】
安装TypeScript编译工具
使用npm安装TypeScript，在命令行窗口中输入
npm install -g typescript
全局安装TypeScript。参见下图：
安装完成后，可以输入
tsc -v
查看TypeScript编译器的版本信息。参见下图：
获取帮助
tsc -h
将“ts文件（TypeScript文件）”文件编译为“js文件”
tsc [--outDir 输出js文件的路径] ts文件
其中：[ ]表示可选，若不用--outDir <输出js文件的路径>，表示编译产生的“js文件”存放在”ts文件”的路径中。
<ts文件>，可带路径
ypeScript 转换为 JavaScript 过程如下图：
新建一个TypeScript文件（ts文件），内容如下：
function say(msg:string) {
return "Hello, " + msg;
}
let str = "TypeScript";
console.log(say(str));
保存到D:\TypeScriptDemo，文件名为demoA.ts参见下图：
在命令行窗口中，使用tsc命令编译
用
tsc --outDir D:\TypeScriptDemo D:\TypeScriptDemo\demoA.ts
或
tsc D:\TypeScriptDemo\demoA.ts
可以使用Node.js对生成的JavaScript文件进行执行
node D:\TypeScriptDemo\demoA.js
TypeScript语法特点
TypeScript 区分大写和小写字符。
每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。
TypeScript 支持两种类型的注释：单行注释 ( // ) 多行注释 (/* */)
二、使用VSCode搭建TypeScript开发环境
先从VSCode官网（https://code.visualstudio.com）下载当前稳定（stable）版本安装
安装很简单，选择好安装路径，一路回车安装即可。
安装完成后，打开 Visual Studio Code 界面类似如下：
创建目录d:\TypeScriptDemo2
使用VSCode选择该目录：菜单File—>Open Folder打开d:\TypeScriptDemo2，参见下图
此时，在EXPLORER栏出现TYPESCRIPTDEMO2（字符变为大写）
再点击菜单 Terminal(终端) —>New Terminal(新建终端），输入 tsc --init回车（即按下Enter键），参见下图：
创建出的tsconfig.json文件，将显示在EXPLORER栏。
【注、若提示：
tsc : 无法加载文件 C:\Users\Wang\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsof
t.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
应对处理：
以管理员身份 打开windows powershell
输入set-ExecutionPolicy RemoteSigned 选择 A 或者 Y
再输入 tsc --init回车即可】
tsconfig.json文件
这是TypeScript的配置文件，有几个重要的属性需要解释一下：
target：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015。
noImplicitAny：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。
module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。
removeComments：编译生成的JavaScript文件是否移除注释。
sourceMap：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。
outDir：编译输出JavaScript文件存放的文件夹。
include、exclude：编译时需要包含/剔除的文件夹。
可以根据实际需要，修改tsconfig.json文件
在EXPLORER栏，点击tsconfig.json文件，我们在此启用sourceMap和outDir的设置，即去掉这两项前面的//，并将"outDir": "./"改为"outDir": "./js"，参见下图：
编写TypeScript文件
使用菜单File—>New File，输入如下代码：
function say(msg:string) {
return "Hello, " + msg;
}
let str = "TypeScript";
console.log(say(str));
使用菜单File—>Save 保存文件名为sampleA.ts
编译
点击菜单 Terminal(终端) —>Run Build Task(运行生成任务)，在列表中选择tsc:Watch(监视) - tsconfig.json，启动编译
编译成功，将生成js目录以及对应ts文件的js文件，并出现在在EXPLORER栏中：
运行
点击菜单 Terminal(终端) —>New Terminal(新建终端），输入
node D:\TypeScriptDemo2\js\sampleA.js 或node js\sampleA.js回车（即按下Enter键），参见下图：
还可以使用浏览器运行
这需要先在VSCode中建立html文件，在其中将sampleA.js嵌入：
<!DOCTYPE html>
<head>
<title>TypeScript使用示例</title>
</head>
<body>
<script src="js/sampleA.js"></script>
</body>
</html>
保存为testA.html
在HTML文件中右键找到Open In Other Browser，打开相应的浏览器。在浏览器的控制台看到执行结果。参见下图：
【注、若在HTML文件中右键找不到Open In Other Browser，需要在VSCode中安装open in browser这个插件。
在VSCode中安装open in browser这个插件，参见下图：
】
最后再给出一个例子
Typescript源码
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
保存为ts_2.ts
html文件：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> TypeScript使用示例2</title>
</head>
<body>
<script src="js/ts_2.js"></script>
</body>
</html>
保存为test2.html
编译运行过程参见前面，运行结果如下：