欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

用VsCode编辑TypeScript的实现方法

时间:2020-05-20|栏目:JavaScript|点击:

TypeScript是Javascript的超集,它提供了类、模块、接口来帮助你构建强大的组件。

用VsCode编辑TypeScript的实现方法

VS Code下TypeScript支持在两种不同的模式下运行:

文件范围:在这个模式下,VsCode打开的TypeScript文件被视为独立单元。只要A.ts没有明确引用b.ts(使用///引用目录或额外模块),那么两个文件就没有通用项目上下文。

显式项目:一个typescript项目通过一个tsconfig.json被定义。该文件指定ts项目根目录,列出了属于项目的文件还有编译选项。tsconfig.json

通常,任何一个新项目的第一步是添加一个tsconfig.json文件。它定义了ts项目设置例如编译选项和包括的文件。

想要做到这点,打开你想存储资源的文件夹中添加一个叫tsconfig.json的文件。然后智能感知就会生效。

用VsCode编辑TypeScript的实现方法

一个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,按回车选择。

这展示了一个带有模板的选择框。

用VsCode编辑TypeScript的实现方法

选择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应用的细节,话题。

跳转标记&展示所有标记

ctrl+shift+o:列出所有定义符号关于当前打开和允许您在其中导航。

ctrl+T:让你搜索当前项目中或文件范围中所有定义的标记。你需要有一个typescript文件打开在编辑器中。

格式化代码

shift+alt+f:格式化整个文档。ctrl+k ctrl+f:格式化当前选择的资源代码。

JSDoc 支持

VsCode 提供了JSDoc对typescript的支持。除了语法上色,我们也会帮助你键入JsDoc注释。键入/**他将自动插入结束符*/在jsDoc块中输入回车将缩进下一行并自动插入*。

JavaScript Source Map 支持

typescript调试支持JavaScript source map.在项目运行配置文件launch.json中将sourceMaps设为true。另外,你可以制定一个typescript文件使用program属性。

想要生成你的typescript文件的source maps,编译--sourcemap选项或设置tsconfig.json文件中sourcemap属性为true。行内资源地图也是被支持的(一个内容被存储在url而不是一个单独的文件的资源地图),虽然还没有支持行内资源。

为生成文件设置一个不同的outFiles

如果被生成的(已经折叠)的JavaScript文件没有在它源文件旁边,你能通过在launch配置中的outfiles属性帮助vs代码调试器定位他们。

无论何时你在源代码中设置了断点,vscode 会尝试通过在oufiles中glob模式指定的文件查找生成的资源。

隐藏生成的Javascript文件

上一篇:详解DOM事件流的三个阶段

栏    目:JavaScript

下一篇:JavaScript 实现自己的安卓手机自动化工具脚本(推

本文标题:用VsCode编辑TypeScript的实现方法

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1301.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7