VSCode中的TypeScript教程

news2024/12/28 3:52:35

TypeScript 是JavaScript的类型化超集,可编译为纯JavaScript。它提供了类、模块和接口来帮助您构建健壮的组件。

安装 TypeScript 编译器

Visual Studio Code 包括 TypeScript 语言支持,但不包括 TypeScript 编译器tsc。您需要在全局或工作区中安装TypeScript编译器,以将 TypeScript 源代码转换为 JavaScript(tsc HelloWorld.ts)。

安装TypeScript最简单的方法是通过Node.js包管理器npm。如果你已经安装了npm,你可以通过以下方式在你的计算机上全局安装TypeScript(-g):

npm install -g typescript

您可以通过检查版本来测试安装。

tsc --version

 Hello World

让我们从一个简单的 Hello World Node.js 示例开始。创建一个新文件夹HelloWorld并启动VS Code。

mkdir HelloWorld
cd HelloWorld
code .

在文件资源管理器中,创建一个名为helloworld.ts的新文件。

现在添加以下TypeScript代码。你会注意到TypeScript关键字let字符串类型声明。

let message: string = 'Hello World';
console.log(message);

 要编译TypeScript代码,您可以打开集成终端(Integrated Terminal)并输入tsc helloworld.ts。这将编译并创建一个新的 helloworld.js JavaScript文件。

如果你安装了Node.js,你可以运行node helloworld.js

如果你打开helloworld.js,你会发现它看起来和helloworld.ts没有太大的不同。类型信息已经被删除,let现在是var

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

智能感知

在VS Code中,您可以看到您获得了语法突出显示和括号匹配等语言功能。当你在编辑器中输入时,你可能已经注意到了智能感知,VS Code和TypeScript语言服务器提供的智能代码完成和建议。下面您可以看到控制台的方法

当你选择一个方法时,你会得到参数帮助,并且总是可以得到悬停信息。

 tsconfig.json

到目前为止,在本教程中,您一直依赖于TypeScript编译器的默认行为来编译TypeScript源代码。您可以通过添加一个定义TypeScript项目设置(如编译器选项和应包含的文件)的tslog.json文件来修改TypeScript编译器选项。

要点:要在本教程的其余部分使用tsc. json,请在不使用输入文件的情况下调用tsc。TypeScript编译器知道查看tsconfig.json以获取项目设置和编译器选项。

添加一个简单的tsconfig.json,设置编译到ES5和使用 CommonJS 模块的选项。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

在编辑tsconfig.json时,智能感知(空间)将在此过程中为您提供沿着。

默认情况下,TypeScript包含当前文件夹中的所有.ts文件,如果不包含files属性,则会删除,因此我们不需要显式列出helloworld.ts

更改生成输出 

将生成的JavaScript文件与 TypeScript 源文件放在同一个文件夹中,在较大的项目中会很快变得混乱,因此您可以使用 outDir 属性为编译器指定输出目录。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

删除 helloworld.js 并运行命令tsc,不带任何选项。您将看到 helloworld.js 现在被放置在out目录中。

错误检测

TypeScript通过强类型检查帮助您避免常见的编程错误。例如,如果您为message分配一个数字,TypeScript编译器将报告“错误TS 2322:类型'2'不可分配给类型'string'”。您可以在编辑器(带有悬停信息的红色波浪线)和“问题”面板(问题M)中看到VS Code中的类型检查错误。[ts]前缀让您知道此错误来自TypeScript语言服务。

快速修复

TypeScript 语言服务具有一组强大的诊断功能,可以找到常见的编码问题。例如,它可以分析您的源代码并检测在编辑器中显示为灰色的无法访问的代码。如果您将鼠标悬停在源代码行上,您将看到一个悬停解释,如果您将光标放在该行上,您将看到一个快速修复灯泡。

点击灯泡或按下按钮。打开Quick Fix菜单,您可以在其中选择Remove unreachable codefix。 

