第二章 搭建TS环境

news2024/11/25 7:00:15

搭建 TypeScript 的开发环境。一个舒适、便捷且顺手的开发环境,不仅能大大提高学习效率,也会对我们日常的开发工作有很大帮助。

这一节我们就来介绍 VS Code 下的 TypeScript 环境搭建:插件以及配置项。对于 TS 文件的执行,我们会介绍 ts-nodets-node-dev 等工具,帮助你快速验证 TS 代码的执行结果。而如果你只想快速开始学习,我们也会介绍 TypeScript 官方提供的 TypeScript Playground,利用它你可以快速开始编写及分享 TS 代码。最后,我们还会介绍如何通过 TS 声明的方式来检查类型兼容性。


VS Code搭配插件

1-TypeScript Importer

TypeScript Importer是一个用于导入 TypeScript 模块的工具。它可以让开发者在使用 TypeScript 编写代码时,更加轻松地引入和使用其他模块的代码。

TypeScript Importer 可以通过指定模块的路径和文件名,将 TypeScript 代码导入到 JavaScript 代码中。这样可以让开发者在使用 TypeScript 编写代码时,更加方便地与 JavaScript 代码进行交互和协作。

在这里插入图片描述


2-Move TS

这一插件在重构以及像我们这样写 demo的场景下很有帮助。它可以让你通过编辑文件的路径,直接修改项目的目录结构。比如从home/project/learn-interface.ts 修改成 home/project/interface-notes/interface-extend.ts,这个插件会自动帮你把文件目录更改到对应的样子,并且更新其他文件中对这一文件的导入语句。

在这里插入图片描述


3-Error Lens

Error Lens 是一个用于查看和分析 JavaScript 错误信息的工具。它可以在开发者编写和运行 JavaScript 代码时,提供错误信息的实时反馈和分析,从而帮助开发者快速定位和解决错误。

在这里插入图片描述

这一插件能够把你的 VS Code 底部问题栏的错误下直接显示到代码文件中的对应位置,比如这样:

在这里插入图片描述


TS演练场:无需搭建环境,可直接运行TS代码

如果你只是想拥有一个简单的环境,能写 TypeScript,能检查错误,能快速地调整 tsconfig,那官方提供的 Playground 一定能满足你的需求。

在这里插入图片描述

TypeScript Playground是一个在线的 TypeScript 代码编辑器,它提供了一个简单易用的 TypeScript 编辑环境,可以帮助开发者快速编写和运行 TypeScript 代码。 TypeScript Playground的作用包括:

  1. 提供了一个简单易用的 TypeScript 编辑环境,让开发者可以快速编写和运行 TypeScript 代码。
  2. 支持 TypeScript 的各种功能和特性,如类型注释、接口类型、类型继承等。
  3. 提供了一些常用的 TypeScript 代码示例和演示,帮助开发者快速上手 TypeScript
  4. 可以与其他 TypeScript 工具和 IDE 集成,如 VS CodeWebStorm 等。
  5. 可以将 TypeScript Playground 部署到服务器上,让多个开发者共同使用和编辑代码。

总之,TypeScript Playground是一个非常有用的 TypeScript 工具,可以帮助开发者更快速、高效地编写和运行 TypeScript 代码。

TypeScript Playground入口地址:https://www.typescriptlang.org/zh/play


TS快速执行验证代码逻辑:ts-node和ts-node-dev

如果你主要是想执行 TypeScript 文件,就像 node index.js 这样快速地验证代码逻辑,这个时候你就需要 ts-node 以及 ts-node-dev 这一类工具了。它们能直接执行 ts 文件,并且支持监听文件重新执行。同时,它们也支持跳过类型检查这一步骤来获得更快的执行体验。

对于 ts-node,你可以将其安装到项目本地或直接全局安装。

npm i ts-node typescript -g

在项目中执行以下命令创建 TypeScript 的项目配置文件: tsconfig.json

npx --package typescript tsc --init
// 如果全局安装了 TypeScript,可以这么做
tsc --init

创建一个TS文件:index.ts

console.log("Hello TS")

使用ts-node执行TS文件,在控制台可以查看输出结果:

