vue.js 3.0 및 typescript는 강력한 조합 입니다
vue.js 3.0은 클래스 기반 구성 요소에 대한 기본 지원 및 더 나은 유형 추론을 포함하여 TypeScript 사용자에게 개선 된 지원을 제공합니다. 그러나 이제 VUE의 명령 줄 도구 인 Vue CLI를 사용하여 TypeScript를 사용하여 VUE 응용 프로그램을 작성하기 시작할 수 있습니다.
클래스 기반 구성 요소 및 TypeScript의 장점
vue.js의 클래스 기반 구성 요소는 TypeScript 클래스를 사용하여 작성할 수 있으며, 이는 더 나은 유형 확인 및 유지 관리 가능성을 제공합니다. 이 클래스는 패키지의 데코레이터를 사용하여 선언 할 수 있습니다.
패키지가 제공하는 다른 데코레이터는 클래스 기반 구성 요소를 더욱 향상시킬 수 있습니다. 여기에는 소품을 클래스 속성으로 선언하고 클래스 메소드에서 이벤트를 방출하는 데
>가 포함됩니다.
typescript 및 vue.js 의 장점
typeScript는 vue.js와 함께 사용됩니다. 오류의 조기 감지, 더 나은 자동 완성, 탐색 및 리팩토링 서비스 및 복잡한 응용 프로그램 라이브러리를위한보다 구조적이고 확장 가능한 코드를 제공하는 정적 유형 검사를 포함하여 여러 장점이 있습니다.
지난 9 월, Evan You (Vue.js의 제작자)는 다음 주요 버전의 도서관에 대한 계획을 발표했습니다. VUE 3.0은 클래스 기반 구성 요소에 대한 기본 지원을 포함하여 TypeScript 사용자에게 개선 된 경험을 제공하고 코드를 작성할 때 유형 추론에 대한 더 나은 지원을 제공합니다.
좋은 소식은 TypeScript를 사용하여 vue 앱을 작성하기 위해 3.0 (2019 년 3 분기 예상)이 릴리스 될 때까지 기다릴 필요가 없다는 것입니다. VUE의 명령 줄 도구 VUE CLI는 미리 구성된 TypeScript 빌드 도구를 사용하여 프로젝트를 시작하는 옵션을 제공하며 VUE 구성 요소를 TypeScript 클래스로 쓸 수있는 공식적으로 지원되는 vue-property-decorator 모듈을 포함합니다. @Component
이 기사에서는 VUE 및 TypeScript의 기본 사항에 익숙하다고 가정합니다. 오늘날 정적 타이핑 및 클래스 기반 구성 요소를 활용하는 방법을 살펴 보겠습니다.
Vue TypeScript Project 만들기 vue-property-decorator @Prop
TypeScript로 시작하는 장애물 중 하나는 필요한 빌드 도구를 구성하는 것일 수 있습니다. 고맙게도 Vue Cli는이 문제를 해결했습니다. 이를 사용하여 TypeScript 컴파일러가 설정되어 준비된 프로젝트를 만들 수 있습니다. @Emit
새로운 VUE 프로젝트 작성을 지원하기 위해 TypeScript를 사용하는 프로세스를 간략하게 소개하겠습니다. @Watch
전 세계적으로 vue cli를 설치하려면 터미널/명령 줄에서 다음 명령을 실행하십시오.
다음, 새 프로젝트를 만들고 프로젝트 이름을 지정합시다 :
이것은 또한 설치 프로젝트의 하위 폴더의 이름이기도합니다. 를 입력하면 를 입력하면 기본 사전 설정을 선택하거나 설치 옵션을 수동으로 선택하라는 메시지가 표시됩니다.
수동 옵션을 선택하면 추가 옵션 세트가 표시됩니다. 필요한 옵션은 코스 타이프 스크립트이지만 나중에 vuex- 특이 적 데코레이터를 볼 때 Vuex를 선택할 수도 있습니다.
프로젝트 옵션을 선택한 후 다음 화면에서 클래스 스타일 구성 요소 구문을 사용할 것인지 묻습니다. 이것에 "예"라고 말합니다. 그런 다음 "자동 감지를 위해 폴리 플릴 용 타입 스크립트와 함께 바벨을 사용하는지"묻습니다. 이것은 이전 브라우저를 지원할 프로젝트에 좋은 아이디어입니다. 필요에 따라 나머지 질문에 답변하면 설치 프로세스가 시작되어야합니다.
편집자/IDE 지원에 대한 지침
많은 코드 편집기 및 IDE는 이제 TypeScript를 지원합니다. 유료 솔루션에서 JetBrains 소프트웨어 (예 : Webstorm, PHPStorm)는 VUE 및 TypeScript를 모두 지원합니다. 무료 대안을 찾고 있다면 Microsoft의 Visual Studio 코드를 추천합니다. Vetur Extension과 함께 우수한 자동 완성 및 유형 확인을 제공합니다.
클래스 기반 구성 요소
먼저 클래스를 사용하여 VUE 구성 요소를 작성하는 방법을 살펴 보겠습니다. 이 기능은 TypeScript에만 국한되지 않지만 클래스 기반 구성 요소를 사용하면 TS가 더 나은 유형 확인을 제공하는 데 도움이되며 제 생각에는 구성 요소를 더 간단하고 유지 관리하기 쉽습니다.
구문을 보자. 이전 섹션의 단계를 따르고 vue Cli를 사용하여 새 프로젝트를 만들었다면 프로젝트 디렉토리로 이동하여 src subfolder로 이동하여 app.vue 를 엽니 다. 여기서 관심있는 것은 표준 VUE 단일 파일 구성 요소 (SFC)와 유일한 부분이기 때문에
섹션입니다.
태그 자체에는 속성이 로 설정되어 있습니다. 이는 빌드 도구와 편집기가 코드를 TypeScript로 올바르게 해석하는 데 매우 중요합니다.
클래스 기반 구성 요소를 선언하려면 vue를 확장하는 클래스를 만들어야합니다 (여기서는
모듈 대신 패키지에서 직접 가져옵니다).
클래스 선언은 데코레이터로 시작해야합니다
구성 요소의 코드에서 데코레이터는 구성 요소, 소품 및 필터 옵션을 지정하는 데 사용할 수있는 객체를 허용 할 수 있음을 알 수 있습니다.
데이터 속성
객체 기반 구성 요소를 선언 할 때는 구성 요소의 데이터 속성을 데이터 개체를 반환하는 것으로 선언 해야하는 함수에 익숙합니다 : .
… 클래스 기반 구성 요소의 경우 데이터 속성을 일반 클래스 속성으로 선언 할 수 있습니다.
<script></script>
컴퓨팅 속성
클래스를 구성 요소로 사용하는 또 다른 장점은 Getter 메소드를 사용하여 계산 된 속성을 선언하기위한 클리너 구문입니다.
마찬가지로 세터 메소드를 사용하여 쓰기 가능한 계산 속성을 만들 수 있습니다.
<code class="language-bash">npm install -g @vue/cli</code>
메소드
구성 요소 메소드는 클래스 방법과 비슷한 간결한 방식으로 선언 할 수 있습니다.<code class="language-bash">npm install -g @vue/cli</code>
내 생각에, 방법, 데이터 속성 및 계산 된 속성을 선언하기위한 간단한 구문은 원래 객체 기반 구성 요소보다 클래스 기반 구성 요소를 작성하고 읽는 것보다 더 나은 구문을 제공합니다.
데코레이터
우리는 한 걸음 더 나아가 패키지로 제공된 추가 데코레이터를 사용할 수 있습니다. 클래스 기반 구성 요소를 작성하기위한 6 개의 추가 데코레이터를 제공합니다.
vue-property-decorator
위에서 볼 수 있듯이 선호하는 경우 데코레이터와 속성 선언을 한 줄에 완전히 넣을 수 있습니다.
@Prop
또 다른 편리한 데코레이터는
로, 모든 클래스 방법에서 이벤트를 발급 할 수 있습니다. 방출 된 이벤트는 대체 이벤트 이름이 데코레이터로 전달되지 않는 한 메소드의 이름 (낙타 이름 이름이 케밥 케이스로 변환됨)을 사용합니다.
메소드가 값을 반환하면 값은 이벤트의 페이로드로 발행되고 메소드에 전달 된 매개 변수가 발행됩니다. @Prop
@Component
위의 코드는 이벤트를 방출합니다. <code class="language-bash">vue create vue-typescript-demo</code>
@Prop
이 데코레이터로 관찰자를 만드는 것은 매우 간단합니다. 관측 된 속성의 이름과 선택적 옵션 객체의 두 매개 변수를 허용합니다.
<code class="language-typescript">import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
@Component({
components: {
HelloWorld,
},
})
export default class App extends Vue {}</code>
요약
이 기사에서 TypeScript를 사용하여 VUE 응용 프로그램을 작성하는 것이 반드시 힘들지는 않다는 것을 보여주기를 바랍니다. CLI를 사용하여 새 프로젝트를 시작하면 필요한 빌드 도구를 신속하게 설정할 수 있습니다. 클래스 기반 구성 요소 및 추가 데코레이터에 대한 지원을 포함하여 간결하고 관용적으로 관용어를 쓸 수 있습니다! <code class="language-typescript">@Component
class MyComponent extends Vue {}</code>
처음부터 vue.js를 배우고 싶습니까? Sitepoint Premium을 사용하여 기본, 프로젝트, 팁 및 도구 등을 다루는 VUE 책을 완전히 모으십시오. 지금 한 달에 $ 9에 가입하거나 7 일 무료 평가판을 사용해보십시오.
typescript를 사용하여 클래스 기반 vue.js에 대한 faqs (FAQ)
TypeScript 및 vue.js를 사용하면 어떤 이점이 있습니까?
typeScript는 정적 타이핑을 제공하며, 이는 대규모 응용 프로그램을 개발할 때 상당한 이점이 될 수 있습니다. 개발 프로세스 초기에 오류를 포착하여 코드를보다 강력하고 유지 관리하기 쉽게 만듭니다. TypeScript는 또한 개발 프로세스를보다 효율적으로 만들기 위해 더 나은 자동 완료, 내비게이션 및 재구성 서비스를 제공합니다. vue.js와 함께 사용하면 TypeScript를 사용하면보다 체계적이고 확장 가능한 코드베이스가 가능하여 복잡한 응용 프로그램을보다 쉽게 관리하고 개발할 수 있습니다.
TypeScript를 사용하여 vue.js 프로젝트를 설정하는 방법은 무엇입니까?
TypeScript로 Vue.js 프로젝트를 설정하려면 여러 단계가 포함됩니다. 먼저 Vue CLI가 설치되어 있지 않으면 설치해야합니다. 그런 다음 Vue CLI를 사용하여 새로운 프로젝트를 만들고 생성 과정에서 기능으로 TypeScript를 선택하십시오. VUE CLI는 귀하를 위해 TypeScript 구성을 설정합니다. 그런 다음 TypeScript를 사용하여 VUE 구성 요소 작성을 시작할 수 있습니다.
vue.js의 클래스 기반 구성 요소는 무엇입니까?
vue.js의 클래스 기반 구성 요소는 ES6 클래스를 사용하여 구성 요소를 정의하는 방법입니다. 이 접근법은 특히 객체 지향 프로그래밍 배경의 개발자에게 구성 요소를보다 쉽게 읽고 이해할 수 있도록 할 수 있습니다. 클래스 기반 구성 요소는 TypeScript와 잘 작동하므로 정적 유형 및 인터페이스와 같은 TypeScript의 기능을 활용할 수 있습니다.
vue.js에서 클래스 기반 구성 요소를 정의하기 위해 TypeScript를 사용하는 방법은 무엇입니까?
vue.js에서 typescript를 사용하여 클래스 기반 구성 요소를 정의하려면 데코레이터를 사용해야합니다. 이 데코레이터를 사용하면 ES6 클래스로 구성 요소를 쓸 수 있습니다. 클래스에서는 일반 VUE 구성 요소에서와 같이 데이터, 메소드 및 수명주기 후크를 정의 할 수 있습니다.
클래스 기반 구성 요소에서 vue.js 지침을 사용할 수 있습니까?
예, 클래스 기반 구성 요소에서 vue.js 지침을 사용할 수 있습니다. 구문은 일반 VUE 구성 요소와 동일합니다. 템플릿에 ,
, 및 기타 지침을 사용할 수 있습니다.
클래스 기반 구성 요소에서 소품을 사용하는 방법은 무엇입니까?
클래스 기반 구성 요소에서 데코레이터를 사용하여 소품을 정의 할 수 있습니다. 이 데코레이터를 사용하면 소품 유형과 필요한지 또는 기본값을 지정할 수 있습니다.
클래스 기반 구성 요소에서 계산 된 속성을 사용하는 방법은 무엇입니까?
클래스 기반 구성 요소에서 계산 된 속성을 클래스에서 게터 메소드로 정의 할 수 있습니다. Getter 방법의 결과는 의존성이 변경되는 경우에만 캐시 및 재 계산됩니다.
클래스 기반 구성 요소에서 관찰자를 사용하는 방법은 무엇입니까?
클래스 기반 구성 요소에서 vue-class-component 데코레이터를 사용하여 관찰자를 정의 할 수 있습니다. 이 데코레이터를 사용하면 관찰 할 속성과 속성이 변경 될 때 호출 할 방법을 지정할 수 있습니다.
클래스 기반 구성 요소에서 mixin을 사용할 수 있습니까?
예, 클래스 기반 구성 요소에서 Mixin을 사용할 수 있습니다. 믹스 인을 클래스로 정의하고 데코레이터를 사용하여 구성 요소에 포함시킬 수 있습니다.
vue.js 조합 API를 TypeScript와 사용하는 방법은 무엇입니까?
vue.js 조합 API는 TypeScript와 잘 작동합니다.
메소드 내에서 반응성 데이터와 함수를 정의하고 TypeScript를 사용하여 유형을 설정할 수 있습니다. 이를 통해 TypeScript의 정적 유형 및 자동 완성 기능을 활용하여 코드를보다 강력하고 개발하기 쉽게 만들 수 있습니다.
위 내용은 TypeScript에서 클래스 기반 vue.js 앱을 작성하기 시작하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
