Dva: Keraguan tentang penulisan model setelah mengintegrasikan TypeScript

Saya tidak tahu apakah saya dapat mencapai efek yang Anda inginkan

import { Model } from 'dva';

export default {
  name: 'test',
  state: {},
  effects: {},
} as Model;

Apa yang terjadi?

Ketika kita menggunakan dva dalam proyek TypeScript, bagaimana kita bisa menulis efek dalam model menjadi seanggun dan standar mungkin? Misalnya ada userModel.ts, efek di dalamnya adalah:

*login({ payload, callback }, { put }) {
            // code here...
 },

Jika proyek kita menggunakan plugin eslint, saat ini kita akan mendapatkan pesan kesalahan, 绑定元素“payload”隐式具有“any”类型。ts(7031) , karena kita tidak memiliki tipe referensi, lalu bagaimana kita menulis tipe referensi dari parameter yang relevan di sini ? Kami tidak dapat menentukan isi payload. Jadi saat ini Anda hanya dapat menggunakan apa saja, yaitu:

*login({ payload, callback } : any, { put }:any) {
            // code here...
 },

Apakah ada cara yang lebih baik untuk menulisnya? Terima kasih!

Gudang terkecil yang dapat direproduksi

Silakan gunakan yarn create umi membuat, pilih app , lalu pilih dva , dan unggah ke repositori GitHub Anda

tidak ada

Langkah-langkah untuk mereproduksi, log kesalahan dan konfigurasi terkait

tidak ada

Informasi lingkungan terkait

• Versi Umi : tidak digunakan
• Versi simpul: 11.2.0
• Sistem operasi : macOS 10.14.5

Anda dapat mencoba perpustakaan yang saya tulis

https://github.com/DiamondYuan/dva-model-creator

Dapat dilakukan bahwa setiap tindakan dan setiap jenis model selesai. Dan itu sepenuhnya kompatibel dengan dva yang ada.
Saya telah menggunakannya di lingkungan produksi.

alamat demo

https://github.com/umijs/umi-examples/tree/master/typescript

https://github.com/DiamondYuan/vanaheim

@jinyang1994 Saya menggunakan dva. Apa yang harus saya lakukan?

import { Model } from 'dva';

Saya ingin tahu apa tujuan dari ini sebagai Model? Terima kasih.

seperti jenis pernyataan

Jika dva-core tidak berfungsi, Anda hanya dapat menggunakan tipe dva

@jinyang1994
Saya mengekstrak Model.ts dari file deklarasi dva index.d.ts dan beberapa masalah terkait dalam masalah sebagai referensi, dan menggunakannya dalam model sebagai berikut:

/* eslint-disable no-unused-vars */
import { ReducersMapObject, Reducer, Dispatch, AnyAction, Action } from 'redux';

export interface EffectsCommandMap {
    put: <A extends Action>(action: A) => any;
    call: Function;
    select: Function;
    take: Function;
    cancel: Function;
    [key: string]: any;
}
export interface EffectsMapObject {
    [key: string]: Effect | EffectWithType;
}
export interface ReducerEnhancer {
    (reducer: Reducer<any>): void;
    [key: string]: Reducer;
}
export interface SubscriptionAPI {
    dispatch: Dispatch<any>;
}
// export type ActionWithPayload = { action: Action; payload: any };
export type Effect = (action: AnyAction, effects: EffectsCommandMap) => void;
export type EffectType = 'takeEvery' | 'takeLatest' | 'watcher' | 'throttle';
export type EffectWithType = [Effect, { type: EffectType }];

export type ReducersMapObjectWithEnhancer = [ReducersMapObject, ReducerEnhancer];
export type Subscription = (api: SubscriptionAPI, done: Function) => void;
export interface SubscriptionsMapObject {
    [key: string]: Subscription;
}
export default interface Model {
    namespace: string;
    state?: any;
    reducers?: ReducersMapObject | ReducersMapObjectWithEnhancer;
    effects?: EffectsMapObject;
    subscriptions?: SubscriptionsMapObject;
}

Dengan pernyataan (sebagai Model), jenis yang relevan dalam efek sekarang diuraikan dengan benar, tetapi parameter muatan yang diteruskan di reduksi masih tidak dapat diuraikan, dan editor vscode melaporkan kesalahan: ketik "Action"Atribut "payload" tidak ada pada "

import Model from '@/utils/dva/Model';

export default {
    namespace: 'userModel',

    state: {
        status: 'logout',
        currentUser: '',
    },

    effects: {
        *login({ payload, callback }, { put }) {
            // ...
        },
    },
    reducers: {
        //这里的payload类型判断失败，报错为类型“Action<any>”上不存在属性“payload”。
        changeLoginStatus(state, { payload }) {  
            return {
                ...state,
                // ....
            };
        },
    },
} as Model;

Bolehkah saya bertanya di mana ada masalah? Terima kasih!

Gunakan pembuat model-dva ini

Kerangka kerja redux ini mendukung ts dengan sempurna, dengan petunjuk kode 100%: redux-model-ts

Terima kasih kepada semua orang di lantai atas atas rekomendasinya, tetapi sebagai pemula, saya masih ingin mencoba sendiri. Setelah latihan saya nanti, saya menemukan bahwa adalah mungkin untuk mengekstrak Model dva dari solusi saya sebelumnya, dan kemudian bekerja sama dengan pernyataan. Satu-satunya masalah adalah bahwa setelah Redux ditingkatkan ke V4, ReducersMapObject-nya diubah, jadi saya menemukan kode sumber yang relevan dari Redux V3 untuk memodifikasi Model, tes sebenarnya mudah digunakan, dan saya membagikannya dengan orang yang ditakdirkan:

/* eslint-disable no-unused-vars */
import { ReducersMapObject, Reducer, Dispatch, AnyAction, Action } from 'redux';

export interface EffectsCommandMap {
    put: <A extends Action>(action: A) => any;
    call: Function;
    select: Function;
    take: Function;
    cancel: Function;
    [key: string]: any;
}
// export type ActionWithPayload = { action: Action; payload: any; callback: Function };
export type Effect = (action: AnyAction, effects: EffectsCommandMap) => void;
export type EffectType = 'takeEvery' | 'takeLatest' | 'watcher' | 'throttle';
export type EffectWithType = [Effect, { type: EffectType }];
export interface EffectsMapObject {
    [key: string]: Effect | EffectWithType;
}

export interface ReducerEnhancer {
    (reducer: Reducer<any>): void;
}

// 使用redux-v4.x的ReducerMapObject会导致dva reducer中的action payload等参数无法确定类型（dva中使用的是3.x的redux）
// 这里从redux v3.x中找到了对应的ReducersMapObject以解决上述问题
export interface ReduxV3ReducersMapObject {
    [key: string]: Reducer<any>;
}

export type ReducersMapObjectWithEnhancer = [ReducersMapObject, ReducerEnhancer];

export interface SubscriptionAPI {
    dispatch: Dispatch<any>;
}
export type Subscription = (api: SubscriptionAPI, done: Function) => void;
export interface SubscriptionsMapObject {
    [key: string]: Subscription;
}

export default interface Model {
    namespace: string;
    state?: any;
    // reducers?: ReducersMapObject | ReducersMapObjectWithEnhancer;
    reducers?: ReduxV3ReducersMapObject | ReducersMapObjectWithEnhancer;
    effects?: EffectsMapObject;
    subscriptions?: SubscriptionsMapObject;
}

Terima kasih kakak, saya juga pemula di ts, dan saya telah belajar banyak