让我们使用TypeScript来创建一个简单的Web应用。

安装TypeScript

有两种主要的方式来获取TypeScript工具:

  • 通过npm(Node.js包管理器)
  • 安装Visual Studio的TypeScript插件

Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,你可以下载它。

NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装:

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

$ tsc -v
Version 3.2.2

构建你的第一个TypeScript文件

var message:string = "Hello World" 
console.log(message)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码:

tsc test.ts

这时候再当前目录下(与 test.ts 同一目录)就会生成一个 test.js 文件,代码如下:

var message = "Hello World";
console.log(message);

使用 node 命令来执行 test.js 文件:

$ node test.js 
Hello World

TypeScript 转换为 JavaScript 过程如下图:

TypeScript 转换为 JavaScript 过程

Visual Studio Code介绍

很多IDE都有支持TypeScript插件,如:Visual Studio,Sublime Text 2,WebStorm/PHPStorm,Eclipse等。

本章节主要介绍Visual Studio Code,Visual Studio Code是一个可以运行于Mac OS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,由Microsoft公司开发。

下载地址:https://code.visualstudio.com/。

Windows 上安装 Visual Studio Code

1、下载 Visual Studio Code

Windows 上安装 Visual Studio Code

2、双击 VSCodeSetup.exe 图标VSCodeSetup.exe 图标安装。

双击 VSCodeSetup.exe 图标

3、安装完成后,打开 Visual Studio Code 界面类似如下:

打开 Visual Studio Code 界面

4、 我们可以在左侧窗口中点击当期编辑的代码文件,选择 open in command prompt(在终端中打开),这时候我们就可以在屏幕的右侧下半部分使用 tsc 命令来执行 TypeScript 文件代码了。

使用 tsc 命令来执行 TypeScript 文件代码

Mac OS X 安装 Visual Studio Code

Mac OS X 安装配置 Visual Studio Code 可以查看: https://code.visualstudio.com/Docs/editor/setup

Linux安装Visual Studio Code

Linux安装配置Visual Studio Code可以查看:https://code.visualstudio.com/Docs/editor/setup

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » TypeScript 安装

发表评论