第二章 搭建TS环境

搭建 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.mfbz.cn/a/27581.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《横向联邦学习中 PCA差分隐私数据发布算法》论文算法原理笔记

论文地址&#xff1a;https://www.arocmag.com/article/01-2022-01-041.html 论文摘要 为了让不同组织在保护本地敏感数据和降维后发布数据隐私的前提下&#xff0c;联合使用 PCA进行降维和数据发布&#xff0c;提出横向联邦 PCA差分隐私数据发布算法。引入随机种子联合协商方…

linuxOPS基础_linux软件包安装

软件包概述 上图是windows下的软件包 Linux下也有很多可以安装的软件&#xff0c;而这些软件的安装包可细分为两种&#xff0c;分别是源码包和二进制包。 Linux下软件的安装方式 ① RPM软件包安装 > 软件名称.rpm ② YUM包管理工具 > yum install 软件名称 -y ③ 源码…

基于QGIS的长株潭城市群边界范围融合实战

背景 在面向区域的研究过程中&#xff0c;比如一些研究区域&#xff0c;如果是具体的行政区划&#xff0c;比如具体的某省或者某市或者县&#xff0c;可以直接从国家官方的地理数据中直接下载就可以。但如果并没有直接的空间数据那怎么办呢&#xff1f;比如之前遇到的一个场景&…

【郭东白架构课 模块二:创造价值】31 |节点六: 如何组织阶段性的价值交付?

你好&#xff0c;我是郭东白。上节课我们讲了为什么要做阶段性的价值交付&#xff0c;以及进入阶段性价值交付环节的准备工作。有了这些学习基础&#xff0c;这节课我们就可以进行阶段性价值交付了。 在交付的过程中&#xff0c;主要有三部分工作&#xff1a;目标分解、定义交…

数据结构——堆(C语言实现)

文章目录 什么是堆堆的实现堆的结构定义堆的初始化接口堆的销毁接口堆的插入数据接口向上调整建堆接口判断堆是否为空堆的删除数据接口向下调整建堆接口获取堆顶数据获取堆的有效数据个数完整实现代码小结 堆排序堆排序的实现 关于建堆和堆排序时间复杂度的分析向下调整建堆向上…

day52|动态规划13-子序列问题

子序列系列问题 300.最长递增子序列 什么是递增子序列&#xff1a; 元素之间可以不连续&#xff0c;但是需要保证他们所在位置是元素在数组中的原始位置。 dp数组dp[i]表示以nums[i]为结尾的最长递增子序列的长度。递归函数&#xff1a;dp[i] max(dp[j]1,dp[j])初始化条件&…

算法刷题-链表-移除链表元素

链表操作中&#xff0c;可以使用原链表来直接进行删除操作&#xff0c;也可以设置一个虚拟头结点再进行删除操作&#xff0c;接下来看一看哪种方式更方便。 203.移除链表元素 力扣题目链接 题意&#xff1a;删除链表中等于给定值 val 的所有节点。 示例 1&#xff1a; 输入&…

Linux下信号量使用总结

目录 1.Linux下信号量简介 2.POSIX信号量 2.1 无名信号量 2.2 有名信号量 3.System V信号量 1.Linux下信号量简介 信号量是解决进程之间的同步与互斥的IPC机制&#xff0c;互斥与同步关系存在的症结在于临界资源。 临界资源是在同一个时刻只容许有限个&#xff08;一般只有…

【数据结构与算法】03 队列(顺序队列--循环队列--优先级队列--链队列)

一、概念1.1 队列的基本概念1.2 队列的顺序存储结构1.21 顺序队列&#xff08;静态队列&#xff09;1.22 循环队列1.23 优先级队列 1.3 队列的链式存储结构 二、C语言实现2.1 顺序存储2.11 顺序队列2.12 循环队列2.13 优先级队列 2.2 链式存储 一、概念 1.1 队列的基本概念 队…

Linux内核中断和Linux内核定时器

目录 Linux内核中断 Linux内核定时器 Linux内核中断 int request_irq(unsigned int irq, irq_handler_t handler, unsigned long flags,const char *name, void *dev) 功能&#xff1a;注册中断 参数&#xff1a; irq : 软中断号 gpio的软中断号 软中断号 gpio_to_i…

