Vue에서 TypeScript 사용하기: Data

(참고로 Tool은 Webstorm을 썼다!!!)

---

type.ts에 아래와 같이 코드를 작성했다. interface를 이용해 타입을 지정한 코드이다.

export interface human {
  name: string;
  likeNumber: number;
  isAdult: boolean;
};

 

적당히 person.vue에 아래와 같이 코드를 작성했다.

일단 중요한 것은 human을 import하는 부분이다.

TypeScript에서는 @가 사용불가능하므로 ..과 같이 경로를 적어줘야 한다.

그리고 TypeScript를 이용할 때는 script tag의 lang 속성에 ts라고 값을 지정해줘야 한다.

가장 중요한 data 부분을 살펴보자!!!!

일단 기존에 Type Customizing 글에서 배운 방법은 '변수명: 타입명 = {}' 이런 식이었다.

하지만 data와 함께 쓸 때에는 문법에 의해 ':' 뒤에 값이 나와야 한다.

따라서 기존에 배운 방식으로는 쓰지 못하고 '변수: {} as 타입'과 같이 사용하게 된다.(*******)

<template>
  <div>
    What's your name? <input type="text" v-model="person.name" />
    <h1>Hello! {{ person.name }}</h1>
    <h2>You like the number {{ person.likeNumber }}</h2>
    <h2>You are {{ person.isAdult ? 'adult' : 'child' }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// eslint-disable-next-line
import { human } from '../type'
export default defineComponent({
  data() {
    return {
      person: {
        name: 'code-mania',
        likeNumber: 4,
        isAdult: true
      } as human
    }
  }
})
</script>

자 이제 이걸 App.Vue에 적당히 추가해주면 잘 돌아가는 것을 볼 수 있다.

적당히 프로그램을 실행시켜주면 다음과 같이 생겼다.

---

잘 돌아가는 것도 확인했겠다!!! 이렇게 타입을 지정해줬을 때 장점을 알아보자~~~~

export 부분에 setAge라는 메서드를 추가하자!!!

export default defineComponent({
  data() {
    return {
      person: {
        name: 'code-mania',
        likeNumber: 4,
        isAdult: true
      } as human
    }
  },
  methods: {
    setAge() {
      this.person.age = 5
    }
  }
})

그리고나서 실행하면 에러가 나는 것을 볼 수 있다?!?!??!

바로 human interface에는 없는 age라는 속성을 사용하기때문이다.

 

---

그러나!!!!ㅡㅡㅡ setAge 메서드를 지우고 template 부분을 이렇게 고쳐보자!!!!

이게 잘 동작해버린다~~ age는 human type에 없는데도 불구하고..... ㅠㅠ 너무 슬프다

(VS code같은 경우 VueDx라는 extension을 통해서 해결이 가능하지만, WebStorm은 잘 모르겠다....)

앞으로 더 공부해야 할 거 같다~~~~

<template>
  <div>
    What's your name? <input type="text" v-model="person.name" /> 
    What's your age? <input type="text" v-model="person.age" />
    <h1>Hello! {{ person.name }}</h1>
    <h2>You are {{ person.age }} years old!</h2>
    <h2>You like the number {{ person.likeNumber }}</h2>
    <h2>You are {{ person.isAdult ? 'adult' : 'child' }}</h2>
  </div>
</template>