설정

Vue CLI 3에서 템플릿 생성

먼저 vue create 명령으로 템플릿을 생성합니다.

$ vue create {{ YOUR_APP_NAME }}

Babel

TypeScript

위의 두 항목은 반드시 체크합니다.

설치

vue-tsx-support 설치

vue-tsx-support를 설치합니다.
이미 Vue.js에서 tsx를 사용할 수있는 라이브러리가 존재했습니다.

$ yarn add vue-tsx-support

개발

구성 요소 만들기

src/components/HelloWorld.vue 삭제
새 HelloWorld.tsx를 만듭니다.

App.vue

App.vue HelloWorld 구성 요소의 호출 부분을 수정합니다.

import HelloWorld from './components/HelloWorld.vue'

↓

import HelloWorld from './components/HelloWorld'

확장자.tsx는 더 이상 필요하지 않습니다.

HelloWorld.tsx

작성한 HelloWorld.tsx 에 기술해 갑니다.

HelloWorld.tsx

import * as tsx from 'vue-tsx-support';
import { VNode } from 'vue';

export default tsx.component({
  name: 'HelloWorld',
  render(): VNode {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    );
  },
});

props

그런 다음 App.vue에서 props로 전달된 msg를 표시합니다.

HelloWorld.tsx

export default tsx.component({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  render(): VNode {
    return (
      <div>
        <h1>{this.msg}</h1>
      </div>
    );
  },
});

다른 f

render(): VNode {
  return (
    <div>
      {this.isShow && <h2>Hi {this.member.name}</h2>}
    </div>
  );
}

this.isShow가 true이면 후속 <h2> 태그가 표시됩니다.

표시, 숨기기의 전환이 아니고, 문장을 나누고 싶은 경우는 삼항 연산자를 사용합니다.

render(): VNode {
  return (
    <div>
      {this.isMember
        ? <h2>Hi {this.member.name}</h2>
        : <h2>Hi No Name User</h2>}
    </div>
  );
}

for

render(): VNode {
  return (
    <div>
      {Object.keys(this.member).map((key: string) => (
        <p>{key}: {this.member[key]}</p>
      ))}
    </div>
  );
}

CSS in JS

render(): VNode {
  return (
    <div>
      <h1 style={styles.msg}>{this.msg}</h1>
    </div>
  );
}

const styles = {
  msg: {
    fontSize: '24px',
    color: 'red',
  },
};

전체

HelloWorld.tsx

import * as tsx from 'vue-tsx-support';
import { VNode } from 'vue';

interface IData {
  isMember: boolean;
  member: {
    [key: string]: string | number,
    name: string,
    age: number,
    gender: string,
  };
}

export default tsx.component({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  data(): IData {
    return {
      isMember: true,
      member: {
        name: 'Caroline',
        age: 22,
        gender: 'female',
      },
    };
  },
  render(): VNode {
    return (
      <div>
        <h1 style={styles.msg}>{this.msg}</h1>
        {this.isMember
            ? <h2>Hi {this.member.name}</h2>
            : <h2>Hi No Name User</h2>}
        {Object.keys(this.member).map((key: string) => (
          <p>{key}: {this.member[key]}</p>
        ))}
      </div>
    );
  },
});

const styles = {
  msg: {
    fontSize: '24px',
    color: 'red',
  },
};

마지막으로

Vue CLI와 vue-tsx-support 덕분에 Vue.js + tsx 환경을 쉽게 만들었습니다.
저자에게 감사드립니다.
tsx, if 또는 for는 선호하는 문제 일 수 있지만, 합니다.

쉽게 도입할 수 있으므로 한 번 시도해 보시기 바랍니다.

이상