【PCB专题】案例:绕等长怎么直接以颜色区分看出是否绕好

PCB上对于时序的处理,在板卡上实际我们是通过绕等长的手段。做为一个合格的Layout工程师,等长的处理是不可或缺的技能。 一般来说,在绕等长的时候我们可以使用Delay Tune命令来改变走线的长度,然后通过规则管理器中分析看看哪根线长哪根线短。 但是在实际工作中,很可能绕着…

Android应用程序进程的启动过程

Android应用程序进程的启动过程 导语 到这篇文章为止&#xff0c;我们已经简要地了解过了Android系统的启动流程了&#xff0c;其中比较重要的内容有Zygote进程的启动和SystemService以及Launcher的启动&#xff0c;接下来我们将要学习的是Android应用程序的启动过程&#xff…

华为OD机试真题 JavaScript 实现【最多几个直角三角形】【2023Q1 100分】

一、题目描述 有 N 条线段&#xff0c;长度分别为 a[1]-a[n]。 现要求你计算这 N 条线段最多可以组合成几个直角三角形&#xff0c;每条线段只能使用一次&#xff0c;每个三角形包含三条线段。 二、输入描述 第一行输入一个正整数 T (1< T< 100) &#xff0c;表示有…

2023蓝桥杯大学A组C++决赛游记+个人题解

Day0 发烧了一晚上没睡着&#xff0c;感觉鼻子被打火机烧烤一样难受&#xff0c;心情烦躁 早上6点起来吃了个早饭&#xff0c;思考能力完全丧失了&#xff0c;开始看此花亭奇谭 看了六集&#xff0c;准备复习数据结构考试&#xff0c;然后秒睡 一睁眼就是下午2点了 挂了个…

springboot项目外卖管理 day05-新增与删除套餐

文章目录 一、新增菜品1.1、需求分析1.2、数据模型setmealsetmeal_dish 1.3、代码开发-梳理交互过程1.3.1、下拉框展示1.3.2、菜品窗口展示1.3.3、新增套餐 2、套餐分页查询 一、新增菜品 1.1、需求分析 套餐就是菜品的集合。 后台系统中可以管理套餐信息&#xff0c;通过新…

一文打通:从字节码指令的角度解读前置后置自增自减(加加++减减--)

文章目录 1.前置了解的知识1.1 栈这种数据结构1.2 局部变量表和操作数栈1.3 三个字节码指令 2.单独使用后置与前置2.1 后置字节码指令2.2 前置字节码指令2.3 总结 3.需要返回值的情况下使用后置与前置3.1 后置字节码指令3.2 前置字节码指令3.3 总结3.4 练习&#x1f340; 练习一…

了解ASEMI代理英飞凌TLE6208-6G其功能和应用的综合指南

编辑-Z TLE6208-6G是一款高度集成、通用且高效的汽车半桥驱动器&#xff0c;由英飞凌设计。这种功能强大的设备专门设计用于满足汽车应用的苛刻要求&#xff0c;如控制直流电机、螺线管和电阻负载。在本文中&#xff0c;我们将深入研究TLE6208-6G的功能、优点和应用&#xff0…

实现表白墙

我们已经学习了Http以及Servlet类的相关知识 今天我们来实操一下,实现一个简单的既有前端又有后端的网站–表白墙 之前在学习前端的时候已经写过了表白墙的前端代码,存在两个问题 1.页面重启,数据丢失 2.数据只是在本地的,别人看不见 那么这样的问题我们要咋样解决呢? 引入…

(七)CSharp-CSharp图解教程版-事件

一、发布者和订阅者 发布者/订阅者模式&#xff08;publish/subscriber pattern&#xff09;&#xff1a; 很多程序都有一个共同的需求&#xff0c;即当一个特定的程序事件发生时&#xff0c;程序的其他部分可以得到该事件已经发生的通知。 发布者&#xff1a; 发布者类定义…

Excel函数VLOOKUP常用方法

一、基础用法 1、精确匹配 公式&#xff1a;VLOOKUP(待匹配值&#xff0c;查找范围&#xff0c;范围列数&#xff0c;查找方式) 定义好要输出表的表头和第一列&#xff0c;第一列即为要查找和匹配的父内容&#xff0c;在第二列输入公式&#xff0c;被查找表中一定也要将待查…