关键词：
TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上，TypeScript 是开源的。为什么选择 TypeScript以及TypeScript优缺点阅读TypeScript入门教程。利用VScode搭建TypeScript开发环境前提是已经安装node.js和VScode。
1、安装TypeScript
使用npm工具安装全局TypeScript：
npm install -g typescript
2、创建helloTypeScript
创建helloTypeScript目录，在命令行cmd下进入helloTypeScript目录
cd helloTypeScript
输入：npm init，创建package.json，package.json文件如下：
"name": "hellotypescript",
"version": "1.0.0",
"description": "hello typescript",
"main": "index.html",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"start": "tsc && concurrently \\"npm run tsc:w\\" \\"npm run lite\\"",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
,
"keywords": [
"typescript"
],
"author": "sanshui",
"license": "ISC",
"dependencies":
,
"devDependencies":
"lite-server": "^2.2.0",
"concurrently": "^2.0.0"
- concurrently—同时执行命令用
- lite-server—轻量级的Node开发服务器
3、安装依赖包、编写示例代码
使用npm i 或者 cnpm i 或者yarn 安装依赖包
npm i
编写HelloTypeScript.ts代码：
class HelloTypeScript
helloString: string;
constructor(message: string)
this.helloString = message;
hello()
return this.helloString;
let myName: string = 'SanShui'
let myAge: number = 23
let sentence: string = `Hello, my name is $myName. I'll be $myAge + 1 years old next month`
let helloTypeScript = new HelloTypeScript(sentence);
document.body.innerHTML = helloTypeScript.hello();index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloTypeScript</title>
</head>
<body>
<script src="dist/tsc.js"></script>
</body>
</html>
4、创建 tsconfig.json
当前TypeScript代码并不能直接执行，需编译为JavaScript代码。而借助VS Code，我们就不用在命令行输入编译命令了。为此，在根目录添加一个tsconfig.json文件。该文件是TypeScript编译器配置文件。
"compilerOptions":
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "dist/tsc.js",
"sourceMap": true
,
"include": [
"src/*"
],
"exclude": [
"node_modules"
]
tsconfig.json详细配置请查看：tsconfig.json配置
5、编译运行
npm run start
编译后目录结构如图：
运行结果如图：
修改TypeScript程序，服务器会自动编译并刷新浏览器。
参考链接：
http://www.cnblogs.com/xuanhun/p/6027624.html
http://www.cnblogs.com/sunjie9606/p/5945540.html
vscode下搭建typescript编译环境
参考技术ATypescript是微软开发的一个JavaScript的超级。著名前端框架的Angular和HTML5游戏引擎Egret等都选择了Typescript作为编写语言。“工欲善其事，必先利其器”，在学习Typescript语言之前必须要有一个良好的开发环境。这里笔者选... 查看详情
typescript环境搭建，并且部署到vscode（亲测有效）(代码片段)
前言：要想搭建TypeScript，那么就要有npm，要想有cnpm，那么就得有node环境。要是都有了的话，那么接下来，往下看。TypeScript环境搭建，并且部署到VSCodeTypeScript环境搭建第一步：下载淘宝镜像第二步... 查看详情
typescript搭建开发环境
为了方便后期使用，我们搭建一个基于Typescript的开发环境，后期的项目都可以基于此进行开发。建立一个空的项目文件，使用npminit命令生成相应的json配置文件，（也可以使用npminit-y,使用默认配置)//注意事项：1、在输入了n... 查看详情
vscode搭建java开发运行环境
用了一段时间VSCode，觉得还可以，想用VSCode整合不同的开发语言，于是研究了一下利用VSCode搭建Java环境、开发Java程序。网上这方面的帖子有不少，但每人的经历不同，把自己的经历记下来吧。先附上官网链接，官网上也对在VSCo... 查看详情
第二章typescript开发环境搭建
MacOSX下TypeScript开发环境搭建一、集成开发环境WebStromVSCode二、安装TypeScriptHomebrew（macOS缺失的软件包管理器）ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"npm(NodePackageManager 查看详情
搭建typescript开发环境最详细的全过程
本文《搭建typescript开发环境最详细的全过程》的源代码在https://github.com/lingsbb/ts_demo/下载。搭建typescript开发示例https://github.com/Microsoft/TypeScriptSamplestypescript案例https://www.tslang.cn/samples/index.html安装git:http://git 查看详情
搭建vscode开发c环境
关于搭建vscode的开发环境来开发c网上已经有很多类似的贴子，但是几乎都是直接给出tasks.json和launch.json文件，并未说明这两个文件的用途以及如何配置。这里着重说明下这两个问价。一、安装gcc使用mingw-w64而非mingw，后者已经许... 查看详情
windows10搭建vscode开发环境
进入VScode官网下载安装程序：https://code.visualstudio.com/Download点击直接下载：https://vscode.cdn.azure.cn/stable/dea8705087adb1b5e5ae1d9123278e178656186a/VSCodeUserSetup-ia32-1.30.1.exe 查看详情
用vscode搭建c#开发环境
文章目录环境安装调试环境安装.Net环境安装https://dotnet.microsoft.com/en-us/download检查安装dotnet--versiondotnet-hdotnetnew-hdotnetnewconsole-otest_0304codetest_0304调试需要装的插件：C#C#FormatRevolveC#ExtensionsAuto-Usingfo 查看详情
vscode搭建stm32开发环境(代码片段)
文章目录VSCode搭建STM32开发环境一、软件工具准备二、VSCode配置2.1配置命令行2.2添加make工具2.3配置下载2.4配置仿真2.5配置VSCode写代码环境VSCode搭建STM32开发环境之前开发STM32使用的开发环境是MDK+STM32CubeMX方法，MDK是收费软... 查看详情
vscode搭建java开发环境
1:在VisualStudioCode中打开扩展视图(Ctrl+Shift+X)，输入关键词java、spring分别下载Java开发插件包和springboot插件包2:配置参数点击设置按钮，进入设置选项，配置用户设置(文件->首选项->设置 Ctrl+,）{"editor.minimap.enabled":false,"... 查看详情
在windows上利用vscode和wsl搭建c语言开发环境
参考技术A参考：如何在windows上利用WSL和VSCode快速搭建C语言开发环境 查看详情
用vscode搭建c#开发环境
文章目录环境安装调试环境安装.Net环境安装https://dotnet.microsoft.com/en-us/download检查安装dotnet--versiondotnet-hdotnetnew-hdotnetnewconsole-otest_0304codetest_0304调试需要装的插件：C#C#FormatRevolveC#ExtensionsAuto-UsingforC#直接调试运行或者dotnetrun运... 查看详情
用vscode搭建c#开发环境
文章目录环境安装调试环境安装.Net环境安装https://dotnet.microsoft.com/en-us/download检查安装dotnet--versiondotnet-hdotnetnew-hdotnetnewconsole-otest_0304codetest_0304调试需要装的插件：C#C#FormatRevolveC#ExtensionsAuto-UsingforC#直接调试运行或者dotnetrun运... 查看详情
阿里云开发板vscode开发环境搭建
...续努力，迅速迭代，在极短的时间里，推出了vscode插件，用大家最熟悉的ide作为官方的开发工具。本文与大家共同学习如何搭建这个基于 查看详情
测试驱动开发002：vscode+cmake+unity环境搭建(代码片段)
...对《测试驱动的嵌入式C语言开发》第二章的实践。搭建VSCode这部分参考博文《基于Windows的VSCodeC/C++编译环境搭建》。安装CMake安装CMake，在官网下载最新安装包。安装时选择对所有用户添加CMake到系统PATH。安装VSCode插件... 查看详情
vscode搭建docker环境
...云开源镜像站前言本环境通过使用VMware在Ubuntu20.04下通过VScode搭建docker环境，可通过远程连接容器进行开发。（仅作参考）一、环境准备VMware15pro，Ubuntu20.04，VScode（Linux版本）虚拟机搭建 查看详情
如何在vscode中搭建qt开发环境(代码片段)
前言VSCode高大上的界面、爽到不行的智能联想和庞大的插件市场，着实让人对他爱不释手。虽然可以更改QtCreator的主题，但是QtCreator的代码体验实在差劲。下面就来看看如何在VSCode中搭建Qt开发环境。安装插件工欲善其事，必先... 查看详情