Vue에서 유형 검사를 위해 TypeScript를 사용하는 방법-View.js-php.cn

Vue에서 유형 검사를 위해 TypeScript를 사용하는 방법

王林

풀어 주다： 2023-06-11 17:16:05

원래의

1654명이 탐색했습니다.

Vue는 템플릿 구문을 사용하여 애플리케이션을 렌더링하고 풍부한 구성 요소와 수명 주기 후크를 제공하는 인기 있는 프런트 엔드 프레임워크입니다. 그러나 Vue는 원래 JavaScript로 작성되었으며 JavaScript는 약한 유형의 언어이므로 대규모 애플리케이션을 개발할 때 유형 오류가 발생하기 쉽습니다. 이 문제를 해결하기 위해 Vue는 유형 검사에 TypeScript를 사용할 수 있습니다.

TypeScript는 강력한 유형 지원, 클래스 및 인터페이스와 같은 기능을 추가하고 도구를 통해 유형 검사를 구현하는 JavaScript의 상위 집합입니다. TypeScript는 Vue 애플리케이션에 더 나은 유형 안전성을 제공하여 개발자가 코드 작성 시 유형 오류를 찾아 방지하도록 돕습니다. 이 기사에서는 Vue에서 유형 검사를 위해 TypeScript를 사용하는 방법에 대해 설명합니다.

Vue 및 TypeScript 설치

먼저 Vue 및 TypeScript를 설치하세요. Vue 및 TypeScript는 Vue CLI 또는 npm을 사용하여 직접 설치하거나 CDN 링크를 사용하여 Vue를 설치할 수 있습니다. 설치가 완료되면 Vue 애플리케이션에서 TypeScript를 사용해야 합니다.

TypeScript 구성

Vue가 TypeScript를 인식하려면 Vue 애플리케이션에 TypeScript 구성 파일을 추가해야 합니다. TypeScript는 tsconfig.json 파일을 생성하여 구성할 수 있습니다. 이 파일에서 다음과 같은 일부 구성 옵션을 설정해야 합니다. tsconfig.json文件来配置TypeScript。在该文件中，需要设置一些配置选项，例如：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

로그인 후 복사

在上述配置中，我们设置了编译选项为es5，使用es2015模块化规范，开启了严格类型模式、隐式任意类型检查、解析节点模块。此外，include配置选项用于指定需要编译的源文件，exclude选项则排除不需要编译的文件或文件夹。

组件中使用TypeScript

现在，我们已经配置好了Vue和TypeScript，接下来，我们需要确保在组件中正确使用TypeScript类型。在Vue中，可以通过为组件编写一个TypeScript接口来指定组件的属性和方法的类型。例如：

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

<script lang="ts">
import { Component, Vue } from 'vue';

interface HelloWorldProps {
  title: string;
}

@Component
export default class HelloWorld extends Vue {
  title!: HelloWorldProps['title'];
}
</script>

로그인 후 복사

在上述代码中，我们为HelloWorld组件创建了一个名为HelloWorldProps的接口。该接口定义了组件的title属性的类型为字符串。然后，在组件中，我们使用TypeScript的类语法，并继承Vue类来编写组件。类中的属性title使用感叹号后缀，这意味着它是非空属性。

使用装饰器

在Vue中，还可以使用装饰器来编写TypeScript代码。Vue class components是一个非常有用的库，它提供了一组装饰器来帮助我们编写TypeScript代码。

首先，需要使用npm安装Vue Class Component和Vue Property Decorator：

npm install vue-class-component vue-property-decorator --save-dev

로그인 후 복사

然后，可以在组件中使用装饰器来定义属性和方法的类型，例如：

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

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  props: {
    title: {
      type: String,
      required: true,
    },
  },
})
export default class HelloWorld extends Vue {
  get titleUpper(): string {
    return this.title.toUpperCase();
  }
}
</script>

로그인 후 복사

在上述代码中，我们使用Vue Property Decorator库中的@Componentrrreee

위 구성에서는 컴파일 옵션을 es5로 설정하고, es2015 모듈 사양을 사용하고, 엄격한 유형 모드를 켜고, 암시적 임의 유형 검사를 켜고, 구문 분석합니다. 노드 모듈. 또한 include 구성 옵션은 컴파일해야 하는 소스 파일을 지정하는 데 사용되며, exclude 옵션은 컴파일할 필요가 없는 파일이나 폴더를 제외합니다.