客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
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
编译运行过程参见前面，运行结果如下： |
请发表评论