効果的なTypeScript：コードを改善する62の方法

こんにちは住民！Dan Vanderkamの本は、JavaScriptとTypeScriptの経験がすでにある人に最も役立ちます。この本の目的は、ツールを使用するように読者を教育することではなく、彼らが彼らのプロ意識を向上させるのを助けることです。それを読んだ後、TypeScriptコンポーネントがどのように機能するかをよりよく理解し、多くの落とし穴や落とし穴を避け、スキルを伸ばすことができます。リファレンスガイドでは、同じタスクを実行するために言語を使用する5つの異なる方法を示していますが、「効果的な」本では、どちらが優れているか、そしてその理由を説明しています。

本の構造

この本は短いエッセイ（ルール）のコレクションです。ルールはテーマ別のセクション（章）にグループ化されており、関心のある質問に応じて自律的にアクセスできます。



各ルールの見出しにはヒントが含まれているので、目次を確認してください。たとえば、ドキュメントを作成していて、タイプ情報を作成するかどうか疑問がある場合は、目次とルール30（「ドキュメントでタイプ情報を繰り返さないでください」）を参照してください。

この本のほとんどすべての結論は、コード例を使用して示されています。私のように、あなたは例を見て、テキスト部分だけを通過することによって技術的な本を読む傾向があると思います。もちろん、説明をよく読んでいただきたいと思いますが、例では要点を説明しました。



各ヒントを読むと、TypeScriptをより効果的に使用するのに役立つ方法と理由を正確に理解できます。また、何らかの方法で使用できないことが判明したかどうかも理解できます。効果的なC ++の作者であるスコットマイヤーズの例を覚えています。ミサイルソフトウェア開発者は、ミサイルがターゲットに当たったときにプログラムが破壊されたため、リソースリークを防ぐためのアドバイスを怠った可能性があります。JavaScriptで書かれた制御システムを備えたロケットの存在を私は知りませんが、そのようなソフトウェアはジェームズウェッブ望遠鏡にあります。ので注意してください。



各ルールは「MustRemember」ブロックで終わります。それをざっと見てみると、材料の一般的なアイデアを取得し、主要なものを強調することができます。ただし、ルール全体を読むことを強くお勧めします。

抜粋。ルール4.構造タイピングに慣れる

JavaScriptは意図せずにダックタイプになっています。正しいプロパティを持つ値を関数に渡しても、その値をどのように取得したかは関係ありません。彼女はそれを使うだけです。TypeScriptはこの動作をモデル化しますが、検証者の型の理解はあなたの理解よりも広い可能性があるため、予期しない結果が生じることがあります。構造化タイピングのスキルを身に付けることで、実際にエラーが発生している場所をより正確に把握し、より信頼性の高いコードを作成できるようになります。



たとえば、物理ライブラリを使用していて、2Dベクトルタイプがあるとします。

interface Vector2D {
   x: number;
   y: number;
}

その長さを計算する関数を記述します。

function calculateLength(v: Vector2D) {
   return Math.sqrt(v.x * v.x + v.y * v.y);
}

名前付きベクトルの定義を入力します。

interface NamedVector {
   name: string;
   x: number;
   y: number;
}

calculateLength関数は、数値であるxプロパティとyプロパティが含まれているため、NamedVectorで機能します。TypeScriptはこれを理解します：

const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
calculateLength(v); // ok,   5.

興味深いのは、Vector2DとNamedVectorの関係を宣言しなかったことです。また、NamedVectorの代替のcalculateLength実行を記述する必要もありませんでした。TypeScriptタイプシステムは、JavaScriptの実行時の動作（ルール1）をシミュレートします。これにより、NamedVectorは、Vector2Dに匹敵する構造に基づいてcalculateLengthを呼び出すことができます。したがって、「構造タイピング」という表現。



しかし、それは問題を引き起こす可能性もあります。3Dベクトルタイプを追加するとします。

interface Vector3D {
   x: number;
   y: number;
   z: number;
}

ベクトルを正規化する関数を記述します（長さを1に等しくします）。

function normalize(v: Vector3D) {
   const length = calculateLength(v);
   return {
      x: v.x / length,
      y: v.y / length,
      z: v.z / length,
   };
}

この関数を呼び出すと、ほとんどの場合、複数の長さが得られます。

