Nuxt.jsのComposition APIで学ぶ、TypeScriptのジェネリクスについて

4963 ワード
TypeScirpt 初心者 Vue.js nuxt.js 初心者 テキストリンク

ジェネリクスとは

「抽象化されたデータ型」を表現する機能です。
同じようなコードを別の型だからという理由で、複数書いているときなどに使います。

では、実際にサンプルコードを書いていきます。

ジェネリクスの簡単な具体例

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>をメソッドに与え、実際に利用されるまで型が確定しないメソッドを作成しています。

これで1つのコードを書くだけで使い回すことができます！