如何通过TypeScript在Nuxt中定义和使用我自己的自定义服务？

npm install --save-dev typescript @nuxt/typescript-build

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2020", "dom"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    },
    "types": ["@types/node", "@nuxt/types"]
  },
  "exclude": ["node_modules"]
}

export default class MyService {
  private apiUrl: string;

  constructor(apiUrl: string) {
    this.apiUrl = apiUrl;
  }

  async fetchData(): Promise<any> {
    const response = await fetch(this.apiUrl);
    const data = await response.json();
    return data;
  }
}

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import MyService from '~/services/myService';

@Component
export default class MyPage extends Vue {
  private message: string = '';

  async mounted() {
    const myService = new MyService('https://api.example.com');
    const data = await myService.fetchData();
    this.message = data.message;
  }
}
</script>