此外,代码操作小部件:包括附近的快速修复editor. codeAction Widget.includeNearbyQuickFixes)是默认启用的设置,它将激活行中离快速修复最近的快速修复。(命令IDeditor.action.quickFix),无论光标在该行的哪个位置。

该命令突出显示将使用快速修复重构或修复的源代码。正常代码操作和非修复重构仍然可以在光标位置激活。

调试

VS Code内置了TypeScript调试支持。为了支持结合执行的JavaScript代码调试TypeScript,VS Code依赖于调试器的源映射来在原始TypeScript源代码和运行的JavaScript之间进行映射。您可以在构建过程中通过在tslog.json中设置“sourceMap”:true来创建源映射。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

通过运行tsc重新构建,现在你应该在helloworld.js旁边的out目录中有一个helloworld.js.map

在编辑器中打开 helloworld.ts 后,按F5。如果您安装了其他调试器扩展,则需要从安装包中选择 Node.js

调试器将启动一个会话,运行您的代码,并在调试器控制台面板中显示“Hello World”消息。

helloworld.ts中,通过单击编辑器的左栏来设置断点。如果设置了断点,您将看到一个红色圆圈。再次按F5。执行将在命中断点时停止,并且您将能够在 Run and Exception 视图(Runand Exception D)中看到调试信息,例如变量值和调用堆栈。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2216309.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C语言】预编译+编译+汇编+链接

文章目录 翻译环境和运行环境翻译环境预处理(预编译)编译汇编链接 运行环境 接下来是预处理阶段的一系列知识,认真阅读哦预定义符号#define定义常量#define定义宏带有副作用的宏参数宏替换的规则宏函数的对比#和##命名约定#undef命令行定义条…

C++初阶(五)--类和对象(中)--默认成员函数

目录 一、默认成员函数(Default Member Functions) 二、构造函数( Constructor) 1.构造函数的基本概念 2.构造函数的特征 3.构造函数的使用 无参构造函数 和 带参构造函数 注意事项: 4.默认构造函数 隐式生成的…

恢复已删除文件的 10 种安卓数据恢复工具

由于我们现在在智能手机上存储了大量重要文件,因此了解数据恢复工具变得很重要。您永远不会知道什么时候需要使用 安卓 数据恢复工具。 由于不乏 Windows 数据恢复工具,因此从崩溃的计算机中恢复文件很容易。但是,当涉及到从 安卓恢复数据时…

大数据-171 Elasticsearch ES-Head 与 Kibana 配置 使用 测试

点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…

Go语言Gin框架的常规配置和查询数据返回json示例

文章目录 路由文件分组查询数据库并返回jsonservice层controller路由运行效果 启动多个服务 在 上一篇文章《使用Go语言的gorm框架查询数据库并分页导出到Excel实例》 中主要给大家分享了较多数据的时候如何使用go分页导出多个Excel文件并合并的实现方案,这一篇文章…

unity学习-全局光照(GI)

