사용 가능한 모든 JavaScript 프레임워크를 보면, 나는 Vue와 React가 나의 가장 사랑이라고 생각한다.방대한 생태계, 강력한 TypeScript 지원, JSX와 Vue의 단순성, 성능, 자동 통행 도구, 사용하기 쉬운 과도 시스템, 지령, 플러그 등 작은 삶의 질 개선으로 반응한다.
그렇다면 이 두 세계가 가장 큰 역할을 할 수 있도록 하는 것은 어떨까?React에서 Vue의 혜택을 받는다는 것은 React를 Vue로 바꾼다는 뜻이기 때문에 이것은 옵션이 아니다.그렇다면 Vue에서는 TypeScript와 JSX를 어떻게 사용합니까?
Vue는 사용자 정의 템플릿 구문과 SFCs(단일 파일 구성 요소)에 크게 의존합니다.그러나 그것도 매우'편견이 없다'고 해서 사용자에게 같은 일을 하는 많은 방법을 제공했다.이것은 JSX, 심지어 TSX(JSX와 TypeScript)를 사용하는 것을 포함한다!슬프게도, 당신이 많은 일을 잘 할 때, 당신은 보통 한 가지 일을 잘 할 수 없다.Vue 2의 TSX 지원을 통해 이 점을 보여 드리겠습니다.

Vue 2 TSX 지원

순수 JSX부터 시작합시다.Vue 2 문서를 빠르게 검색하면 following results이 제공됩니다.

물론 많지 않지만, 이것이 우리가 필요로 하는 것일 수도 있습니까?이 링크는 GitHub README으로 리디렉션되며 필요한 Babel 플러그인 설치와 JSX 및 기타 Vue 기능의 일반적인 사용법에 대해 자세히 설명합니다.
우선 필요한 의존항을 추가합니다. (제가 여기서 사용하는 것은 실입니다.)

yarn add --dev @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

바베타 구성:

module.exports = {
  presets: ["@vue/babel-preset-jsx"],
};

이제 행운이 있다면 코드로 뛰어들어 JSX를 작성할 수 있을 것입니다.만약 네가 없다면, 너는 길에서 약간의 실수를 만날 것이다.대부분의 문제는 Babel 플러그인의 GitHub issues을 찾아보거나 다른 곳을 검색하여 쉽게 해결할 수 있습니다.그러나 Vue의 인기에 비해 이 주제에 대한 자원은 매우 제한적이다.
마지막으로 Vue JSX 코드를 작성하기 시작하면 여기서부터 매우 좋을 것입니다.당신의 JSX는 SFC와 호환되어야 합니다. 심지어 components 필드를 사용해서 일을 할 필요가 없습니다.

import HelloWorld from "./components/HelloWorld.vue";

export default {
  render() {
    return (
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" width="25%" />
        <HelloWorld msg="Hello Vue in CodeSandbox!" />
      </div>
    );
  },
};

타자 원고

JSX가 있으면 TypeScript를 사용하여'J'를'T'로 바꿀 수 있습니다!이전과 같은 방법으로 먼저 TypeScript를 개별적으로 설정합니다.
현재, Vue 2 문서에는 TypeScript 지원을 위한 whole page이 있기 때문에, 나는 이에 대해 불평하지 않을 것이다.구성 프로세스, 고려 사항, Vue에서 TS를 사용하는 방법에 대해 자세히 설명합니다("unopinionation"- 기억하십니까?)
TS와 Vue를 결합하는 데는 두 가지 주요 방식이 있는데 그것이 바로 기본 방식과'클래스 기반'방식이다.
'클래스 기반' 방법에 대해 나는 내가 결코 좋아하지 않는다는 것을 인정해야 한다.내가 최근에'함수식'프로그래밍을 더 좋아했기 때문일 수도 있고, ES 장식을 좋아하지 않기 때문일 수도 있다.내게는 너무 실험적이며, TypeScript에서는 다른 모든 '성숙' 기능과 같은 자동 완성 기능을 제공하지 않는다.어쨌든, whole site은 '클래스 기반' 의 Vue 구성 요소와 TypeScript와의 사용을 위한 것이기 때문에, 관심이 있으면 언제든지 보십시오.
기본적인 방법은 부품 대상을 Vue.extend()에 포장하면 된다.당신은 여전히 각각 render(), PropType<T>과 당신이 선택한 유형을 사용하여 도구, VNode 방법과 모든 계산 속성을 주석해야 합니다.

import Vue, { PropType, VNode } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default Vue.extend({
  props: {
    message: [String, Function] as PropType<string | (() => string)>,
  },
  render(): VNode {
    return (
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" width="25%" />
        <HelloWorld
          msg={typeof this.message === "string" ? this.message : this.message()}
        />
      </div>
    );
  },
});

