반응형
nuxt plugins 글로벌 메서드의 typescript 정의에 유형이 있습니까?
Vuex 스토어 인스턴스에서도 액세스 가능해야 하기 때문에 주입 속성에 의해 정의된 글로벌 메서드를 제공하는 Nuxt.js 플러그인을 작성했습니다.형식 정의 파일을 작성했습니다.이 파일은 에 포함되어 있습니다.tsconfig.json
페이지와 같이 Nuxt.js 어플리케이션에서 이 글로벌 메서드에 접속하면 입력은 예상대로 동작합니다.스토어내의 액션 메서드로 이 메서드에 액세스 하려고 하면, 타입 any 가 됩니다.의 유형을 확대하려면 어떻게 해야 합니까?vuex/types/index.d.ts
인텔리센스 지원 및 올바른 타이핑으로 내 메서드에 접근할 수 있습니까?이거 정말 좋겠다.
Moritz씨께 안부 전해 주세요.
테스트한 내용:
이 가이드를 읽고 플러그인 유형의 정의를 완료할 수 있었습니다.마찬가지로 Vuex에서도 이 작업을 수행해야 하는데 어떤 모듈을 사용해야 하는지 알 수 없습니다.
plugin-web-connection.ts
:
export default ({store, isHMR, app}, inject) => {
app.store.registerModule('oauth', oAuthStore);
app.store.registerModule('app-config', appConfigStore);
inject("getOAuthCredentials", function(stringProp: string) : string {
console.log("This is an example for getting oAuth: ", stringProp);
return stringProp;
});
inject("doWebRequest", function<T>(method: string, params: any) :
Promise<T> {
// content of method does not matter
}
plugin-web-connection.d.ts
:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$getOAuthCredentials(stringProp: string): string,
$doWebRequest<T>(method: string, params: any, storeCommit: string):
Promise<T>
}
}
menu-store.ts
:
export const state = (): sabioTree => ({
});
export const mutations = {
setMenu(state: sabioTree, newState: sabioTree) {}
}
export const actions = {
retrieveMenu(context: any, data: any) {
var method: string = data.method;
var parametersObj: any = data.parameters;
var storeCommit: string = data.storeCommit;
debugger;
// this is underlined red by VS-Code because of the generic!! this.$doWebRequest has type any
this.$doWebRequest<sabioTree>(method, parametersObj, storeCommit).
then(function(s) {})
}
}
언급URL : https://stackoverflow.com/questions/57395180/typescript-definition-of-nuxt-plugins-global-methods-has-type-any
반응형
'programing' 카테고리의 다른 글
Vuex getter의 옵서버에서 값 가져오기 (0) | 2022.08.17 |
---|---|
왜 일부 커널 프로그래머들은 루프 중에 단순 대신 goto를 사용하는가? (0) | 2022.08.11 |
vue 컴포넌트가 있는 브라우저의 뒤로 버튼을 비활성화하려면 어떻게 해야 합니까? (0) | 2022.08.11 |
스토어 데이터가 필요한 API를 깔끔하게 호출하는 방법 (0) | 2022.08.11 |
테스트 실행 중 vue-module이 재설정되지 않음 (0) | 2022.08.11 |