我正在嘗試將我的 Vue 3 單頁組件腳本轉換為使用 TypeScript。
當我創建一個Test.vue看起來像這樣的全新組件時，我的 Visual Studio Code 編輯器沒有出現 TypeScript 錯誤：
<script lang="ts">
import { defineComponent, inject, ref } from "vue";
export default defineComponent({
//Some code here
});
</script>
這是預期的，因為我的代碼符合Vue 3 TypeScipt 檔案。
但是，當我在我的其他現有的轉換ExternalApi.vue組件，同樣的事情，我所看到的錯誤defineComponent，inject以及ref：
Module '"vue"' has no exported member 'XXXX'. Did you mean to use 'import XXXX from "vue"' instead?
那么為什么一個全新的Test.vue組件可以作業，而編輯過的ExternalApi.vue組件卻不能呢？
這是ExternalApi.vue我嘗試轉換為 TypeScript的完整組件：
<template>
<div>
<div class="mb-5">
<h1>External API</h1>
<p>
Call Fauna.
</p>
<button class="btn btn-primary m-5" @click.prevent="callApi">
Call API
</button>
<label for="product-name">Product Name:</label>
<input
type="text"
v-model="productValue"
id="product-name"
name="product-name"
/><br /><br />
<button class="btn btn-primary m-5" @click.prevent="createProduct">
Create Product
</button>
</div>
<div class="result-block-container">
<div :class="['result-block', executed ? 'show' : '']">
<h6 class="muted">Result</h6>
{{ JSON.stringify(apiMessage, null, 2) }}
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, inject, ref } from "vue";
import { query as q, Client } from "faunadb";
export default defineComponent({
name: "Api",
setup() {
let productValue = ref("");
let apiMessage = ref(null);
let executed = ref(false);
const auth = inject("Auth");
const callApi = async () => {
const accessToken = await auth.getTokenSilently();
try {
const client = new Client({
secret: accessToken,
domain: "db.us.fauna.com",
port: 443,
scheme: "https",
});
const { Paginate, Documents, Collection } = q;
const data = await client.query(
Paginate(Documents(Collection("products")))
);
console.log(accessToken);
console.log(data);
apiMessage.value = data;
executed.value = true;
} catch (e) {
console.log(e);
apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
}
};
const createProduct = async () => {
const accessToken = await auth.getTokenSilently();
try {
const client = new Client({
secret: accessToken,
domain: "db.us.fauna.com",
port: 443,
scheme: "https",
});
const { Create, Collection, CurrentIdentity } = q;
const data = await client.query(
Create(Collection("products"), {
data: {
name: productValue.value,
owner: CurrentIdentity(),
},
})
);
console.log("productValue data", data);
} catch (e) {
console.log(e);
apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
}
};
return {
callApi,
createProduct,
apiMessage,
executed,
productValue,
};
},
});
</script>
最重要的是，通過在編譯時npm run serve端子會因兩者同樣的錯誤Test.vue和ExternalApi.vue。
But it should not be showing errors at all because both of them conform to the Vue docs.
So what is going on here?
UPDATE:
This is what my shims-vue.d.ts file contains. I'm not actually sure what this file does, but it was in the cloned repo:
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
And this is my package.json file:
{
"name": "replicator",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build"
},
"dependencies": {
"@auth0/auth0-spa-js": "^1.13.6",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/vue-fontawesome": "3.0.0-3",
"ansi-html": "^0.0.7",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"element-plus": "^1.0.2-beta.28",
"faunadb": "^4.4.1",
"glob-parent": "^6.0.2",
"set-value": "^4.1.0",
"vue": "^3.2.20",
"vue-router": "^4.0.11",
"vue-template-compiler": "^2.6.14",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-router": "4.5.13",
"@vue/cli-plugin-typescript": "^4.5.13",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "^4.5.13",
"@vue/compiler-sfc": "^3.0.0",
"sass": "^1.32.7",
"sass-loader": "7.3.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"typescript": "~3.9.3",
"vue-cli-plugin-element-plus": "~0.0.13"
}
}
uj5u.com熱心網友回復：
如果您嘗試使用 Vue 3 組合 API，但安裝了 Vue 2，則可能會出現此錯誤。目前，如果您運行，npm install vue您將獲得版本 2；您需要運行npm install vue@next才能獲得版本 3。
如果你想使用第 2 版，組件定義的基本 TypeScript 方法是這樣的：
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
// type inference enabled
})
</script>
如果你想在 Vue 2 中使用 TypeScript，我建議嘗試vue-class-component和vue-property-decorator，它們真的很棒！
uj5u.com熱心網友回復：
我能夠通過將 TypeScript 從 3.9.3 升級到 4.4.4 來修復這些匯入錯誤： npm install typescript@latest
似乎 Vue 3.2.0 及更高版本在其宣告檔案中使用了 TS 功能，需要升級的 TypeScript。This release ships TypeScript typings that rely on Template Literal Types and requires TS >= 4.1.
為什么提問者在他們的分叉回購中遇到了這個問題，而不是原始的？這是因為原始 repo 需要 vue ^3.0.0，但需要TypeScript ~3.9.3。
通常yarn.lock會確保安裝了相同的特定版本，但是當它們從 切換yarn到 時npm，會重新生成鎖定檔案，從而在升級 vue 而不是 typescript 時導致版本沖突。
這個問題很好地說明了鎖檔案的重要性！
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/317159.html
上一篇：FP-TS分支（面向鐵路的編程）