TypeScript是Javascript的超集,它提供了类、模块、接口来帮助你构建强大的组件。
VS Code下TypeScript支持在两种不同的模式下运行:
文件范围:在这个模式下,VsCode打开的TypeScript文件被视为独立单元。只要A.ts没有明确引用b.ts(使用///引用目录或额外模块),那么两个文件就没有通用项目上下文。
显式项目:一个typescript项目通过一个tsconfig.json被定义。该文件指定ts项目根目录,列出了属于项目的文件还有编译选项。更多有关tsconfig.json细节。
小提示:我们建议你使用显式项目模式范围代替文件范围模式。由于显式项目模式列出了属于一个项目语言的所有文件,因此,像查找所有引用Shift+F12仅考虑项目范围不是文件范围。
tsconfig.json
通常,任何一个新项目的第一步是添加一个tsconfig.json文件。它定义了ts项目设置例如编译选项和包括的文件。
想要做到这点,打开你想存储资源的文件夹中添加一个叫tsconfig.json的文件。然后智能感知就会生效。
一个tsconfig.json例子,表明是es5、commonJs模块、soumap。
{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true } }
现在,当你创建一个.ts文件作为项目的一部分我们将会提供丰富的编辑体验和语法验证。
将typescript转换为JavaScript
vscode通过任务运行器与tsc集成。我们能够使用这个工具来讲ts文件转换成js文件。让我们浏览你一个简单的typescript hello world程序。
步骤1:创建一个简单的Ts文件
在空文件夹上打开vscode然后创建一个helloworld.ts文件,将一下代码替换到文件中。
class Startup { public static main(): number { console.log('Hello World'); return 0; } } Startup.main();
步骤2:创建task.json
第一步是建立task配置,使用ctrl+shift+p打开命令调色板,然后输入configure task Runner,按回车选择。
这展示了一个带有模板的选择框。
选择typescript-tsconfig.json。这在工作区.vscode文件夹创建一个tasks.json文件。
task.json文件内容看起来像这样:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["-p", "."], "showOutput": "silent", "problemMatcher": "$tsc" }
小提示:虽然模板可以帮助生成通用配置设置,但智能提示也是对task.json文件有效。使用ctrl+space可以看到可用的设置。
在封面下,我们让tsc作为一个外部的任务运行器,它仅暴露一个任务:把typescript编译成javascript文件。命令是:tsc -p .
小提示:如果你没有安装typescript编译器,你可以点击这。
步骤3:运行构建任务
由于这是文件中唯一的任务,你可以执行它通过按ctrl+shift+b(运行构建任务)。与此同时你将看到一个额外的helloword.js文件展示在文件列表中。
这个typescript文件没有任何编译问题,所以helloworld.js和helloworld.js.map文件被创建。
如果node.js已经被安装,你能运行你的helloworld例子通过打开一个终端然后运行
node HelloWorld.js
小提示:你也能运行这个程序使用vscode的运行/调试特性,关于在vscode中运行和调试node应用的细节,在这查看。
步骤4:回顾构建问题
很不幸,大多数build并不顺利,结果通常带有一些额外的信息。举个例子,如果有一个错误在typescript文件中,你可能从tsc中得到下面的输出:
HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.
这将显示在输出窗口中(可以使用ctrl+shift+u打开),我们为你解析这个输出然后在任务栏中高亮显示这个问题。
你可以点击那个图标,得到问题列表并定位他们。
你也可以使用快捷键cril+shift+m打开这个列表。