window.pipedriveLeadboosterConfig={です。 ベース:'leadbooster-chat.pipedrive.com'、 companyId:11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2、 } ;(function () { var w = window もし (w.LeadBooster) {なら console.warn('LeadBooster already exists') } else { w.LeadBooster = { {. q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 関数 (n) { { this.q.push({ t: 'o', n: n, h: h }) this.q.push({ t: 't', n: n }) }, } } })() TypeScript~The Codestのジェネリック医薬品
The Codest
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 産業
    • フィンテック&バンキング
    • E-commerce
    • アドテック
    • ヘルステック
    • 製造業
    • 物流
    • 自動車
    • アイオーティー
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
戻る矢印 戻る
2020-05-26
ソフトウェア開発

TypeScriptのジェネリック医薬品

マテウス・スタニウク

ジェネリックスは、単一の型ではなく、複数の型を扱う再利用可能なコードの断片を提供する。ジェネリックスは、型を変数として扱い、関数のパラメータと同様に使用時に指定する方法を提供する。

ジェネリックは、関数(ジェネリック関数の作成)、クラス(ジェネリッククラスの作成)、インターフェース(ジェネリックインターフェースの作成)と組み合わせて使用することができます。

基本的な使い方

ジェネリックの最も一般的な使い方は配列の宣言である:

const myArray: string[];

一見したところ、それほど特別なことでもない。 my配列 を文字列の配列として宣言しても、ジェネリック宣言と同じである:

const myArray:Array;

物事を明確に保つ

このバニラJSの関数をTypeScriptに移植するにはどうしたらいいか:

関数 getPrefiledArray(filler, length) { { (new Array(length)).fill(filler).
    return (new Array(length)).fill(filler);
}

この関数は、指定された量の フィラーだから 長さ は 番号 の配列を返します。 フィラー - しかし、フィラーとは何だろう?この時点では何でもいい。 いずれも:

function getPrefiledArray(filler: any, length: number): any[] {.
    return (new Array(length)).fill(filler);
}

使用 いずれも 文字どおり何でも渡せるので、定義にある「単一の型ではなく複数の型を扱う」ことは完全にカバーされている。 フィラー 型と戻り値の型を定義する。この場合、ある共通のものを返したいので、この共通のものを明示的に 型パラメータ:

function getPrefiledArray(filler: T, length: number):T[] {
    return (new Array(length)).fill(filler);
}

のように使用する:

const prefilledArray = getPrefiledArray(0, 10);

一般的な制約

別の、おそらくより一般的なケースを見てみよう。なぜ関数で型を使うのだろうか?私にとっては、関数に渡される引数が、自分が操作したい何らかのプロパティを持つことを保証するためだ。

もう一度、単純なバニラJS関数をTSに移植してみよう。

関数 getLength(thing) {
    thing.lengthを返す;
}

私たちは自明ではない難問を抱えている。 長さ というようなことを最初に考えるかもしれない:

関数getLength(thing: typeof Array):number { {.
    thing.lengthを返す;
}

文脈によっては正しいかもしれないが、全体的には少し汎用的である。複数の型の配列で動作するが、そのモノが常に配列であるべきなのかどうかがわからない場合はどうだろう。この場合、オブジェクトのプロパティを定義できる構造体、つまりインターフェースに、そのモノに共通するプロパティを集めなければならない:

インタフェース IThingWithLength {
  length: 数;
}

を使うことができる。 IThingWithLength インターフェイスのタイプとして もの パラメータが必要だ:

function getLength(thing: IThingWithLength):number { {.
    thing.lengthを返す;
}

率直に言って、この単純な例では全く問題ないが、もしこの型を汎用的なものに保ち、最初の例のような問題に直面しないようにしたいのであれば、次のように使うことができる。 一般的な制約:

function getLength(thing: T):number { 次のようになります。
    thing.lengthを返す;
}

そしてそれを使う:

interface IBananaPeel { インターフェース バナナピール
  厚さ:数値
  長さ:数値;
}

const bananaPeel:IBananaPeel = {thickness: 0.2, length: 3.14};
getLength(bananaPeel);

使用 拡張 を保証する。 T によって定義されるプロパティが含まれます。 IThingWithLength.

一般クラス

ここまではジェネリック関数を扱ってきたが、ジェネリックが輝く場所はそれだけではない。

まず、バナナの束をバナナ・バスケットに入れてみよう:

クラス Banana {
  コンストラクタ(
    public length: 数、
    public color: string、
    public ionizingRadiation: 数
  ){}
}

class BananaBasket { バナナバスケット
  private bananas: Banana[] = [];

  add(banana: バナナ): void { }.
    this.bananas.push(banana);
  }
}

const bananaBasket = new BananaBasket();
bananaBasket.add(new Banana(3.14, 'red', 10e-7));

では、同じタイプで異なるものを入れる汎用バスケットを作ってみよう:

クラス Basket {
  private stuff:T[] = [];

  add(thing: T): void { この.stuff.push(thing)
    this.stuff.push(thing);
  }
}

const bananaBasket = new Basket();

最後に、私たちのバスケットが放射性物質の容器であり、放射性物質を含む物質しか保管できないと仮定しよう。 電離放射線 財産である:

インターフェース IRadioactive {
  ionizingRadiation: number;
}

class RadioactiveContainer { 以下のようなものがあります。
  private stuff:T[] = [];

  add(thing: T): void { {.
    this.stuff.push(thing);
  }
}

汎用インターフェース

最後に、私たちの知識を総動員して、ジェネリック・インターフェースを使った放射能帝国を作ってみよう:

// コンテナの共通属性を定義する
インターフェース IRadioactive {
  ionizingRadiation: number;
}


// 放射性物質を定義する
interface IBanana extends IRadioactive { 以下のように定義します。
  length: 数
  color: 文字列;
}

// 放射性でないものを定義する
インターフェース IDog {
  weight: 数字;
}

// 放射性のものだけを入れるコンテナのインターフェイスを定義する
interface IRadioactiveContainer { 以下のように定義します。
  add(thing: T): void;
  getRadioactiveness():数値;
}

// 放射性コンテナ・インターフェースを実装するクラスを定義する
class RadioactiveContainer implements IRadioactiveContainer { } // 放射性コンテナインターフェイスを実装するクラスを定義する。
  private stuff:T[] = [];

  add(thing: T): void { この.stuff.push(thing)
    this.stuff.push(thing);
  }

  getRadioactiveness():数値{。
      return this.stuff.reduce((a, b) => a + b.ionizingRadiation, 0)
  }
}

// ERROR!型 'IDog' は制約 'IRadioactive' を満たしていません。
// そして、犬を放射性コンテナの中に格納するのはちょっと残酷だ。
const dogsContainer = new RadioactiveContainer();

// すべて順調!
const radioactiveContainer = new RadioactiveContainer();

// 放射性廃棄物の分別を忘れずに - バナナだけ別のビンを作る。
const bananasContainer = new RadioactiveContainer();

以上です!

関連記事

ソフトウェア開発

将来を見据えたウェブ・アプリケーションの構築:The Codestのエキスパート・チームによる洞察

The Codestが、最先端技術を駆使してスケーラブルでインタラクティブなウェブアプリケーションを作成し、あらゆるプラットフォームでシームレスなユーザー体験を提供することにどのように秀でているかをご覧ください。The Codestの専門知識がどのようにデジタルトランスフォーメーションとビジネス...

ザ・コデスト
ソフトウェア開発

ラトビアを拠点とするソフトウェア開発企業トップ10社

ラトビアのトップソフトウェア開発企業とその革新的なソリューションについて、最新記事でご紹介します。ラトビアの技術リーダーたちがあなたのビジネスをどのように向上させるかをご覧ください。

thecodest
エンタープライズ&スケールアップ・ソリューション

Javaソフトウェア開発の要点:アウトソーシングを成功させるためのガイド

outsourcingのJavaソフトウェア開発を成功させるために不可欠なこのガイドを読んで、The Codestで効率性を高め、専門知識にアクセスし、プロジェクトを成功に導きましょう。

thecodest
ソフトウェア開発

ポーランドにおけるアウトソーシングの究極ガイド

ポーランドのoutsourcingの急増は、経済、教育、技術の進歩がITの成長とビジネス・フレンドリーな環境を促進していることによる。

ザ・コデスト
エンタープライズ&スケールアップ・ソリューション

IT監査ツール&テクニック完全ガイド

IT監査は、安全かつ効率的で、コンプライアンスに準拠したシステムを保証します。その重要性については、記事全文をお読みください。

The Codest
ヤクブ・ヤクボヴィッチ CTO & 共同創設者

ナレッジベースを購読して、IT部門の専門知識を常に最新の状態に保ちましょう。

    会社概要

    The Codest - ポーランドに技術拠点を持つ国際的なソフトウェア開発会社。

    イギリス - 本社

    • オフィス 303B, 182-184 High Street North E6 2JA
      イギリス、ロンドン

    ポーランド - ローカル・テック・ハブ

    • ファブリチュナ・オフィスパーク、アレハ
      ポコジュ18、31-564クラクフ
    • ブレイン・エンバシー, コンストルクトースカ
      11, 02-673 Warsaw, Poland

      The Codest

    • ホーム
    • 会社概要
    • サービス
    • Case Studies
    • ノウハウ
    • 採用情報
    • 辞書

      サービス

    • アドバイザリー
    • ソフトウェア開発
    • バックエンド開発
    • フロントエンド開発
    • Staff Augmentation
    • バックエンド開発者
    • クラウドエンジニア
    • データエンジニア
    • その他
    • QAエンジニア

      リソース

    • 外部ソフトウェア開発パートナーとの協力に関する事実と神話
    • 米国から欧州へ:アメリカの新興企業がヨーロッパへの移転を決断する理由
    • テックオフショア開発ハブの比較:テックオフショア ヨーロッパ(ポーランド)、ASEAN(フィリピン)、ユーラシア(トルコ)
    • CTOとCIOの課題は?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • ウェブサイト利用規約

    著作権 © 2025 by The Codest。無断複写・転載を禁じます。

    jaJapanese
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek jaJapanese