Honmushi blog
TypeScriptを学ぶ ジェネリックとクラス関連2019/10/24

TypeScriptを学ぶ ジェネリックとクラス関連

TypeScriptを学ぶ 型定義の基礎の続きです。 クラス関連の機能が主な内容です。

TypeScriptの基礎的なことを学ぶので、忘れないように残していきます。 目標としては自分が作っているReactNative製のアプリや、Gatsbyを利用しているこのブログに活かしていく予定です。

概要

  • ジェネリック
  • インターフェイスの実装
  • クラス
  • 名前空間の利用

ジェネリック

プログラミングの際には型が決められない、関数実行時にはデータ型が決まっている。 anyでもいいけども、例えば「引数と戻り値の型は一致してほしい」となどの場合に動的に任意のデータ型を指定する仕組み

// <T>の形式で指定、T以外の任意の文字でも良い
function getData<T>( value : T ) : T {
    処理
}

// 関数呼び出しの際にデータ型numberで指定
data1 = getData<number>(1);
// データ型booleanで利用
data2 = getData<boolean>(true);

クラスでのジェネリック

クラスでもジェネリックは利用可能

// class クラス名<T> {
//     プロパティ名 : T ;
//     メソッド名 ( 引数名:T ): T {
//         処理
//     }
// }

// let 変数名 = new クラス名<データ型>();

複数定義して交差型も可能

function getData<T,U>( value : T , param : U ) : T & U {
    処理
}

非同期処理のジェネリック

Promiseを返す非同期処理の返り値にも型を定義可能。 resolveで返される戻り値のデータ型を定義する。

// function 非同期関数名 (引数) {
//     return new Promise<データ型>((resolve,reject) => {
//         非同期実行文
//         if ( 条件 ) {
//            resolve(戻り値);
//         }else{
//            reject(エラー);
//         }
//     });
// }

// async function Exec(){
//     let data1 = await 非同期関数名(引数1)
//     let data2 = await 非同期関数名(引数2)
// }

インターフェイスの実装

クラスのデータ型のみを定義できる。クラスに持たせるプロパティとメソッドの組み合わせに名前とデータ型を定義できます。 異なる処理を共通のインターフェースとして取扱いやすくする仕組。

// インターフェイスの定義
// interface インターフェイス名{
//    プロパティ:データ型;
//    メソッド(引数:引数のデータ型): 戻り値のデータ型;
// }

// インターフェイスの実装
// let 変数名 : インターフェイス名;
// function 関数名(引数: インターフェイス名) {};

// クラスで実装
// class クラス名 implemets インターフェイス名 {
//     プロパティ名:データ型;
//
//     メソッド(引数:引数のデータ型):戻り値のデータ型 {
//         処理
//     }
// }

// 複数のインターフェイスを実装
// class クラス implemets インターフェイス1,インターフェイス2 {}

インターフェイスも継承できる

クラスのようにインターフェイスも継承して定義することが出来ます。 元の定義を引き継ぐことが出来ます

// interface インターフェイス1 extends インターフェイス2{
//     プロパティ: データ型;
// }

クラス

abstract クラス

abstructが指定されたクラスは継承可能だが、そのままnewでオブジェクトを作成できません。 メソッドのみ実装していて、プロパティは継承先で実装する時などにりようできます。

abstruct class Name {

}

// 以下はエラー
let data = new Name();

メソッドのオーバーライド

jsとは異なり引数などのチェックが入ります。継承したメソッドをオーバーライドする場合は、元のメソッドと同じ名前、引数、戻り値のデータ型が一致しないとオーバーライドできない。

保護 public privete protected

他の言語では利用できる機能です。

  • publicがクラスの外でも利用が可能
  • privateとprotected はクラスの外から利用不可
  • protectedは継承したクラスで利用可能
  • privateは継承したクラスでも利用不可

読み取り専用readonly

クラスのプロパティを参照できるが、変更できないようにする。 コンストラクターでの初期化以外では値の変更を受け付けない。

// public readonly プロパティ: データ型;

名前空間の利用

export などで使われているもの。別の名前空間に分けることで同じ名前のクラスを定義できる。 名前空間外から利用するためにexportの指定が必要。

// namespace 名前空間 {
//     export class クラス名{}
// }

// namespace 名前空間2 {
//     export class クラス名{}
// }

名前空間を別ファイルから利用する

名前空間の前にexportを指定します。

// export namespace 名前空間 {
//    export class クラス名 {}
// }

ほかファイルからの参照

// import * as 参照名 from "./ファイル"

// import {名前空間} from "./ファイル"

おわりに

クラス関連の便利な機能を学びました。他の言語では普通に使えたりするものが多く、これらが利用できるように成るTypeScriptはとても便利なように思います。 ほかの言語からの移行などもやりやすくなりそうです。

基本的にはビルド時にチェックされエラーが出るというものです。エラーを無視してデプロイすれば、保護を無視して実行できるようなものが多いので注意が必要です。

他にも機能があるので、少しずつ読み進めていこうと思います。
https://www.typescriptlang.org/

  • このエントリーをはてなブックマークに追加