ts-node index.ts
// 输出以下结果
Hello TS

关于ts-node的使用,我们可以查看帮助命令,来进一步使用它的功能

ts-node -h

详情点击查看ts-node官网

这里我们主要介绍通过命令行进行常用配置的方式。

  • -P,--project:指定你的 tsconfig 文件位置。默认情况下 ts-node 会查找项目下的 tsconfig.json 文件,如果你的配置文件是 tsconfig.script.jsontsconfig.base.json 这种,就需要使用这一参数来进行配置了。
  • -T, --transpileOnly:禁用掉执行过程中的类型检查过程,这能让你的文件执行速度更快,且不会被类型报错卡住。这一选项的实质是使用了 TypeScript Compiler API 中的 transpileModule 方法,我们会在后面的章节详细讲解。
  • --swc:在 transpileOnly 的基础上,还会使用 swc 来进行文件的编译,进一步提升执行速度。
  • --emit:如果你不仅是想要执行,还想顺便查看下产物,可以使用这一选项来把编译产物输出到 .ts-node 文件夹下(需要同时与 --compilerHost 选项一同使用)。

ts-node 本身并不支持自动地监听文件变更然后重新执行,而这一能力又是某些项目场景下的刚需,如 NodeJs API 的开发。因此,我们需要 ts-node-dev 库来实现这一能力。ts-node-dev 基于 node-dev(你可以理解一个类似 nodemon 的库,提供监听文件重新执行的能力) 与 ts-node 实现,并在重启文件进程时共享同一个 TS 编译进程,避免了每次重启时需要重新实例化编译进程等操作。

全局安装:

npm i ts-node-dev -g

ts-node-dev 在全局提供了 tsnd 这一简写,你可以运行 tsnd 来检查安装情况。最常见的使用命令是这样的:

ts-node-dev --respawn --transpile-only app.ts

respawn 选项启用了监听重启的能力,而 transpileOnly 提供了更快的编译速度。你可以查看官方仓库来了解更多选项,但在大部分场景中以上这个命令已经足够了。

更方便的类型兼容性检查

某些时候,我们在进行类型比较时,需要使用一个具有具体类型的变量与一个类型进行赋值操作,比如下面这个例子中:

interface Foo {
  name: string;
  age: number;
}

interface Bar {
  name: string;
  job: string;
}

let foo:Foo = {
  name: '李华',
  age: 18
}

let bar:Bar = {
  name: '韩梅梅',
  job: 'student'
}

foo = bar;

在“只是想要进行类型比较”的前提下,其实并没有必要真的去声明两个变量,即涉及了值空间的操作。我们完全可以只在类型空间中(你可以理解为用于存放 TypeScript 类型信息的内存空间)比较这些类型,只需要使用 declare 关键字:

interface Foo {
  name: string;
  age: number;
}

interface Bar {
  name: string;
  job: string;
}

declare let foo: Foo;
declare let bar: Bar;

foo = bar;

你可以理解为在开始时的例子,我们使用一个值空间存放这个变量具体的属性,一个类型空间存放这个变量的类型。而通过 declare 关键字,我们声明了一个仅在类型空间存在的变量,它在运行时完全不存在,这样就避免了略显繁琐的属性声明。

对于类型兼容的检查,除了两两声明然后进行赋值以外,我们还可以通过工具类型的形式,如 tsd 这个 npm 包提供的一系列工具类型,能帮助你进行声明式的类型检查。

安装依赖包:

npm i tsd

引入使用:

import { expectType } from 'tsd';

expectType<string>("hello"); // √
expectType<string>(666); // ×

它的结构大致是这样:expectType<你预期的类型>(表达式或变量等),除了 expectType(检查预期类型与表达式或变量的类型是否一致),tsd 还提供了 expectNotType(检查预期类型与表达式或变量的类型是否不同)、expectAssignable(检查表达式或变量的类型是否能赋值给预期类型)等工具类型。

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

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

相关文章

设计模式(十):结构型之外观模式

