無法讀取未定義的屬性，Typescript

Question

我在使用可選參數創建 class function 時遇到問題。 我被以下錯誤所困擾，因為我是 typescript 的新手，所以我不確定我必須在我的代碼中更改什么來修復它。 此代碼在僅用 JS 編寫的早期項目中運行良好。

它特別突出了 getRequestOptions，當我 go 在瀏覽器錯誤的 base-service.ts 中檢查它時。

08:32:12.755 client.ts:22 [vite] connecting...
08:32:13.067 client.ts:52 [vite] connected.
08:32:17.043 locales-service.ts:7 getting locales
08:32:17.048 base-service.ts:19 get /Api/GetLocales/ undefined undefined undefined
08:32:17.288 base-service.ts:21 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getRequestOptions')
    at request (base-service.ts:21)
    at getLocales (locales-service.ts:9)
    at setup (locale-selector.vue:22)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6737)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6346)
    at setupComponent (runtime-core.esm-bundler.js:6302)
    at mountComponent (runtime-core.esm-bundler.js:4224)
    at processComponent (runtime-core.esm-bundler.js:4199)
    at patch (runtime-core.esm-bundler.js:3791)
    at mountChildren (runtime-core.esm-bundler.js:3987)

還有我的代碼

基礎服務.ts

    import axios from '@/plugins/axios'

    export default class BaseService {
    getRequestOptions(url:any, method:any, data?:any, params?:any , customHeaders?:any) {
      const headers = {
        ...customHeaders
      }

      return {
        url:url,
        method:method,
        data: data,
        params: params,
        headers: headers,
      }
    }

    async request(method:any, url:any, data?:any, params?:any, headers?:any) {
        console.log(method,url,data,params,headers)

        const options = this.getRequestOptions(method, url, data, params, headers)

        try {
            console.log(options)
            const response = await axios(options)
            console.log("Getting response from api")
            console.log(response)
            if (response.status === 200) {
                return response.data
            }
        } catch (error) {
            console.log(error)
        }
    }
}

語言環境-service.ts

import BaseService from '../base-service'
//?Import models in the future
//import {  } from '@/common/models'

class LocaleServ extends BaseService {
    async getLocales() {
        console.log("getting locales")

        let result = await super.request(
                'get',
                '/Api/GetLocales/'
                )
        
        console.log(result)
        return result
    }
}

export const LocaleService = new LocaleServ()

任何幫助將不勝感激

編輯：

<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from 'vue'
import CountryFlag from 'vue-country-flag-next'
import { LocaleService } from '@/services'

export default defineComponent({
    name: 'LocaleSelector',
    components: {
        CountryFlag
    },

    setup () {
        const { getLocales } = LocaleService
        const data = getLocales()

        return {
            data:data
    }
  }
})
</script>

然后在組件中我用 {{data}} 調用它

Answer 1

問題在於我從 locale-service.vue 中的 LocaleService 調用解構的getLocales()方法的方式

我注意到附加調試器后this是undefined的。 根據這篇文章，解構它會導致它失去它的上下文。 因此，當我在 base-service.ts 中調用getLocales()時， this是undefined 。

簡單的解決方法來解決，由於缺乏經驗，問題是轉過來的。

const { getLocales } = LocaleService
    const data = getLocales()

進入

const data = LocaleService.getLocales()