위의 코드 세그먼트는 이전 TypeScript 코드 세그먼트를 개편한 것입니다.나는 JSX를 떠났지만, 그것은 몇 가지 문제가 있어서, 나는 토론할 것이다.그 전에 TypeScript가 *.vue 파일을 가져올 때 충돌하지 않도록 하기 위해 '틈새 채우기' 파일을 언급하고 싶습니다.

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

루트 폴더에 있는 *.d.ts 파일의 TS 프로젝트의 include 디렉토리에 있거나 tsconfig.json types 속성에 직접 지정됩니다.
그러나 이전에 TypeScript 선언 파일을 사용한 적이 있는 경우 위의 패드가 얼마나 결함이 있는지 알 수 있습니다.이를 통해 TS는 *.vue개의 SFC를 받아들일 것이지만 일반적인 Vue 속성을 제외하고는 유형이 안전한 것은 없다.도구, 계산, 방법 따위는 없어 - 아무것도 없어!어쩔 수 없어.코드 편집기/IDE에서 자동 완성 기능을 얻을 수 있지만, 이것은 코드 편집기/IDE에서 일부 수정이 있었기 때문입니다. '순수한 유형 스크립트' 가 없기 때문입니다.

TSX 콤보

보아하니 JSX와 TypeScript 설정을 조합하면 TSX가 준비되어 있을 것 같다.슬프게도 일은 결코 그렇게 간단하지 않다.
Vue의 JSX 타자에 적응하기 위해서는 더 많은 패드가 필요할 것이다.다음은 이렇게 하면 된다.

import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

tsconfig.json을 jsx으로 설정하여 ”preserve”을 조정해야 합니다.이것은 TS와 관련된 처리가 JSX 문법에 닿지 않도록 하여 Babel에 안전하게 도착하여 정확하게 처리할 수 있도록 합니다. (설정에 아무런 오류나 문제가 없다는 전제 조건)
자, 이제 너는 가야 해!최고의 Vue TSX 경험을 누리세요.우리 얘기 좀 하자.
"Vue 2 TSX의 일반적인 설정은""구현하는 방법""을 보여주기 위한 것이 아닙니다."이것은 너에게 전체 과정의 결함을 보여주기 위해서다.물론 기존 프로젝트나 샘플 파일을 변환할 때 유용할 수 있지만, 대부분의 경우 Vue CLI과 적합한 플러그인이나 설정 없는 귀속기 (예: Parcel 또는 Poi) 를 사용하면 된다.그러나 이것은 너무 많은 잠재적인 설정 문제나 깊이 있는 문서가 부족하다는 것을 해결할 수 없다.더 중요한 것은 이 모든 방법들이 React에서 알 수 있는 것처럼 당신에게 정확한 TSX 체험을 가져다 주지 않는다는 것이다.

편집 지원

체험하면 어떤 거예요?한동안 그것을 연구한 후에, 나는 그것이 나쁘다는 것을 인정해야 한다.편집자의 경우 VS 코드와 WebStorm은 단 두 명의 유저만 계산할 수 있다.Vetur extension에서 Vue를 사용했습니다.그러나 이것은 중요하지 않다. 왜냐하면 이 확장은 주로 중국증권감독위원회의 지지에 집중되기 때문이다. (이 방면에서도 부족하다.)Vetur for SFCs보다 효과가 훨씬 좋은 VueDX extension이 하나 더 있는데, 이것은 JSX/TSX 지원을 완전히 파괴했기 때문에 나는 그것을 사용하지 않을 수 없었다.
현재 두 편집자 모두 가까워서 웹스토어가 조금 앞서고 있다.도구의 자동 완성은 기본적으로 존재하지 않으며, 구성 요소에서 작업할 때 모든 도구가 자동으로 완성된다.this과 관련된 상호작용은 명중 또는 미명중이지만 웹스토어에서는 일반적으로 더 좋다.

Vue tsx 지원

지금 문제가 있는 곳에 해결 방안이 있다.Vue 2 TSX 지원은 vue-tsx-support이라는 지원 라이브러리입니다.이것은 (주로) 유형, 강제 변환 함수, 유틸리티 등만 포함하는 TS 라이브러리로 Vue 구성 요소를 정확하게 입력하고 TSX와 함께 사용하도록 하기 위한 것이다.여기서는 상세하지 않습니다(GitHub 자체 서술 파일은 매우 깊이가 있음). 이 라이브러리의 사용 예를 보여 드리려고 합니다.

