vscode写typescript之必装插件

Posted 2023-05-15

参考技术A 1、Live Server：修改html内容，可以使页面不刷新的情况下显示更改

2、TypeScript Auto Compiler：strl+s保存当前编写的ts，即可生成对应的js文件（再对应的js文件里生效）

VSCode 和 Vue 2 插件 TypeScript 定义

【中文标题】VSCode 和 Vue 2 插件 TypeScript 定义

【英文标题】：VSCode and Vue 2 plugin TypeScript definitions

【发布时间】：2017-06-21 02:13:57

【问题描述】：

我正在使用 VSCode 和 TypeScript 类进行 Vue 2 组件开发。请参阅：vuejs/vue-class-component。

在我当前的项目中，我使用 vue-i18n 之类的插件来翻译标签等。这些插件使用自己的功能扩展了 Vue 组件，例如 this.$t(...) 以按键获得翻译，但 VSCode 不识别/不不关闭这些扩展（或者它们是 mixins？）等等。

我怎样才能知道这些扩展功能存在并且智能感知开始工作的 VSCode？我可以创建自己的 *.d.ts 文件吗？如果是这样，我怎样才能将它们连接起来，以便 VSCode 可以找到它们进行智能感知？欢迎任何例子。或链接到完成此操作的一些示例 Github 存储库？

【问题讨论】：

vue 有 .d.ts 文件，如果你正在寻找它们，你可以在这里找到它们。 npmjs.com/package/@types/vue

我的问题是关于为 Vue 2 插件创建/使用定义文件，这些插件将自定义函数添加到 Vue 类。我知道 Vue 本身有 *.d.ts 文件，但这些文件工作正常。

您可以根据需要扩展这些类型。 Typescript 接口是开放式的，如果您向它们添加更多方法，它们应该被编译器拾取。

我遇到了同样的问题，并决定尝试添加类型 vue-i18n 存储库。正在进行的工作分支位于github.com/aom/vue-i18n/tree/typescript-support

我还在 vue-i18n 存储库中打开了一个问题：github.com/kazupon/vue-i18n/issues/130

【参考方案1】：

此问题现已解决，并记录在 Vue TypeScript 文档中。它叫做"Augmenting Types for Use with Plugins"。

以下sn-p来自此页面以供快速参考：

// For example, to declare an instance property $myProperty with type string:

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' 
  // 3. Declare augmentation for Vue
  interface Vue 
    $myProperty: string
  

【参考方案2】：

vue-i18n 不提供自己的 TypeScript 类型。

相反，您可以使用DefinitelyTyped:

npm i -D @types/vue-i18n 或 yarn add -D @types/vue-i18n

【讨论】：

您好，欢迎您！通过添加更多详细信息并解释这些命令的实际作用以及它们回答问题的原因，您可以显着提高您的回答质量。