草庐IT

Vite，Vue3项目，添加Jsconfig.Json和类型定义，让你的IDE更智能

前端梁哥 2023-03-29 原文

我们的新项目是基于vite + vue3的，使用的编程语言是JavaScript。我们的团队除了我，对typescript都不熟悉，他们觉得学习typescript有点困难。

众所周知，JS的弱类型机制，使编辑器很难提供更好的智能感知和语法提示。那么，怎么办呢？在过去，我通常单独使用jsdoc。但这次，我想做一个不同的尝试，使用TS类型定义和jsdoc协作。

我们只需在项目根目录创建一个jsconfig.json文件即可，基本配置如下。我们的项目中使用了element-plus组件库，为了提供更好的智能感知，我添加了element-plus的TS类型定义到compilerOptions的types数组。

{
  "compilerOptions": {
    "types": ["element-plus/global"],
    "lib": ["ESNext", "DOM"]
  },
  "exclude": ["node_modules", "dist"]
}

大家不要使用target配置JS语言版本，否则会出现各种各样的问题，会造成智能感知失灵，一定要使用lib配置。我以前踩过这些坑，网上找不到任何解决方案，我通过查看axios的tsconfig.json，寻找到了解决方案。

为了便于管理，我在项目根目录创建了一个typings文件夹，每个模块的类型定义用一个单独的TS文件，使用命名空间来管理，例子如下。

// misc.d.ts文件
declare namespace misc {
  /** 日志查询参数 */
  type LogQueryParams = common.PageParams & {
    operation: string,
    userId: number,
    loggedTime0: string,  
    loggedTime1: string,
    loggedAddr: string
  }

  /** 日志 */
  type Log = {
    id: number,
    args: string,
    loggedAddr: string,
    loggedTime: number,
    method: string,
    operation: string,
    result: string,
    resultOk: boolean,
    userId: number
  }
}

现在，我们在js文件中使用上面的类型定义。我们的一些所有模块公用的类型定义都在common.d.ts文件中编写。

下面的多行注释使用了jsdoc语法，我们也叫它文档注释。vscode，webstorm等IDE都支持jsdoc语法。

/**
 * 获取日志分页
 * @param {misc.LogQueryParams} params
 * @returns {common.PageDataResPromise<misc.Log>}
 */
export const getLogByPage = params => request('/api/misc/op/traces', { params })

当我们将鼠标指针移入函数名时，编辑器给出了智能提示。告诉我们，该函数期望接收一个misc.LogQueryParams类型的参数，返回common.PageDataResPromise<misc.Log>类型的值。

当我们调用该函数，输入参数的时候，编辑器给出了非常智能的提示。这是不是很酷？

童鞋们都学会了吗？

JsconfigVitespanstylecolor开发$前端vite$vue3项目

有关Vite，Vue3项目，添加Jsconfig.Json和类型定义，让你的IDE更智能的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  5. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  6. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  7. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  8. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  9. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  10. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

随机推荐