👌🏿 👩🏿 👼🏾 「ProfessionalTypeScript」を予約してください。スケーラブルなJavaScriptアプリケーションの開発 " 🖖🏿 📹 💿

動的に型指定された言語を使用するプログラマーは、コードをスケーリングするタスクが非常に困難であり、エンジニアの大規模なチームが必要であることを証明します。これが、Facebook、Google、およびMicrosoftが動的に型付けされたコードの静的型付けを考案した理由です。

あらゆるプログラミング言語を使用して、例外を追跡し、コードを1行ずつ読み取って、問題とその修正方法を見つけます。 TypeScriptを使用すると、開発プロセスのこの苛立たしい部分を自動化できます。

TypeScriptは、他の多くの型付き言語とは異なり、アプリケーション指向です。アイデアをより簡潔かつ正確に表現し、スケーラブルで安全な最新のアプリケーションを簡単に構築できる新しい概念を紹介します。

Boris Chernyは、TypeScriptのすべてのニュアンスと機能を理解するのに役立ち、エラーを排除してコードをスケーリングする方法を教えます。

本の構造

私（著者）は、TypeScriptがどのように機能するかについての理論的な理解と、かなりの量の実用的なコーディングのアドバイスを提供しようとしました。

TypeScriptは実用的な言語であるため、この本では理論と実践がほぼ補完し合っていますが、最初の2つの章では主に理論について説明し、最後に実践のみを示します。

コンパイラ、タイプチェッカー、タイプ自体などの基本について説明します。次に、それらの種類と演算子について説明し、次に、タイプシステムの詳細、エラー処理、非同期プログラミングなどの高度なトピックに進みます。最後に、お気に入りのフレームワーク（フロントエンドとバックエンド）でTypeScriptを使用する方法、既存のJavaScriptプロジェクトをTypeScriptに移行する方法、およびTypeScriptアプリケーションを本番環境で実行する方法を示します。

ほとんどの章は一連の演習で終わります。それらを自分で試して、資料をよりよく理解してください。それらへの回答はここにあります。

JavaScriptからTypeScriptへの段階的な移行

TypeScriptは、JavaScriptの相互運用性を念頭に置いて設計されました。したがって、完全に苦痛がないわけではありませんが、TypeScriptへの移行は楽しい体験であり、コードベースファイルを一度に変換し、より深いレベルのセキュリティを取得してコミット後にコミットし、静的に入力されたコードがいかに強力であるかを上司や同僚に驚かせることができます。 ..。

大まかに言えば、コードベースは完全にTypeScriptで記述され、厳密に型指定されている必要があります。また、依存するサードパーティのJavaScriptライブラリは高品質であり、独自の厳密な型を持っている必要があります。コーディングプロセスは、コンパイル時のエラーキャッチと豊富なTypeScript自動完了システムによって2倍になります。移行結果を成功させるには、いくつかの小さな手順が必要です。

TSCをプロジェクトに追加します。
既存のJavaScriptコードのタイプのチェックを開始します。
JavaScriptコードをファイルごとにTypeScriptに移動します。
依存関係の型宣言をインストールします。つまり、タイプを持たない依存関係にタイプを割り当てるか、タイプされていない依存関係のタイプ宣言を記述して、それらをDefinitelyTyped1に送り返します。
コードベースの厳密モードを有効にします。

このプロセスにはしばらく時間がかかる場合がありますが、セキュリティとパフォーマンスの向上、およびその他の利点は後ですぐにわかります。リストされている手順を見てみましょう。

ステップ1：TSCを追加する

TypeScriptとJavaScriptを組み合わせたコードベースで作業する場合は、最初にTSCにtsconfig.json設定のTypeScriptファイルと一緒にJavaScriptファイルをコンパイルさせます。