在全局光照(Lighting)界面有两个选项 Realtime Light(实时光照):在项目中会提前计算好光照以及阴影的程序,当你需要调用实时全局光照的时候会将程序调用出来使用 Mixed Light(烘焙光照&#x…

如何利用kafka实现高效数据同步?

在我们之前的文章有详细介绍过Kafka的结构、特点和处理方式。具备告诉处理能力的kafka被利用在数据同步和数据传输上,今天来说下kafka是怎么实现高效的数据同步和传输。 一、可靠的数据传输 1. 持久性保证:Kafka 将数据持久化到磁盘上,即使在…

汽车管理系统——主界面制作

目录 主界面需要有什么?然后要做什么?添加两个主菜单(声明)下一步应该干什么?能够跳转到文件有哪几个动作?动作如何声明?为什么用选择声明指针,不选择直接声明这个对象? …

算力基础篇:从零开始了解算力

什么是算力 算力即计算能力(Computing Power),狭义上指对数字问题的运算能力,而广义上指对输入信息处理后实现结果输出的一种能力。虽然处理的内容不同,但处理过程的能力都可抽象为算力。比如人类大脑、手机以及各类服…

git 与 github 同步

1.配置账户 git config --global user.name "你的用户名" git config --global user.email "你的邮箱" 2.输入命令创建ssh key $ ssh-keygen -t rsa -C "邮箱" //你自己注册GitHub的邮箱 输入命令之后提示输入密码,回车直到出现…

C++类(3)

1.如果一个类什么成员都没有,简称空类 但是空类真的什么都没有吗? 并不是,任何类什么都不写,编译器会自动生成以下6个默认成员函数 1.构造函数 class Date { public:void Init(int year, int month, int day){_year year;_mo…

kubernetes简介及安装部署

目录 一、kubernetes简介 1、k8s的概念 2、k8s各个组件及用途 3、k8s各组件之间的调用关系 4、k8s常用名词概念 5、k8s的分层架构 二、kubernetes安装部署 1、k8s集群环境搭建 2、本地解析、swap禁用 3、安装docker 4、复制harbor仓库中的证书并启动docker 5、设定d…

基于Cesium.js的可视化大屏,效果绝对的震撼!

基于 Cesium.js 的可视化大屏确实能带来震撼的效果。Cesium.js 强大的三维渲染能力,能够逼真地呈现地理信息和各种数据模型。 在大屏上,广袤的地形地貌、精细的建筑模型以及动态的数据展示,仿佛将观众带入一个全新的虚拟世界。无论是用于地理…

网络分析仪——提升网络性能的关键工具

目录 什么是网络分析仪? 1. 实时流量监控 2. 历史数据回溯分析 3. 网络性能关键指标监测 4. 可视化界面与报告生成 总结 在当今的数字化世界,网络的稳定性和性能直接影响企业的运营效率。网络拥堵、延迟和丢包等问题会导致用户体验的下降&#xff…

“屏” 步青云:轻松开启录屏功能,Windows 实例教学

你知道 Windows 的录屏功能怎么打开吗?在当今数字化时代,录屏功能成为了许多人工作、学习和娱乐中的得力助手。无论是制作教学视频、记录游戏精彩瞬间,还是为线上会议留存资料,掌握录屏技能都至关重要。今天我们不仅会介绍 Window…

springboot智能网上问诊系统-计算机毕业设计源码99634

摘要 智能网上问诊系统作为医疗健康领域的重要应用之一,为患者提供了便捷的医疗服务途径。本研究旨在基于Springboot框架设计和实现一套智能网上问诊系统,结合医疗专业知识,实现患者与医生之间的在线咨询和诊疗服务。 通过对Springboot框架…

如何从模块内部运行 Pytest

在 Python 中,pytest 是一个强大的测试框架,用于编写和运行测试用例。通常我们会在命令行中运行 pytest,但是有时你可能希望从模块或脚本的内部运行 pytest,比如为了自动化测试或集成到某个工作流程中。 1、问题背景 当你从模块…

网络爬虫-数美滑块验证码

仅供研究学习使用。 今天带来的是数美滑块验证码的逆向 目标站 --> 传送门 解决此类验证码 首先要解决滑动距离的判定 无论是使用selenium还是使用协议的方式来破解 都绕不开滑动距离的识别 滑动距离可以参考以前我博客上的方式,或者找一找开源的一些算法&am…

秋招突击——8/6——万得数据面试总结

文章目录 引言正文面经整理一1、讲一下java的多态,重载,重写的概念,区别2、说一下Java的数组,链表的结构,优缺点3、创建java线程的方式有哪些,具体说说4、创建线程池呢、每个参数的意义5、通过那几种方式保…

java基础(5)继承与多态

目录 ​编辑 1.前言 2.正文 2.1继承 2.1.1继承概念 2.1.2继承语法 2.1.3子类访问父类 2.1.4super关键字 2.2多态 2.2.1多态概念 2.2.2多态条件 2.2.3重写 2.2.4向上转型与向下转型 2.2.5为什么要使用多态 3.小结 1.前言 哈喽大家好啊,今天继续来为大…