我正在使用
- 流行！_OS 21.04 (Ubuntu)
- 節點 v16.11.1
- npm v7.5.2
- Vue CLI v4.5.13
并且想要使用Pinia 包創建一個 Vue3 應用程式，直到 Vuex5 準備就緒。我跑
vue create foo
# manually select TypeScript and Jest for unit tests
cd foo
npm install pinia
在生成的example.spec.ts檔案中，我設定了一個自定義型別、一個示例商店和一個測驗
import { defineStore, setActivePinia, createPinia } from "pinia";
import { computed, ComputedRef, ref, Ref } from "vue";
/*
Define a custom type for demo purposes
*/
type MyValue = { isTrue: boolean };
/*
Define the store using the composition API
*/
const useStore = defineStore("myValues", () => {
const myValues: Ref<MyValue[]> = ref<MyValue[]>([]);
const myTruthyValues: ComputedRef<MyValue[]> = computed<MyValue[]>(() =>
myValues.value.filter((myValue: MyValue) => myValue.isTrue));
return { myTruthyValues };
});
/*
Use the store somewhere in the project
*/
describe("Store", (): void => {
beforeEach(() => {
setActivePinia(createPinia());
});
it("returns truthy values", (): void => {
const myValuesStore = useStore();
expect(myValuesStore.myTruthyValues.every((myValue: MyValue) => myValue.isTrue)).toBeTruthy();
});
});
測驗通過。但改變的型別定義時MyValue，以type MyValue = { isTrue: boolean; createdAt: Date; };測驗失敗
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
tests/unit/example.spec.ts:13:9 - error TS2322: Type 'Ref<{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }[]>' is not assignable to type 'Ref<MyValue[]>'.
Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }[]' is not assignable to type 'MyValue[]'.
Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.
Types of property 'createdAt' are incompatible.
Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }' but required in type 'Date'.
13 const myValues: Ref<MyValue[]> = ref<MyValue[]>([]);
~~~~~~~~
node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts:114:5
114 [Symbol.toPrimitive](hint: "default"): string;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'[Symbol.toPrimitive]' is declared here.
tests/unit/example.spec.ts:32:47 - error TS2769: No overload matches this call.
Overload 1 of 2, '(predicate: (value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, array: { ...; }[]) => value is { ...; }, thisArg?: any): this is { ...; }[]', gave the following error.
Argument of type '(myValue: MyValue) => boolean' is not assignable to parameter of type '(value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, arr...'.
Types of parameters 'myValue' and 'value' are incompatible.
Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.
Types of property 'createdAt' are incompatible.
Property '[Symbol.toPrimitive]' is missing in type '{ toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }' but required in type 'Date'.
Overload 2 of 2, '(predicate: (value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, array: { ...; }[]) => unknown, thisArg?: any): boolean', gave the following error.
Argument of type '(myValue: MyValue) => boolean' is not assignable to parameter of type '(value: { isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }, index: number, arr...'.
Types of parameters 'myValue' and 'value' are incompatible.
Type '{ isTrue: boolean; createdAt: { toString: () => string; toDateString: () => string; toTimeString: () => string; toLocaleString: { (): string; (locales?: string | string[] | undefined, options?: DateTimeFormatOptions | undefined): string; }; ... 39 more ...; getVarDate: () => VarDate; }; }' is not assignable to type 'MyValue'.
32 expect(myValuesStore.myTruthyValues.every((myValue: MyValue) => myValue.isTrue)).toBeTruthy();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts:114:5
114 [Symbol.toPrimitive](hint: "default"): string;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'[Symbol.toPrimitive]' is declared here.
附加日期欄位不應影響測驗，盡管它似乎與該型別斗爭，因為附加number欄位作業正常。
不幸的是我不知道出了什么問題
- 我的代碼？（但測驗通過沒有日期欄位）
- Vue 提供了錯誤的 TS 配置？
- Jest 與之抗爭？
我不認為這個問題與皮尼亞有關......
有任何想法嗎？
uj5u.com熱心網友回復：
這是 TypeScript 的一個限制，如對類似問題的回答中所述。但是，由于某種原因，那里提出的解決方案不起作用。
選項 1：更新typescript到 4.3
TypeScript 問題已在 4.3 中修復，因此最快的解決方案可能是更新您的typescript版本：
npm i -D typescript@^4.4.3
選項 2：省略 Symbol.toPrimitive
如果您希望保留的舊版本typescript，你可以省略Symbol.toPrimitive從Date該createdAt屬性型別：
type MyValue = { isTrue: boolean, createdAt: Omit<Date, SymbolConstructor['toPrimitive']> };
選項 3：使用型別推斷
避免型別沖突的解決方法是依靠型別推斷而不是鍵入所有內容。在下面的例子中，只有myValues ref顯式型別化，而所有相關的變數型別都是推斷的 ??：
import { defineStore, setActivePinia, createPinia } from "pinia";
import { computed, ref } from "vue";
type MyValue = { isTrue: boolean; createdAt: Date; };
const useStore = defineStore("myValues", () => {
?? ??
const myValues = ref<MyValue[]>([]);
??
const myTruthyValues = computed(() =>
??
myValues.value.filter(myValue => myValue.isTrue));
return { myTruthyValues };
});
describe("Store", (): void => {
beforeEach(() => {
setActivePinia(createPinia());
});
it("returns truthy values", (): void => {
const myValuesStore = useStore();
??
expect(myValuesStore.myTruthyValues.every(myValue => myValue.isTrue)).toBeTruthy();
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/328321.html
標籤：javascript 打字稿 Vue.js Vuejs3
下一篇：__ob__：觀察者而不是我的物件陣列（JSON.parse(JSON.stringify(obj))NOTWORKING）