javascript - Bruke Typescript-funksjoner i et vanlig VueJS-prosjekt

TL;DR: Hvordan kan jeg importere og bruke en TypeScript-modul i mine vanlige JS Vue-komponenter?

Jeg har et Vue 2 (ikke enda 3) prosjekt. I dette prosjektet har jeg flyttet noe logikk til ES-moduler for bedre testbarhet og for å gjøre dem mer gjenbrukbare. Noe sånt som dette:

export const getHistory = () => {
   // ...
}

I en vanlig JS Vue-komponent ville jeg da import {getHistory} from '../modules/listHistory' den funksjonen og bruke den i kombinasjon med noe presentasjonslogikk.

Nå vil jeg flytte denne funksjonen til en TypeScript-modul som dette:

interface ListHistory {
    id: number;
}

export function getHistory(): ListHistory[] {
  // ...
}

Jeg antok (naivt) at jeg bare kunne fortsette å importere funksjonen og bruke den på samme måte som før i mine JS-komponenter. Dette fungerer imidlertid ikke og mislykkes med denne feilmeldingen:

These relative modules were not found:

* ../../modules/listHistory in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/quick-actions/quick-actions.vue?vue&type=script&lang=js&

I følge Vue-retningslinjene for TypeScript har jeg lagt til en tsconfig.json-fil i prosjektet mitt:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Jeg har også lagt til typescript som en utviklingsavhengighet i prosjektet mitt.

Mens jeg lette etter en løsning, kunne jeg bare finne folk som prøvde å importere plain-js-moduler i TypeScript-prosjekter, ingenting som det jeg vil gjøre.

Jeg vet at importering av Typescript-ting inn i vanlig JS-kode ikke gir deg alle fordelene med Typescript, men siden jeg på et tidspunkt vil migrere hele greia til VueJS 3 og jeg ønsker å bruke typer, er det bedre å starte nå med å flytte ting som allerede kan flyttes til Typescript.

Svar #1

Å installere TS og legge til tsconfig.json-konfigurasjonsfilen i et Vue-prosjekt basert på Vue CLI/Webpack er ikke nok, da du også må konfigurere Webpack for å korrekt håndtere TS-filer eller <script lang='ts'>-blokker i Vue SFC-er (ved å bruke ts-loader)

Den enkleste måten å begynne å bruke TS i et prosjekt administrert av Vue CLI er å bruke CLI-pluginen @vue/cli-plugin-typescript

vue add typescript

Relaterte artikler