{
     "compilerOptions": {
     "allowJs": true
}

この変更だけで、TSCを使用してJavaScriptコードをコンパイルできるようになります。ビルドプロセスにTSCを追加して、各JavaScriptファイルを実行するか、ビルドプロセスでレガシーJavaScriptファイルを実行し、TSCで新しいTypeScriptファイルを実行し続けるだけです。

allowJsをtrueに設定すると、TypeScriptは現在のJavaScriptコードのタイプをチェックしませんが、要求したモジュールシステム（モジュールフィールド）を使用して、そのコードをES3、ES5、またはtsconfig.jsonファイルでターゲットとして設定されているバージョンにトランスパイルします。 jsonファイル）。最初のステップが完了しました。それをコミットして、背中を軽くたたいてください-あなたのコードベースは現在TypeScriptを使用しています。

手順2a：JavaScriptタイプチェックを有効にする（オプション）

TSCがJavaScriptを処理しているので、そのタイプを確認してみませんか？明示的な型注釈がない場合でも、TypeScriptはTypeScriptコードの場合と同じ方法でJavaScriptコードの型を推測できることに注意してください。 tsconfig.jsonに必要なオプションを含めます。

{
     "compilerOptions": {
     "allowJs": true,
     "checkJs": true
}

これで、TypeScriptがJavaScriptファイルをコンパイルするときはいつでも、TypeScriptコードの場合と同じように、型を推測して検証しようとします。

コードベースが大きく、checkJを有効にすると、一度に多くのエラーが発生する場合は、オフにします。代わりに、// @ ts-checkディレクティブ（ファイルの先頭にある通常のコメント）を追加して、JavaScriptファイルチェックを一度に1つずつ有効にします。または、大きなファイルがまだ修正したくないエラーを大量にスローする場合は、checkJsを有効のままにして、これらのファイルに// @ ts-nocheckディレクティブを追加します。

TypeScriptはすべてのタイプを推測することはできません（たとえば、関数パラメーターのタイプを推測しません）。そのため、JavaScriptでは多くのタイプを推測します。tsconfig.jsonでストリクトモードを有効にしている場合（推奨）、移行中に暗黙的なモードを許可することをお勧めします。以下をtsconfig.jsonに追加します。
{
     "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
     "noImplicitAny": false
}
コードの大部分をTypeScriptに移行し終えたら、noImplicitAnyを再度オンにすることを忘れないでください。そうすることで、多くの見逃されたバグが見つかる可能性があります（あなたがゼニダール、ワームウッドポーションで彼の心の目の力でタイプチェックできるJavaScript魔女バヴモルダの弟子でない限り）。

TypeScriptがJavaScriptコードを実行するとき、TypeScriptコードよりもソフトな推論アルゴリズムを使用します。すなわち：

すべての関数パラメーターはオプションです。

関数とクラスのプロパティのタイプは、（事前に宣言する必要はなく）それらの使用に基づいて推測されます。

class A {
    x = 0 // number | string | string[],    .
     method() {
             this.x = 'foo'
     }
     otherMethod() {
             this.x = ['array', 'of', 'strings']
     }

}

オブジェクト、クラス、または関数を宣言した後、それらに追加のプロパティを割り当てることができます。舞台裏では、TypeScriptは、関数宣言ごとに適切な名前名を生成し、各オブジェクトリテラルにインデックス署名を自動的に追加することによってこれを行います。

ステップ2b：JSDoc注釈を追加する（オプション）

あなたは急いでいて、古いJavaScriptファイルに追加された新しい関数に対して1つのタイプ注釈を追加する必要があるかもしれません。このファイルをTypeScriptに変換できるようになるまで、JSDocアノテーションを使用してこれを行うことができます。

あなたはおそらく以前にJSDocを見たことがあるでしょう。これらは、コードの先頭にあるこのようなコメントで、@で始まる注釈が付いています。パラメータ、@ returnsなど。TypeScriptはJSDocを理解し、明示的な型注釈とともに型チェッカーへの入力として使用します。

3000行のサービスファイルがあるとします（そうです、あなたの「友達」がそれを書いたのです）。新しいサービス関数を追加します。

export function toPascalCase(word) {
       return word.replace(
             /\w+/g,
             ([a, ...b]) => a.toUpperCase() + b.join('').toLowerCase()
       )
}

utils.jsからTypeScriptへの本格的な変換がなければ、確かに多くのバグが明らかになりますが、toPascaleCase関数に注釈を付けることしかできず、型指定されていないJavaScriptの海に小さな安全の島を作成します：

/**
     * @param word {string}    .
     * @returns {string}   PascalCase
     */
export function toPascalCase(word) {
     return word.replace(
           /\w+/g,
           ([a, ...b]) => a.toUpperCase() + b.join('').toLowerCase()
     )
}

この注釈がないと、JSDoc TypeScriptはtoPascaleCaseタイプを（word：any）=> stringとして推測します。これで、コンパイル時に、toPascaleCaseタイプが（word：string）=> stringであることがわかります。そして、あなたは有用な文書を手に入れます。

JSDocアノテーションの詳細については、TypeScript Wiki（https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript）にアクセスしてください。

手順3：ファイルの名前を.tsに変更する

ビルドプロセスにTSCを追加し、オプションでタイプチェックを開始し、可能な限りJavaScriptコードに注釈を付けたら、TypeScriptに切り替えます。

ファイルごとに、ファイルのアクセス許可を.js（または.coffee、es6など）から.tsに更新します。エディタでファイルの名前を変更した直後に、タイプエラー、ケースの欠落、nullチェックの忘れ、変数名のタイプミスを示す赤い波状の友達が表示されます。それらを削除するには2つの方法があります。

. , , , . checkJs, noImplicitAny tsconfig.json, any , , JavaScript .
.ts tsconfig.json ( strict false), . any, . . , strict (noImplicitAny, noImplicitThis, strictNullChecks . .), . ( .)

, TODO any any, . , :
// globals.ts
type TODO_FROM_JS_TO_TS_MIGRATION = any

// MyMigratedUtil.ts
export function mergeWidgets(
       widget1: TODO_FROM_JS_TO_TS_MIGRATION,
       widget2: TODO_FROM_JS_TO_TS_MIGRATION
): number {
       // ...
}

どちらのアプローチも非常に関連性があり、どちらが望ましいかを決めるのはあなた次第です。TypeScriptは、可能な限り最も安全な方法で型指定されていないJavaScriptと対話するようにゼロから設計された、段階的な型付き言語です。型なしのJavaScriptと弱い型のTypeScriptのどちらを操作するかは関係ありません。強い型のTypeScriptは、操作が可能な限り安全であることを常に確認します。

ステップ4：厳密さをアクティブにする

大量のJavaScriptコードが移植されたら、より厳密なTSCフラグを1つずつ使用して、オールインワンで安全にする必要があります（フラグの完全なリストについては、付録Eを参照してください）。

終了したら、JavaScriptとの対話を担当するTSCフラグをオフにして、すべてのコードが厳密に型指定されたTypeScriptで記述されていることを確認できます。

{
     "compilerOptions": {
     "allowJs": false,
     "checkJs": false
}

これにより、残りのタイプエラーが明らかになります。それらを修正して、OCamlの過酷なエンジニアのほとんどが背中を叩くような完璧で安全なコードベースを入手してください。

これらの手順に従うと、制御するJavaScriptコードに型を追加するときに長い道のりが必要になる場合があります。しかし、あなたが制御していないコードはどうですか？NPMでインストールされたもののように。しかし、この質問を研究する前に、少し逸脱しましょう...

JavaScriptのタイプの検索

TypeScriptファイルからJavaScriptファイルをインポートすると、TypeScriptは次のアルゴリズムを使用してそのタイプ宣言を検索します（TypeScriptでは、「ファイル」と「モジュール」は同じ意味で使用されることに注意してください）。

.d.ts , .js. .js.

, :

my-app/

├──src/

│ ├──index.ts

│ └──legacy/

│ ├──old-file.js

│ └──old-file.d.ts

old-file ( ) index.ts:

// index.ts

import './legacy/old-file'

TypeScript src/legacy/old-file.d.ts ./legacy/old-file.
, allowJs checkJs true, .js ( JSDoc) any.

TSC-: TYPEROOTS ( )

TypeScript node modules/@types , (../node modules/@types . .). .

, typeRoots tsconfig.json , . , TypeScript typings node modules/@types:
{
     "compilerOptions": {
            "typeRoots" : ["./typings", "./node modules/@types"]
     }
}
types tsconfig.json, , TypeScript . , , React:
{
     "compilerOptions": {
             "types" : ["react"]
     }
}

サードパーティのJavaScriptモジュール（ノードモジュールにインストールしたNPMパッケージ）をインポートする場合、TypeScriptはわずかに異なるアルゴリズムを使用します。

モジュールのローカルタイプ宣言を探し、存在する場合はそれを使用します。

このような例では、ディレクトリ構造のルックス：

私のアプリ/

├──node_modules/

│└──foo/

├──src/

│├──index.ts

│└──types.d.ts

これはtype.dがどのように見えるかです.ts：
```
// types.d.ts
declare module 'foo' {
      let bar: {}
      export default bar
}
```
次にfooをインポートすると、TypeScriptはtypes.d.tsの外部モジュール宣言をタイプソースとして使用します

。//index.tsimport

bar from'foo '
package.json, . types typings, .d.ts, , .
または、モジュールの型宣言を含むノードmodules / @typesディレクトリを探すディレクトリを循環します。

たとえば、Reactをインストールしました：

npm install react --save

npm install @ types / react --save-dev

my-app /

├──node_modules/

│├──@ types /

││└──react/

│└── react

/├──src/│└──index.tsReactをインポートすると、TypeScriptは

@types

/ reactディレクトリを検索し、それを型宣言のソースとして使用します

。//index.ts

import * as React from'react '
それ以外の場合は、ローカルタイプ検索アルゴリズムのステップ1〜3に進みます。

私はかなりの数のステップをリストしましたが、あなたはそれらに慣れるでしょう。

著者について

Boris Chernyは、Facebookのチーフエンジニア兼製品リーダーです。以前はVC、AdTech、およびさまざまなスタートアップで働いていましたが、そのほとんどは現在存在していません。彼はプログラミング言語、コード合成、静的分析に興味があり、デジタル製品での経験をユーザーと共有するよう努めています。余暇には、サンフランシスコでTypeScriptクラブの会議を開催し、個人的なブログであるperformancejs.comを管理しています。 BorisのGitHubアカウントは、github.com / bchernyにあります。

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

»目次

»抜粋

クーポンのためにHabitans 25％割引-活字体

紙版の本の支払いが完了すると、電子書籍が電子メールに送信されます。

「ProfessionalTypeScript」を予約してください。スケーラブルなJavaScriptアプリケーションの開発 "