Vue 3 및 Vite 프로젝트에 유형 스크립트를 추가하는 방법

Vue 3 및 Vite 프로젝트에 유형 스크립트를 추가하는 방법

내 설정:저는 create-vite-app 모듈을 통해 Vue와 Vite를 설치한 다음, 'initvite-app'에서 생성된 모든 패키지를 Vue와 Vite용 최신 RC 버전으로 업데이트했습니다.

이제 나는 내 모든 코드에 타이프스크립트를 사용하고 싶습니다.처음에 저는 조금 놀다가 helloWorld.vue의 태그에 lang="ts"를 추가했습니다.그것은 효과가 있는 것처럼 보이지만, 나는 vue 파일에서 typescript가 어떻게 tiffile되는지 전혀 모릅니다.

그런 다음 main.js의 이름을 main.ts로 바꾸려고 했습니다.이제 아무 일도 일어나지 않습니다.

typescript를 설치하면 된다고 생각했는데 왜 .vue 구성 요소에서 작동하나요?지금 타이프스크립트를 설치하면 제가 뭔가 잘못하고 있나요?

vue 모듈(HelloWorld)에서는 typescript가 작동하지만 *.ts 파일에서는 js가 생성되지 않는 이유는 무엇입니까?

Vue 3 및 Vite 프로젝트에 유형 스크립트를 추가하는 방법

단계별로 타이프스크립트를 사용하는 초대 프로젝트를 만들겠습니다.

• 먼저, 우리는 처음에 초대 프로젝트를 만들어야 합니다.

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install

• 둘째, 우리는 타자기를 설치해야 합니다.

$ npm install typescript

• 셋째, 우리는 하나를 만들어야 합니다.tsconfig.json다음과 같은 루트 폴더의 파일:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

그리고 여기에서 "tsconfig.json이란 무엇입니까?"를 확인할 수 있습니다.

• 그런 다음, 우리는 크게 만들어야 합니다.shims-vue.d.ts에 철하다.src다음과 같은 폴더:

declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

그shims-vue.d.ts파일은 IDE가 파일이 무엇으로 끝나는지 이해하는 데 도움이 됩니다..vue 사실은.
이제, 우리는 확인할 수 있습니다..ts파일이 잘 작동합니다.
저의 경우, 이름을 변경합니다.main.js로 철하다.main.ts에서src폴더,
그리고 수정합니다.index.html12줄:

 <script type="module" src="/src/main.js"></script> 

로.

 <script type="module" src="/src/main.ts"></script> 

마지막으로, 실행

npm run dev

오류 메시지가 없으면 다음 방법으로 구성 요소 파일을 만들 수 있습니다..ts
행운을 빕니다.

이름이 지정된 유형 스크립트에 대한 템플릿이 있습니다.vue-ts소런닝npm init vite@latest my-vue-app -- --template vue-ts텍스트 방문 프로젝트를 설정합니다.

https://vitejs.dev/guide/#first-vite-project 다운로드

업데이트: Olanrewaju의 의견을 반영했습니다.

최신 문서에 따라 프레임워크 및 유형 스크립트 옵션을 선택할 수 있는 다음 명령 중 하나를 실행할 수 있습니다.

npm init vite@latest

yarn create vite

pnpm dlx create-vite

언급URL : https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project