> normalize({x: 3, y: 4, z: 5})
{ x: 0.6, y: 0.8, z: 1 }

何がうまくいかず、TypeScriptがバグを報告しなかったのはなぜですか？



バグは、calculateLengthが2Dベクトルで機能するのに対し、normalizeは3Dで機能することです。したがって、正規化中にzコンポーネントは無視されます。



タイプチェッカーがこれをキャッチしなかったのは奇妙に思えるかもしれません。タイプが2Dベクトルで機能するのに、なぜ3DベクトルでcalculateLengthを呼び出すことが許可されているのですか？

名前付きでうまく機能したものはここで裏目に出ました。 {x、y、z}オブジェクトでcalculateLengthを呼び出しても、エラーはスローされません。したがって、型チェックモジュールは文句を言わず、最終的にバグが発生します。この場合にエラーを検出したい場合は、ルール37を参照してください。



関数を作成するとき、宣言したプロパティによって呼び出されることは容易に想像できますが、それ以外は何もありません。これは「封印された」または「正確な」タイプと呼ばれ、TypeScriptタイプのシステムには適用できません。好むと好まざるとにかかわらず、タイプはここで開かれています。



時々これは驚きにつながります：

function calculateLengthL1(v: Vector3D) {
   let length = 0;
   for (const axis of Object.keys(v)) {
      const coord = v[axis];
                       // ~~~~~~~     "any",  
                       //  "string"    
                       //    "Vector3D"
      length += Math.abs(coord);
   }
   return length;
}

なぜこれが間違いなのですか？axisはVector3Dのvキーの1つであるため、x、y、またはzである必要があります。そして、元のVector3D宣言によれば、それらはすべて数字です。したがって、座標タイプも数値にすべきではありませんか？



これは誤ったエラーではありません。Vector3Dは厳密に定義されており、他のプロパティはありません。彼はできたが：

const vec3D = {x: 3, y: 4, z: 1, address: '123 Broadway'};
calculateLengthL1(vec3D); // ok,  NaN

vはおそらく任意のプロパティを持つ可能性があるため、axisのタイプはstringです。TypeScriptがv [axis]を単なる数値と考える理由はありません。オブジェクトを反復処理する場合、正しい入力を行うのが難しい場合があります。ルール54でこのトピックに戻りますが、今のところループは使用しません。

function calculateLengthL1(v: Vector3D) {
   return Math.abs(v.x) + Math.abs(v.y) + Math.abs(v.z);
}

構造型は、可能なプロパティ割り当てについて比較されるクラスで驚きを引き起こす可能性もあります。

class C {
   foo: string;
   constructor(foo: string) {
       this.foo = foo;
   }
}

const c = new C('instance of C');
const d: C = { foo: 'object literal' }; // ok!

なぜdをCに割り当てることができるのですか？文字列であるプロパティfooがあります。また、引数を使用して呼び出すことができる（Object.prototypeからの）コンストラクターもあります（通常は引数なしで呼び出されます）。したがって、構造は同じです。これは、Cコンストラクターにロジックがあり、それを呼び出す関数を作成する場合、驚きにつながる可能性があります。これは、Cタイプパラメータの宣言によってCまたはそのサブクラスに属することが保証されるC ++やJavaなどの言語との大きな違いです。



構造型は、テストを作成するときに非常に役立ちます。データベースクエリを実行して結果を処理する関数があるとします。

interface Author {
   first: string;
   last: string;
}
function getAuthors(database: PostgresDB): Author[] {
   const authorRows = database.runQuery(`SELECT FIRST, LAST FROM
                                 AUTHORS`);
   return authorRows.map(row => ({first: row[0], last: row[1]}));
}

それをテストするために、PostgresDBモックを作成することができます。ただし、より良い解決策は、構造化された型指定を使用し、より狭いインターフェイスを定義することです。

interface DB {
   runQuery: (sql: string) => any[];
}
function getAuthors(database: DB): Author[] {
   const authorRows = database.runQuery(`SELECT FIRST, LAST FROM
                                 AUTHORS`);
   return authorRows.map(row => ({first: row[0], last: row[1]}));
}

runQueryメソッドがあるため、postgresDBを出力のgetAuthors関数に渡すことができます。構造型入力では、PostgresDBがDBを実行していることを報告する必要はありません。TypeScriptがそれを理解します。



