首页 > 解决方案 > 使 vue-resource 与打字稿一起工作

问题描述

我似乎对 typescript 设置有疑问,因为它看不到vue-resource. 我想我设法创建了这个问题的一个小例子,不幸的是我不知道下一步该做什么。

我有:

tsconfig.json

    {
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./built/",
    "declaration": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [ "es2017", "dom" ]
  },
  "include": [
    "./ViewModels/**/*"
  ],
  "exclude": [
    "node_modules"
  ] 
}

./ViewModels/vue-shims.d.ts

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

./ViewModels/Home/main.ts

import Vue from 'vue';
//const Vue = require('vue');

import VueResource from 'vue-resource'
Vue.use(<any>VueResource);

const v = new Vue(<any>{
    el: '#app',
    data: {
    },
    components: {
    }
});

//var vm = new Vue();
//console.log(vm.$http);

./ViewModels/Home/Components/ProjectSelection/projectSelectionScripts.ts

import Vue from "vue";
import Component from 'vue-class-component';


const NewGroupItemName = "Create new group (drag project here)";


@Component({})
class ProjectSelectionComponent extends Vue {      
    created() {
        this.$http.get("url").then(response => {} => {

            });

    }
}

export default ProjectSelectionComponent

这是我试图修复的一个巨大项目的一部分。它可能不应该工作,但它应该编译。但它没有:

ViewModels/Home/Components/ProjectSelection/projectSelectionScripts.ts:15:14 - error TS2339: Property '$http' does not exist on type 'ProjectSelectionComponent'.

15         this.$http.get("url").then(response => {
                ~~~~~

我的.\node_modules有: @types\node@types\vue-resource还有很多其他的东西。

package.json原来的大项目:

{
  "version": "1.0.0",
  "name": "BigProject",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "@types/vue-resource": "^0.9.34",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.9.1",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "@bosket/core": "^0.4.2",
    "@bosket/tools": "^0.4.2",
    "@bosket/vue": "^0.4.2",
    "@types/jspdf": "^1.1.31",
    "@types/plotly.js": "^1.35.0",
    "bootstrap": "^4.0.0",
    "bootstrap-notify": "^3.1.3",
    "bootstrap-vue": "^2.0.0-rc.1",
    "jquery": "^3.3.1",
    "lodash": "^4.17.4",
    "moment": "^2.21.0",
    "plotly.js": "^1.36.1",
    "popper": "^1.0.1",
    "popper.js": "^1.12.9",
    "vee-validate": "^2.0.4",
    "vue": "^2.5.13",
    "vue-class-component": "^6.2.0",
    "vue-cookie": "^1.1.4",
    "vue-cookie-law": "^1.5.0",
    "vue-property-decorator": "^6.0.0",
    "vue-resource": "^1.3.5",
    "vue-router": "^3.0.0",
    "vue-spinner": "^1.0.3",
    "vuedraggable": "^2.16.0",
    "vuelidate": "^0.6.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
} 

关于这里可能出现什么问题的任何提示?

标签: typescriptvue.js

解决方案


推荐阅读