设计模式系列文章 设计模式(一)&#xff1a;创建型之单例模式 设计模式(二、三)&#xff1a;创建型之工厂方法和抽象工厂模式 设计模式(四)&#xff1a;创建型之原型模式 设计模式(五)&#xff1a;创建型之建造者模式 设计模式(六)&#xff1a;结构型之代理模式 设计模式…

备战2月面试8家大厂,成功上岸字节(Java岗)定级T2-2,分享一下我的面试心得

最近在公众号上看到一位道友的字节面经&#xff0c;可以说是深有感触了&#xff01; 他的背景是杭州某中厂的Java后端开发&#xff0c;本科毕业5年&#xff0c;最近2个月面试了PDD、小红书、字节等多个大厂。几乎都拿到了Offer&#xff0c;最终选择了字节2-2。以下是他的一些分…

Navicat对postgresql导入导出的坑

Navicat导出postgresql中的表&#xff0c;再新建数据库导入时通常会报错&#xff0c;往往是因为自增id导致的 可以看到&#xff0c;再次导入时会报错&#xff01; 解决办法如下&#xff1a; 解决办法&#xff1a; 重新导入&#xff0c;并执行以下命令&#xff1a;&#xff08…

Python从入门到精通_第0讲_Python的学习路线整理

写在最前&#xff1a; 为什么开这个专栏&#xff1a; 之前我做过一个专栏&#xff0c;专门介绍Python爬虫技术&#xff0c;这一专栏收获了很多朋友们的点赞收藏和关注。但是在爬虫技术专栏中&#xff0c;对于Python语言本身的讲解并不是很细致&#xff0c;由于Python在爬虫、数…

Unity 安装 wwise

先下载 https://www.audiokinetic.com/zh/download 安装的时候要选sdk 就是20g的那个 然后运行 选择unity 可以看到这个界面 好&#xff0c;现在开始要安装离线包 直接项目里点 第二个 装好后 他会提示你 无法找到unity安装的地址 1 打开你的 unity 编辑器 2 在unity安装的…

CorelDRAW矢量绘图2023中文版下载

市面上的矢量绘图工具虽然很多&#xff0c;但权威又专业的却不多&#xff0c;选到不好用的工具&#xff0c;会极大的影响自己创作&#xff0c;CorelDRAW简称cdr&#xff0c;是一款功能强大的矢量图制作软件&#xff0c;一说到矢量图制作&#xff0c;大家都会不由自主地想到cdr。…

车牌识别之UI(Tkinter + OpenCV显示Picture和Video)

画一张总图&#xff1a; 图形界面开发 本篇只介绍图形界面开发。 遇到的第一个问题就是选择什么开发语言和技术。因为我之前用Python做过Tkinter的小东西&#xff0c;所以这次还是用Python Tkinter OpenCV来搞吧。 这里面需要注意几个地方&#xff1a; 1. Tkinter 的布局 …

ADManager Plus:提升企业人员管理效率的全能工具

导言&#xff1a; 在现代企业中&#xff0c;高效的人员管理是取得成功的关键。随着企业规模的扩大和人员数量的增加&#xff0c;传统的人工管理方法已经无法满足快速变化的需求。ADManager Plus作为一款全能的人员管理工具&#xff0c;通过自动化和集成的方式&#xff0c;为企…

一文即可了解!自动化回归测试工具

目录 前言&#xff1a; 设计背景&#xff1a; 解决方案&#xff1a; 测试工具使用loadrunner脚本编写&#xff0c;这样的好处是 控制指令说明&#xff1a; 自定义检查方法说明&#xff1a; 变量说明&#xff1a; 附加动作说明&#xff1a; 前言&#xff1a; 自动化回归测试工…

Numpy---ndarray矩阵运算、广播机制、排序、文件操作

1. 矩阵运算 n 10 # 加 n - 10 # 减 n * 10 # 乘 n / 10 # 除 n // 2 # 整除 n ** 2 # 次方 n % 2 # 余数 n1 np.random.randint(0, 10, size(4, 5)) n2 np.random.randint(0, 10, size(4, 5)) display(n1, n2) array([[3, 6, 1, 9, 9],[8, 9, 2, 0, 4],[4, 8, 5, …

17 条件随机场

