草庐IT

Vite中如何更好的使用TS

前端开发小司机 2023-10-30 原文

TS 是JS的一个类型检查工具，检查我们代码中可能会存在的一些隐形问题；同时可以使我们的编译器具备一些语法提示功能。

如果我们使用create-vue（vue3官方脚手架工具）创建了项目，该项目基于 Vite 且 TypeScript 已经准备就绪，可以直接进行TS开发。

本篇文章，我们讨论的是，任意一个安装项目中（不使用脚手架），对TS的支持情况。

Vite对TS是天生支持的

我们创建并初始化一个项目（yarn init -y），安装vite（yarn add Vite -D）。

然后，创建一下入口文件index.html， 并引入我们自定义的main.ts文件

<script src="./main.ts" type="module"></script>

main.ts文件

let tip:string = "这是一个vite项目，使用了ts语法"
console.log('tip: ', tip);

我们在终端使用vite命令启动项目，可以看到控制台输出了我们打印的内容。

在这个demo中，我们只给普通的项目安装了vite，没有安装任何ts相关的插件。

由此看见，vite已经在内部处理了对ts的支持，我们是可以直接使用的。

使用插件强化我们的能力

在一个单纯的vite项目中，vite默认是不会提示ts语法错误并阻断其编译的。

注：我们讨论的是没有使用任何脚手架的情况！

比如，我们在main.ts中将字符类型的tip赋值为数字

let tip:string = "这是一个vite项目，使用了ts语法"
tip = 2
console.log('tip: ', tip);

这样的TS语法是有问题的，但是它依旧会编译成功。

为了严格要求自己，提升代码水平，我们应该让错误输出在控制台阻止编译，强迫我们解决问题。

这一功能可以通过vite-plugin-checker来实现。

vite-plugin-checker是一个可以在工作线程中运行 TypeScript、 VLS、 vue-tsc、 ESLint的插件，它可以根据配置，阻断编译，在控制台及浏览器展示报错信息。

依赖安装

npm i vite-plugin-checker -D

根目录创建vite.config.js配置文件，并引入vite-plugin-checker

// vite.config.js
import checker from "vite-plugin-checker";
import { defineConfig } from "vite";
export default defineConfig({plugins: [checker({typescript: true,}),],
});

此时直接运行 项目依旧会报错，因为还需要ts的配置文件 tsconfig.json。我们使用命令行生成

npx tsc --init

创建好tsconfig.json配置文件后，重新vite服务，会发现TS的语法报错已经被输出了

控制台輸出

浏览器输出

现在，我们只要编写出有问题的TS，vite就会报错，让我们及时发现问题并处理！真香（作死）啊！

打包前进行TS检查

Vite 仅执行 .ts 文件的转译工作，并 不 执行任何类型检查。这意味着，即使我们项目内有Ts的语法错误，打包也是可以正常进行的。

作为一个优秀的开发，我们怎么能允许这样的情况存在呢？

我们可以使用以下语法，在打包时进行代码检查：

  • 在构建脚本中运行 tsc --noEmit
  • 对于.vue文件，可以安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查

我们在package.json中配下进行验证：

// package.json"scripts": {"dev": "vite",// 如果ts检查不通过，vite build就不会执行"build": "tsc --noEmit && vite build",},

然后执行npm run build执行打包命令

果然，此时编译被阻断了。

tsc --noEmit的执行原理

这是ts的内置语法，和vite其实没有关系。执行tsc --noEmit时，TSC 会读取配置文件获取参数值，–noEmit的作用是只进行检查，不进行编译输出。如果我们的代码无错，会直接退出，否则报错。

TypeScript 的智能提示

对于环境变量的知识，可以参考juejin.cn/post/717201…

默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。但是一些自定义的 .env[mode] 文件是木有 TypeScript 智能提示的。

要想做到这一点，我们可以在 src 目录下创建一个 env.d.ts 文件，接着按下面的方式增加定义即可：

/// <reference types="vite/client" />

interface ImportMetaEnv {// 自定义内容...readonly VITE_APP_TITLE: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}

interface ImportMeta {readonly env: ImportMetaEnv
}

注：必须安装模板来写，这个方法是针对所有项目的，脚手架类的项目也一样

示例：

main.ts中测试

如图，可以看到我们的智能提示已经生效了。

这里在vscode中遇到了一个报错，这只是ts的报错，和我们变量的设置是无关的。

报错问题也很简单，ts现在认为我们的项目是基于commonjs的，所以不存在import.meta属性。

我们将module的值改为“es2022”即可。

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。



有需要的小伙伴，可以点击下方卡片领取，无偿分享

Vite中xff0cxffxff0vue.jsjavascripttypescript

有关Vite中如何更好的使用TS的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