フロントエンド開発者の取材に備えてBridding実習プロジェクトを見直しています...TypeScriptを使った内容を発見して整理しながら、面接前に頭を下げているTILです.

TypeScript?

JavaScriptに基づいて静的タイプ構文を追加するプログラミング言語.

特長

1)コンパイル言語、スタティックタイプ言語
JavaScriptは、実行時にエラーを発見できる動的タイプの割り込み言語です.
対照的に、タイプスクリプトは、コンパイラまたはラベルを介してJavaScriptコードに変換される静的タイプのコンパイル言語です.

コード作成フェーズでは、エラーを決定するためにタイプをチェックし、タイプを事前に決定することができるため、実行速度が速い.

段は、コードを書くたびにタイプを決めるので面倒で、コード量が増え、コンパイル時間が長い.

2)オブジェクト向けプログラミングサポート
クラス、インタフェース、継承、モジュールなどのオブジェクト向けのプログラミングモードを提供します.

タイプスクリプトを使用する理由

1)高度なコードナビゲーションとデバッグ
TSは,コードに目的を示し,目的のタイプに合わない変数や関数にエラーを発生させ,エラーを予め排除する.コードの自動完了または実行前のフィードバックを提供することで、作業と同時にデバッグを行い、生産性を向上させることができます.(研究によると、TSはJSの15%のエラーを検出できることが明らかになった)

リアクターとの互換性

タイプスクリプトは、CRAに簡単なオプションを追加するだけで使用できます.
参考資料:https://www.samsungsds.com/kr/insights/TypeScript.html

interface

interface Window{
	title: string
}

interface Window{
	ts: TypeScriptAPI
}

const src = `const a = "hello World"`;
window.ts.transpileModule(src, {});

インタフェースは通常、変数、関数、クラスで使用できるタイプチェックに使用されます.
インタフェースとして実装される関数、変数、クラスは、インタフェースを遵守する必要があります.
インタフェースはextendsキーワードを使用してインタフェースまたはクラスを継承できます.

Type alias

type Window = {
	title: string
}

type Window ={
	ts: TypeScriptAPI
}

//Error: Duplicate Idenrifier 'Window'.

タイプ別名は、元の値、Unionタイプ、Tupleなどのタイプとして指定できます.

Type vs Interface

1.宣言されたタイプの拡張性

Type aliasは宣言時にその内容を変更することはできないが,逆にインタフェースは宣言後に他の場所でコンテンツを拡張することもできる.

2.ユーティリティ関数のみでタイプを作成できます

Typeは、タイプスクリプトが提供するユーティリティ関数を使用して、既存のタイプまたはインタフェースを使用して新しいタイプを作成できます.

interface Todo{
	title: string;
    description: string;
    completed: boolean;
}

type TodePreview = Pick<Tode, 'title' | 'completed'>;

したがってtypeは、新しいオブジェクトを作成したり、新しいオブジェクトを合成したりするたびによく起こることである関数プログラミングに適しています.

3.カテゴリに適用されるタイプを作成し、インタフェースのみを連結宣言に書き込む

インタフェースは、オブジェクトの指定だけでなく、クラスのタイプの指定にも使用されます.クラスまたはオブジェクトのメソッドに再ロードすることもできます.したがって,この方式は大量のクラス,継承クラス,拡張クラスを生成するオブジェクト向けプログラミング方式に非常に適している.

反応の中で?

反応器では、インタフェースが継承および拡張の面でより高い優先度を有するため、インタフェースが使用される.
type aliasはunionタイプとtupleタイプが必要な場合にのみ使用されます.

tupleタイプ:値のタイプは異なる配列を表すことができる.

let tuple: [string, number];

unionタイプ:or演算子(||)と同様に、「AまたはB」を表すタイプ

function log(text: string | number){
 ...
}

参考資料:https://codingmoondoll.tistory.com/entry/Type-vs-Interface