Englishから翻訳 • 原文を読む フロントエンド開発者なら誰でも、悪名高い「関数ではありません」というメッセージが表示されるフラストレーションを知っています。それは、たとえあなたのコードが目標を達成しても、その一貫性や信頼性を保証できないことを思い出させてくれます。厳密なタイピングがなければ、コーヒー不足や睡眠不足による小さなミスを止めることはできません。あなたの熱意によります。
あなた自身の人間性だけでなく、他の開発者の不器用さもあります。サードパーティのライブラリは、壊れる変更を加えることで楽しさを増しました。その変数はどこで、どのように渡されるのでしょうか?何が偶然うまくいき、何が謎の間違っているのでしょうか?私は何度もコードを地獄の炎の底に投げ込み、書き直しを試みましたが、同じフラストレーションをまた経験しました。
TypeScriptでは、名前の通り型を導入することで、これらの恐怖を排除します。変数や関数に、それらが持つ値、期待値、返す値の型を注釈し、JavaScriptを厳格な型付き言語に変えます。コードを書くたびに、コードの信頼性と一貫性を自動的にテストします。基本的な例を見てみましょう。
さらに、コンパイラが不整合を見つけたときには激怒し、簡単に追跡できます。便利なサードパーティライブラリの利用については、TypeScriptは他の開発者を大量のドキュメントに押しつぶすことなく、自分のコードについてコミュニケーションし情報を提供する手段を提供します。
私はこれがTypeScriptの核心的な使い方だと信じています。しかし、私たちははるかに強力なものの表面をかすったに過ぎないとも思います。興味深い事例をいくつかご紹介します。
知るか知らないか、未知か
入力をそのまま返す関数を書いていると想像してください。これを実現するために「any」型を使えます。「any」型はすべてを受け入れます。文字列や数字、配列、オブジェクト、クレジットカードや謝罪も受け入れます。まあ、後者ではないかもしれませんが、どんな種類の変数でも受け入れます。
これらはすべて受け入れられます。なぜなら、変数が「any」型を持っているからです。
しかし、最後の行には何か怪しいことが起きています。元々「文字列」型と宣言された変数に「番号」をあえて割り当ててしまいます。これは私がここで証明しようとしていることとは少し違いますよね?心配いりません、ここで「未知」型が救いに来ます!
そして、またビジネスを再開しました!「未知」型には何でも割り当てられますが、「強い」型の変数には割り当てられません。
ジェネリックで治療
私たちは「any」型と「unknown」型を使って、何でも受け入れる関数を作成できることを今見ました。しかし、入力を知らず知らずのうちに他の種類の値に置き換えてしまったわけではないと信じなければなりません。結局のところ、関数は「any」型を返します。
この不安全さを解消するために、ジェネリック型を導入できます。ジェネリック型は、関数に渡された型を確実に返すことを可能にします。
関数を呼び出すと、入力の型を指定できます。形は「T」と同じ型を返すことで、返ってくるものがわかります。リラックスしてスクービースナックを楽しんでください。記事を読んだ後かもしれません。
関数表記については、矢印表記は使っていません。矢印表記を使うと、JSXを使うと少し混乱しやすいです。
私たちが期待している表記法が、JSXを使うと機能しないことがわかります。その理由は、コンパイラが入力型定義とJSX構文を混同しているためです。これはカンマを追加し、後者の型を省略することで回避できます。この表記法はJSXには無効で、コンパイラがコードを一般的な型定義として解釈してしまいます。ふう!
議論についての議論、絶対にしないタイプ
思い出の道を歩いてみましょう。2種類の値を受け入れるべき関数を書かなければならなかったことはありますか?ただし、一度に1種類しか受け取れないはずです。こんな感じのことを書いたことを覚えていますか?
_「両方の値が提供されている場合、エラーを投げてください。なぜなら、どちらか一方だけを提供すべきだからです。」 _
そしておそらく、より一般的には。
「この引数が提供されているなら、これを選べ。提供されていないなら、それを選べ」
そして、最も重要なルールを忘れるなんて絶対に許さない。
_「値が提供されない場合はエラーを投げてください。」 _
それは冗長で、醜い行為です。幸いなことに、TypeScriptにはこの要件を満たすより自然で侵入感の少ない方法があります。「絶対に」試さないでください!
関数はどちらのタイプのプロパティを持つオブジェクトも受け入れてほしいが、両方は受け入れてはいけません。望まない引数を「絶対に」タイプとして宣言するため、プロパティを全てまたは全てパスしようとするとコンパイラがエラーを出します。
プロパティを「決して」タイプとして宣言することと単にタイプから削除することの違いは_Whatのでしょうか?
もし望まないプロパティを単純に省けば、コンパイラは両方の引数で関数を呼び出すことを受け入れます。この場合もこのケースの処理責任を関数に移すことになります。マイクロマネジメントが最も得意とすることをしてください;責任を譲りましょう!
組合の種類、重複および排除
複数の値を許可したい場合は、'|'を使ってユニオン型を作成できます。
簡単なので、もっと面白いことに移ります。
型を組み合わせる代わりに、重複する型のみを許可するために「&」を使うことができます。これは、同じ型の一部を受け入れるがすべてを受け入れない2つの関数を呼び出す関数を書く際に有用な手法となります。両方の関数で受け入れられる型のみを提供できることを保証します。
素晴らしい、すべてと重複する型を無事に選択できました!ただし、一意型が選ばれるケースが一つ残っています。「Exclude」型を使うと、最初の引数にある値と2つ目の引数の両方にある値を除外できます。
私たちは半分のところまで進んでいます。最初の重なりのない型は選びましたが、二つ目の重なりのない型は却下されました。「|」と「除外」の冪を組み合わせてこれを修正してみましょう。
そして今、私たちは終わりです、「クラップクラップ」 私たち!
そして今、オブジェクトについて、ピックとオミットを紹介します
オブジェクト型の組み合わせは非常にシンプルです。前のセクションでは重複するタイプを選択するために「&」を使いました。しかしオブジェクトの場合、'&'は両方のタイプのプロパティを必要とするタイプになります。
型を差し引くのは少し複雑です。『Omit』型を使ってオブジェクトから必要な性質を除去できます。しかし、『Omit』の2つ目のパラメータはオブジェクトを受け入れず、『Exlude』型と同様に文字列リテラル型を受け入れます。『keyof』を使ってオブジェクトのキーを得ることができ、次の解が得られます。
重複するプロパティだけを残したい場合は、今回は「Pick」型で再び「keyof」を使うことができます。
記録をつけて
私のように5分ごとにポケットを確認して何かなくしていないか確認するなら、TypeScriptは大きな安心感です。TypeScriptを使えば、「Record」タイプのキーを申告し忘れずに済むようにできます。
「ビッグ4」メタルバンドのうち2つを、追加情報とともに宣言しましょう。(すみません、メタリカとアンスラックスです。)
私たちの定数は、両方のバンドが合格を宣言する必要があります。
リラックスして、パートリアルと一緒に
今度はその「Record」を右回転させてみて。もしすべてのキーを持つ必要がなかったらどうなる?以前に定義した型を使い、今回は「Partial」と一緒に使う。
これでバンドの一部を定義できます。
そんなにだらしないで足を引っ張らない_Are?_
いいえ!今では、すべてを暗に許すのではなく、ある程度の寛大さを明示的に認めています。そしてご安心ください、他のタイプのすべての性質を定義しなければなりません!
必須で強く主張しろ
一方で、「Required」型を使ってオプションプロパティを必須にすることもできます。
Readonlyであなたの財産を守ろう
変数を定数として宣言することで、その値が変更されないようにできます。しかし、オブジェクトを定数として宣言しても、そのプロパティの値は変更可能です。これを防ぐために「Readonly」型を使うことができます。
単に「読み取り専用」タイプでタイプをラップするだけで、ほぼ完成です!
結論:ストリング;
もちろん、他にも多くのユースケースや興味深い機能があります。しかし、これらの例を見る限り、TypeScriptは厳格さを強いつつも、多くの柔軟性も提供しています。どんなタイプを使っていても、常に望むものを得る方法があります。同時に、コードの信頼性を高め、どんなプロジェクトも成長に向けて準備を整えます。TypeScriptのサポートが確立され、多くのプロジェクトがそれを利用する中で、TypeScriptはすぐにはどこにも行かないと言えます。
Typescriptタイプの力を楽しみ、探求してください!