在线编写并运行TypeScript

www.typescr

在代码编写完成之后，点击“Run”按钮即可运行生成的JavaScript代码。

TypeScript配置项：

“Config”（设置）标签页提供了用于配置TypeScript编译器的可视化工具。

Target：用于指定输出的JavaScript代码所参照的ECMAScript规范的版本。

JSX：用于指定JSX代码的生成方式，又名JavsScript XML，是JavaScript语言的扩展，常用在React应用中。

Module：用于指定生成模块代码的格式。

Lang：用于指定左侧编辑框使用的编程语言。

Compiler options from the TS Config：用于

本地编写并运行TypeScript

安装Visual Studio Code

安装TypeScript语言最简单的试是使用npm工具。

如果没有安装Noje.js，则需要到Node.js官网（nodejs.org/en/）上下载LTS版本的安装包并安装。

在安装Node.js的同时，也会自动安装npm工具。

使用如下命令来验证安装npm工具是否成功：

node -v

接下来，使用下面的命令全局安装TypeScript：

npm install -g typescript

“npm install”是npm命令行工具提供的命令之一，该命令用来安装npm代码包及其依赖项；

“-g”选项表示使用全局模式（nmp安装命令说明：docs.npmjs.com/cli/install）安装TypeScript语言；

最后的“typescript”代表是TypeScript语言在npm注册表中的名字。

使用下面的命令来验证TypeScript是否安装成功：

tsc --version

Microsoft Windows [Version 10.0.22000.1574]
(c) Microsoft Corporation. All rights reserved.C:\Users\a-xiaobodou>node -v
v16.17.0C:\Users\a-xiaobodou>npm install -g typescriptadded 1 package in 3s
npm notice
npm notice New minor version of npm available! 9.3.1 -> 9.6.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.1
npm notice Run npm install -g npm@9.6.1 to update!
npm noticeC:\Users\a-xiaobodou>tsc --version
Version 4.9.5C:\Users\a-xiaobodou>npm install -g npm@9.6.1removed 4 packages, and changed 62 packages in 7s16 packages are looking for fundingrun `npm fund` for detailsC:\Users\a-xiaobodou>npm install -g typescriptchanged 1 package in 2sC:\Users\a-xiaobodou>tsc --version
Version 4.9.5C:\Users\a-xiaobodou>

创建文件

首先，新建一个文件名，sample的目录作为根目录，启动Visual Studio Code，然后将sample文件夹拖曳到Visual Studio Code窗口中。或者使用快捷键"Ctrl+K Ctrl+O"打开"Open Folder..."对话框

新建tsconfig.json文件

使用新建文件快捷键“Ctr+N”来创建一个文件并输入以下代码：

{"compilerOptions":{"strict":true,"target":"es5"}
}

使用保存文件快捷键“Ctrl+S”将这个文件保存为“tsconfig.json”。“tsconfig.json”是TypeScript编译器默认使用的配置文件。

新建hello-world.ts文件

使用新建文件快捷键“Ctr+N”来创建一个文件并输入以下代码： 

const greeting='hello, world';console.log(greeting);

使用保存文件快捷键“Ctrl+S”将这个文件保存为“hello-world.ts”。TypeScript源文件的常规扩展名为“.ts”。

编译程序

使用快捷键”Ctrl+Shift+B“或从菜单栏里选择”Terminal->Run Build Task“来打开并运行构建任务面板，然后再选择”tsc:build-tsconfig.json“来编译TypeScript程序。

tasks.json里tasks删除之前：

tasks.json里tasks删除内容之后：

当编译完成后，在”hello-world.ts“文件的目录下会生成一个同名的”hello-world.js“文件，它就是编译输出的JavsScript程序。

此时的目录结构如下所示： 

运行程序

可选步骤：设置默认构建任务