import HelloWorld from "./components/HelloWorld.vue";
import * as tsx from "vue-tsx-support";

interface HelloWorldProps {
  msg?: string;
}

const TypedHelloWorld = tsx.ofType<HelloWorldProps>().convert(HelloWorld);

export { TypedHelloWorld as HelloWorld };

ofType()과 convert() 변환 함수를 사용하여 모든 자동 완성 기능을 갖춘 안전한 Vue 구성 요소를 얻을 수 있습니다.
이렇게 해서 vue-tsx-support 라이브러리는 현재, 심지어 영원히 Vue 2와 TSX를 결합해서 사용하는 가장 좋은 방법이라고 말하고 싶습니다.물론 이것은 좀 지루하지만, 이러한 설정에서 정확한 TSX 체험을 얻을 수 있는 유일한 방법이다.

Vue 3의 도래.

지금, 네가 읽은 모든 내용을 잊어라. 지금까지, 그것은 중요하지 않기 때문이다.그래, 농담이겠지만 Vue 3이 현재'안정 테스트 버전'에 놓이면서 Vue TSX 그룹은 Vue 분야에서 더욱 두드러질 것이다.
솔직히 이것이 제목의 의미다.제 제품 CodeWrite(개발자 블로그 도구)을 개발할 때 저는 Vue 3을 한동안 널리 사용했습니다.예, TSX에서 확실히 사용했습니다. 개발 경험은 완벽합니다!
Vue3은 현재 TypeScript로 작성된 것으로 지원을 크게 강화했고 새로운 합성 API가 생겨서 this의 문제가 마침내 해결된 것 같다.물론 TS와 JSX 문서는 선명성에 큰 변화가 없지만 전체 설치 과정은 그리 번거롭지 않은 것 같다.

설정 및 구성

간단히 말해, jsx: “preserve”을 tsconfig.json에 다시 추가하고 Babel 구성을 변경해야 합니다(이번에는 a plugin).

module.exports = {
  plugins: ["@vue/babel-plugin-jsx"],
};

하지만 이번엔 이렇게!현재 TSX에서 Vue 구성 요소를 작성할 수 있으며 VS 코드와 WebStorm에서 강력한 자동 완성 기능을 갖추고 있습니다!
예제 구성 요소(TSX+Composition API)를 보십시오.

import Vue from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default Vue.extend({
  props: {
    message: [String, Function] as PropType<string | (() => string)>,
  },
  setup(props) {
    return () => {
      const message = props.message;
      return (
        <div id="app">
          <img alt="Vue logo" src="./assets/logo.png" width="25%" />
          <HelloWorld msg={typeof message === "string" ? message : message()} />
        </div>
      );
    };
  },
});

SFC를 작동시키려면 쿠션이 필요합니다. 쿠션의 자동 완성은 완벽하지 않을 수도 있지만, Vue 3에서 이런 설정을 사용합니다. 왜 쿠션을 사용하는지 모르겠습니다.

declare module "*.vue" {
  import { ComponentOptions } from "vue";

  const component: ComponentOptions;

  export default component;
}

마찬가지로 모든 사용 가능한 도구에 있어서 설정은 큰 문제가 없을 것이다.Vite은 Vue 핵심 팀에서 직접 나온 눈에 띄는 신인이다.TypeScript, JSX, and TSX을 지원하는 초고속 ESM 워크플로우

과도해야 합니까?

지금 당장 Vue 3에 뛰어들고 싶은지 여부는 당신 자신에게 달려 있다.내가 이렇게 한 것은 나에게 있어서 크게 개선된 TypeScript와 JSX 지원이 가치가 있기 때문이다.또한 새로운 합성원료약은 이전 원료약(원료약 선택)보다 훨씬 낫고, 리액트의 반응성 모델이 아닌 베일의 반응성 모델을 선호한다고 생각한다.
그러나 Vue3은 약 breaking changes으로 인해 앞으로 호환되지 않기 때문에 생태계가 훨씬 작다.이것은 나에게 있어서 그리 큰 문제가 아니지만, 나는 많은 사람들에게 아마도 그럴 수 있다는 것을 안다.다시 한 번 말하지만, 너의 선택.

기대해주세요!

그래서 Vue 3에 대한 나의 경험에 따르면 당신은 더 많은 흥미진진한 새로운 내용을 얻을 수 있을 것이다.최신 정보를 확인하려면 Facebook으로 전화하거나 my newsletter으로 문의하십시오.또한 자신의 기술 블로그(Vue 3 기능 보기)에 관심이 있다면 CodeWrite을 무료로 시도해 보십시오!
당신의 읽기와 즐거운 인코딩에 감사 드립니다!