[TIL] 20211030 typescript + vue 타입 정의

타입스크립트 강의 듣기

1. vue 에서 v-model은 한국어가 바로 반영이 안된다.

한국어를 바로 바인딩하려면 @input이벤트에 메소드를 걸어주고

:value로 값을 연결해서 메소드에서 값을 바꾸는 방법을 쓰면 된다.

 

 

2. ts에서 input타입 정의

handleInput(event: InputEvent) {
      const eventTarget = event.target as HTMLInputElement;
      this.$emit("input", eventTarget.value);
      console.log(eventTarget);

 

3. 메소드 파라미터 타입 정의

//App.vue
<template>
  <div>
    <h1>Vue Todo with Typescript</h1>
    <TodoInput :item="todoText" @input="updatTodoText" @add="addTodoItem" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import TodoInput from "./components/TodoInput.vue";

export default Vue.extend({
  components: {
    TodoInput,
  },
  data() {
    return {
      todoText: "",
    };
  },
  methods: {
    updatTodoText(value: string) {
      this.todoText = value;
    },
    addTodoItem() {
      const value = this.todoText;
      localStorage.setItem(value, value);
      this.initTodoText();
    },
    initTodoText() {
      this.todoText = "";
    },
  },
});
</script>