Nuxt.js의 Composition API에서 배우는 TypeScript 제네릭에 대해

제네릭스란?

「추상화된 데이터형」을 표현하는 기능입니다.
비슷한 코드를 다른 형식이기 때문에 여러 글을 쓸 때 사용합니다.

그럼, 실제로 샘플 코드를 써 갑니다.

제네릭스의 간단한 구체예

text 도 number 도 인수로 받은 값을 return 로 돌려주고 있을 뿐입니다만, 형태가 다르기 때문에 코드를 나누고 있습니다.

sample.vue

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
export default defineComponent({
  setup() {
    const text = (val: string): string => {
      return val;
    };
    const number = (val: number): number => {
      return val;
    };
  },
});
</script>

이것이 그 밖의 형태이기도 하면 몹시 중복이군요.



그래서 제네릭을 사용합시다!

sample.vue

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
export default defineComponent({
  setup() {
    const option = <T>(val: T): T => {
      return val;
    };

    const text = option<string>('hello');
    const number = option<number>(100);
    const boolean = option<boolean>(false);
  },
});
</script>

위에서는 추상형 인수 <T> 를 메소드에 주어, 실제로 이용될 때까지 형태가 확정하지 않는 메소드를 작성하고 있습니다.

이제 하나의 코드를 작성하는 것만으로 사용할 수 있습니다!