テストを作成するときに、より単純なオブジェクトを渡すこともできます。

test('getAuthors', () => {
   const authors = getAuthors({
      runQuery(sql: string) {
         return [['Toni', 'Morrison'], ['Maya', 'Angelou']];
      }
   });
   expect(authors).toEqual([
      {first: 'Toni', last: 'Morrison'},
      {first: 'Maya', last: 'Angelou'}
   ]);
});

TypeScriptは、テストDBがインターフェイスに準拠していることを確認します。同時に、テストには出力データベースに関する情報はまったく必要ありません。モックライブラリは必要ありません。抽象化（DB）を導入することにより、実行の詳細（PostgresDB）からロジックを解放しました。



構造型のもう1つの利点は、ライブラリ間の依存関係を明確に壊すことができることです。このトピックの詳細については、ルール51を参照してください。

JavaScriptはダックタイピングを使用し、TypeScriptは構造化タイピングを使用してモデル化することを覚えておいてください。その結果、インターフェースに割り当てられた値には、宣言されたタイプで指定されていないプロパティが含まれる場合があります。TypeScriptのタイプは封印されていません。



クラスも構造的な型指定規則に従うことに注意してください。したがって、予想とは異なるクラスサンプルになってしまう可能性があります。



構造化型を使用して、アイテムのテストを容易にします。

ルール5.タイプの使用を制限する

TypeScriptのタイプシステムは段階的で選択的です。漸進性は、コードにタイプを段階的に追加する機能と、必要なときにタイプチェックモジュールを無効にする機能の選択性に現れます。この場合に制御するキーは、任意のタイプです。

   let age: number;
   age = '12';
// ~~~  '"12"'       'number'.
   age = '12' as any; // ok

エラーを示すエンタイトルメントモジュールですが、追加するだけで回避できます。 TypeScriptの使用を開始するとき、エラーを理解していない場合、検証ツールを信頼していない場合、またはタイプの説明に時間をかけたくない場合は、任意のタイプまたはアサーションとして使用したくなることがあります。ただし、TypeScriptの利点の多くが無効になることを忘れないでください。つまり、



コードの安全性が低下します。



上記の例では、宣言されたタイプに応じて、年齢は数値です。しかし、どの文字列もそれに割り当てることができました。検証者は、これが（宣言した方法である）数値であると想定し、混乱を招きます。

age += 1; // ok.    age "121".

条件に違反することができます



関数を作成するときに、呼び出しから特定のデータタイプを受信すると、出力に対応するタイプを生成するという条件を設定します。これは、次のように違反します。

function calculateAge(birthDate: Date): number {
   // ...
}

let birthDate: any = '1990-01-19';
calculateAge(birthDate); // ok

birthDateパラメーターは、文字列ではなく日付である必要があります。任意のタイプにより、calculateAgeに関連する条件に違反することができました。JavaScriptは暗黙的な型変換を行う傾向があるため、これは特に問題になる可能性があります。このため、文字列は、数値が想定されている場合には失敗しますが、他の場所では必然的に失敗します。



言語サービスのサポートを排除



文字にタイプが割り当てられると、TypeScript言語サービスは適切な自動置換とコンテキストドキュメントを提供できます（図1.3）。





ただし、タイプanyを文字に割り当てることにより、すべてを自分で行う必要があります（図1.4）。





また、名前も変更します。名前をフォーマットするためのPersonタイプと関数がある場合：

interface Person {
   first: string;
   last: string;
}

const formatName = (p: Person) => `${p.first} ${p.last}`;
const formatNameAny = (p: any) => `${p.first} ${p.last}`;

次に、エディターで最初に強調表示し、[名前の変更]シンボルを選択して、名前をfirstNameに変更します（図1.5および図1.6）。



これにより、formatName関数が変更されますが、次の場合は変更されません。

interface Person {
   first: string;
   last: string;
}

const formatName = (p: Person) => `${p.firstName} ${p.last}`;
const formatNameAny = (p: any) => `${p.first} ${p.last}`;

»ブックについての詳細は、上で見つけることができます出版社のウェブサイト

»目次

»抜粋



については居住者クーポンで25％割引-活字



本の紙のバージョンの支払いの際、電子書籍は、電子メールに送信されます。