shims-vue.d.ts

`shims-vue.d.ts` 是一个 TypeScript 类型定义文件，用于在 Vue.js 项目中使用 TypeScript。它提供了一个全局模块，用于声明 Vue.js 组件的类型。通常情况下，你不需要自己编写 `shims-vue.d.ts` 文件，因为 Vue.js 官方已经提供了一份完整的定义文件。

在 TypeScript 中使用 Vue.js，你需要在项目根目录下创建一个名为 `shims-vue.d.ts` 的文件，并在其中声明 Vue.js 组件的类型。例如，以下是一个简单的 `shims-vue.d.ts` 文件：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

这个文件中，我们使用 `declare module` 语法声明了一个模块，其名称为 `"*.vue"`。这意味着当 TypeScript 编译器遇到以 `.vue` 结尾的文件时，它将使用此模块来解析该文件。

在模块中，我们导入了 `vue` 模块，并将其命名为 `Vue`。然后，我们通过 `export default` 将 `Vue` 导出为默认模块。这意味着当你在 TypeScript 中导入一个 `.vue` 文件时，你将得到一个 `Vue` 类型的默认导出。

这是一个最基本的 `shims-vue.d.ts` 文件，你可以根据需要进行修改和扩展。

相关问题

vue是怎么识别shims-vue.d.ts

在Vue项目中，TypeScript需要一个声明文件来识别.vue文件中的组件，而shims-vue.d.ts就是这样一个声明文件。默认情况下，TypeScript并不会自动识别这个文件，需要在项目中的tsconfig.json文件中进行配置，将shims-vue.d.ts文件添加到"include"数组中，例如：

{
  "compilerOptions": {
    // other options...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue", // 添加这一行
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

这样，在.vue文件中引用组件时，TypeScript就能正确地识别组件类型了。

vue-cli3引入ts

要在Vue-cli 3中使用TypeScript，需要先安装TypeScript和Vue的TypeScript声明文件。

1. 安装TypeScript和Vue TypeScript声明文件：

npm install typescript vue-class-component vue-property-decorator --save-dev
npm install @types/node @types/webpack @types/vue @types/vue-router @types/vuex --save-dev

2. 在项目根目录下创建一个`tsconfig.json`文件，用于配置TypeScript编译器的选项：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

这里的配置项可以根据你的需求进行调整。

3. 修改项目的入口文件`main.js`，将其改为`main.ts`，并且使用`Vue.extend`来定义Vue组件：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 在`src`目录下创建一个`shims-tsx.d.ts`文件，用于声明Vue组件的类型：

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends Vue.VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

5. 在`src`目录下创建一个`shims-vue.d.ts`文件，用于声明Vue组件的类型：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

6. 修改`package.json`文件，将`main.js`改为`main.ts`：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/node": "^10.12.18",
    "@types/vue": "^2.0.8",
    "@types/vue-router": "^3.0.2",
    "@types/vuex": "^3.0.0",
    "typescript": "^3.3.3333",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^7.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "main": "src/main.ts",
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

7. 运行`npm run serve`命令来启动开发服务器，开始使用TypeScript进行Vue开发。