플레인 VueJS 프로젝트에서 Typescript 함수 사용

플레인 VueJS 프로젝트에서 Typescript 함수 사용

TL;DR: typescript 모듈을 플레인 js Vue-Components로 Import하여 사용하려면 어떻게 해야 합니까?

Vue 2(아직 3개) 프로젝트가 있습니다.이 프로젝트에서는 테스트성을 향상시키고 재사용성을 높이기 위해 몇 가지 논리를 es 모듈로 옮겼습니다.다음과 같은 경우:

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

플레인 JS Vue-Component에서는 다음과 같이 합니다.import {getHistory} from '../modules/listHistory'이 기능을 사용하여 프레젠테이션 로직과 조합하여 사용합니다.

이제 이 기능을 다음과 같은 타이프스크립트 모듈로 이동하겠습니다.

interface ListHistory {
    id: number;
}

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

JS-Components에서 이전과 같은 방법으로 함수를 Import하여 사용할 수 있다고 (순진하게) 생각했습니다.그러나 이 오류 메시지는 작동하지 않고 실패합니다.

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&

추가한 타입 스크립트의 vue 가이드라인에 따라tsconfig.json프로젝트 파일:

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

또,typescript내 프로젝트에 대한 개발 의존으로요.

해결책을 찾아 헤매고 있는 동안, 나는 내가 하고 싶은 것과 전혀 다른, 단지 타이프 스크립트프로젝트에 플레인 js 모듈을 Import하려는 사람들을 볼 수 있었다.

Typescript의 내용을 일반 JS 코드로 Import하면 Typescript의 모든 이점을 얻을 수 없다는 것을 알고 있습니다.다만 VueJs 3으로 이행할 예정이기 때문에 타입을 사용하고 싶기 때문에 이미 타입으로 이행할 수 있는 것부터 시작하는 것이 좋습니다.

TS 설치 및 추가tsconfig.json또한 TS 파일을 올바르게 처리하도록 웹 팩을 구성해야 하므로 Vue CLI/Webpack 기반 Vue 프로젝트에 대한 구성 파일로는 충분하지 않습니다.<script lang='ts'>Vue SFC 블록(ts-loader 사용)

Vue CLI에서 관리하는 프로젝트에서 TS 사용을 시작하는 가장 쉬운 방법은 CLI 플러그인 @vue/cli-plugin-typescript를 사용하는 것입니다.

vue add typescript

언급URL : https://stackoverflow.com/questions/68440480/using-typescript-functions-in-plain-vuejs-project