第二章 搭建TS环境

简介: 第二章 搭建TS环境

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

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

VS Code搭配插件

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

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

image.png

2-Move TS

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

image.png

3-Error Lens

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

image.png

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

image.png

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

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

image.png

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

  1. 提供了一个简单易用的 TypeScript 编辑环境,让开发者可以快速编写和运行 TypeScript 代码。
  2. 支持 TypeScript 的各种功能和特性,如类型注释、接口类型、类型继承等。
  3. 提供了一些常用的 TypeScript 代码示例和演示,帮助开发者快速上手 TypeScript。
  4. 可以与其他 TypeScript 工具和 IDE 集成,如 VS Code、WebStorm 等。
  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官网

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

  1. -P,--project:指定你的 tsconfig 文件位置。默认情况下 ts-node 会查找项目下的 tsconfig.json 文件,如果你的配置文件是 tsconfig.script.json、tsconfig.base.json 这种,就需要使用这一参数来进行配置了。
  2. -T, --transpileOnly:禁用掉执行过程中的类型检查过程,这能让你的文件执行速度更快,且不会被类型报错卡住。这一选项的实质是使用了 TypeScript Compiler API 中的 transpileModule 方法,我们会在后面的章节详细讲解。
  3. --swc:在 transpileOnly 的基础上,还会使用 swc 来进行文件的编译,进一步提升执行速度。
  4. --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(检查表达式或变量的类型是否能赋值给预期类型)等工具类型。


相关文章
|
前端开发 NoSQL MongoDB
一款基于Nodejs+express+mongodb的内容管理系统
一款基于Nodejs+express+mongodb的内容管理系统
340 0
|
开发框架 前端开发 JavaScript
分享53个ASP.NET源码总有一个是你想要的
分享53个ASP.NET源码总有一个是你想要的
243 0
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
2478 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
10月前
|
机器学习/深度学习 运维 Kubernetes
解锁工作流自动化的力量:Argo Workflows
在现代软件开发和数据处理环境中,高效的工作流编排和自动化已成为关键需求。Argo Workflows 是一个领先的 Kubernetes 原生工作流引擎,专为处理复杂工作流而设计。它帮助企业实现自动化、缩短交付周期,并显著提高生产效率。计算巢已提供Argo Workflows 社区版服务。
解锁工作流自动化的力量:Argo Workflows
|
算法 UED 开发者
🚀短链(Short Link):发展动态与工具推荐🚀
短链是将冗长的URL通过特定算法压缩成简短的字符串,便于用户在社交媒体和营销活动中分享。短链不仅美化了链接,还提升了用户体验,并具有易于传播和跟踪分析的优势。本文介绍了短链的作用、发展历程,以及在goo.gl退出后,推荐的替代工具如Dub.co,帮助用户继续享受短链带来的便利与营销价值。
1390 1
🚀短链(Short Link):发展动态与工具推荐🚀
|
Go 开发者
Golang 中的异常处理机制详解
【8月更文挑战第31天】
282 0
|
机器学习/深度学习 人工智能 数据挖掘
【AI 现况分析】AI大模型在欺诈检测中具体的应用
【1月更文挑战第26天】【AI 现况分析】AI大模型在欺诈检测中具体的应用
|
存储 JSON 安全
网络原理 - HTTP / HTTPS(2)——http请求
网络原理 - HTTP / HTTPS(2)——http请求
442 2
|
Java 开发工具 Maven
java解析apk获取应用信息
请注意,你需要替换"path/to/your/apkfile.apk"为你的APK文件的实际路径。
578 0
|
前端开发 中间件 索引
【源码共读】洋葱模型 koa-compose
【源码共读】洋葱模型 koa-compose
250 0