文章目录 17 条件随机场——CRF&#xff08;Condition Random Field&#xff09;17.1 背景介绍17.2 HMM与MEMM的区别17.3 MEMM与CRF的区别17.4 CRF模型17.4.1 CRF的概率密度函数17.4.2 CRF概率密度函数简化&#xff08;向量形式&#xff09; 17.5 CRF需要解决的问题17.6 边缘概…

基于 AIGC,RocketMQ 学习社区探索开源软件学习新范式

作者&#xff1a;寒斜 AIGC 持续火爆全球&#xff0c;越来越多的场景开始接入并体现非凡的价值。其中应用广泛的场景之一就是智能知识问答&#xff0c;它改变了人们学习的方式&#xff0c;从阅读式到问答式&#xff0c;让知识的获取更加精准有效。开源软件拥有着广泛的求知群体…

ITSM 如何帮助制造业企业

ITSM在现代制造业中的作用 在过去的几年中&#xff0c;制造业已经看到了快速的数字化&#xff0c;以智能制造技术改进生产技术。在工业4.0和工业5.0的推动下&#xff0c;制造商正在摆脱陈旧 以及利用物联网、人工智能、机器学习和大数据等先进技术的互联智能制造系统&#xff…

【Protobuf速成指南】Any类型的使用

文章目录 2.2 Any类型的使用一、基本认识二、使用需知三、Any字段的使用①修改proto文件② Any相关函数③ 类型转换 四、Contact 2.2 改写 2.2 Any类型的使用 本系列文章将通过对通讯录项目的不断完善&#xff0c;带大家由浅入深的学习Protobuf的使用。这是Contacts的2.2版本&a…

基于脑电功率的疲劳驾驶检测研究_kaic

基于脑电功率的疲劳驾驶检测研究 摘 要 在道路交通安全领域&#xff0c;疲劳驾驶是一种常见的交通安全隐患。现有数据统计&#xff0c;全球每年有大约&#xff12;&#xff11;&#xff05;的重大交通事故与疲劳驾驶有关&#xff0c;疲劳驾驶成为了诱发交通事故的主要原因之一…

多模态深度学习:定义、示例、应用

人类使用五种感官来体验和解读周围的世界。我们的五种感官从五个不同的来源和五种不同的方式捕捉信息。模态是指某事发生、经历或捕捉的方式。 人脑由可以同时处理多种模式的神经网络组成。想象一下进行对话——您大脑的神经网络处理多模式输入&#xff08;音频、视觉、文本、…

《树莓派4B家庭服务器搭建指南》第十六期:安装Calibre Web建立公网可访问私人电子书库

最近在整理收藏的电子书&#xff0c;以便在公网可以随时访问自己的电子书&#xff0c;然而&#xff0c;Calibre桌面端虽然功能强大&#xff0c;并且可以开启本地http服务&#xff0c;但http的界面还是过于简陋 我发现了一个Calibre Web开源项目&#xff0c;界面也非常舒服&…

STM32F407实现1588v2(ptpd)

硬件&#xff1a; STM32F407ZGT6开发板 软件&#xff1a; VSCode arm-none-eabi-gcc openOCD st-link 在github搜到一个在NUCLEO-F429ZI开发板上移植ptpd的example&#xff0c;因为和F407差别很小&#xff0c;所以就打算用这个demo移植到手头的开发板上。因为目前只需要…

mysql中将字符123转变成1.2.3

具体业务需求&#xff1a;因为需求变更&#xff0c;之前存储数值型字符串&#xff0c;现需要将数值型转变为x.x.x update mpc_mp_package a join (select(selectGROUP_CONCAT(SUBSTRING(mp_ver, number, 1) separator .) as separated_stringfrom(selecti : i 1 as numberfro…

别再等了,这就是ping通上不了网的解决办法

ip能ping通&#xff0c;但是就是无法上网&#xff0c;应该大部分网工都遇到过这种情况吧。 能ping通&#xff0c;说明ip是能够和网络设备通信的&#xff0c;但是上不了网&#xff0c;就要具体问题具体分析了。 今天聊点基础的&#xff0c;ip能ping通但是上不了网&#xff0c;到…