最近、Jamie Kyle による、破壊、デフォルト パラメータ、およびインライン型の使用に関するツイートを見ました。   https://twitter.com/buildsghost/status/1577030375158607872?s=20&t=0qa78fG7TzsSdxrsM1sCvg?embedable=true そのつぶやきと、最近仕事で目にしたいくつかの React コンポーネントが、このブログ投稿を書くきっかけになりました。構造化とインライン型を使用すると、TypeScript が読みにくくなる可能性があることをお見せしたいと思います!  TypeScript 関数定義はどのように見えますか?  JavaScript と TypeScript では、  キーワードまたはラムダ/矢印関数を使用して関数を定義できます。どちらの方法も有効ですが、違いがあります。簡単な 関数を見てみましょう。実装ロジックは関係ありません。 function sendMessage   // sendMessage function written using `function` keyword function sendMessage(message: string) { // function logic } // same sendMessage written as arrow function const sendMessage = (message: string) => { // function logic }; 関数定義が非常に単純な場合、関数は異なる型のいくつかのパラメーターを受け入れます。それらが文字列や数値のようなプリミティブである場合、すべてが読み取り可能です。 メッセージの内容と一緒にいくつかの追加情報を 関数に渡したいとしましょう。 sendMessage   function sendMessage(message: { content: string; senderId: string; replyTo?: string; }) { // you can assess content using `message.content` here } ご覧のとおり、TypeScript では、  または キーワードを使用して型を指定せずに、渡したい オブジェクトのインライン型定義を記述できます。 type interface message  Destructuring を追加しましょう。関数に大きな オブジェクトを渡す場合、TypeScript を使用すると、渡された引数を分割して、  変数を何度も繰り返すコード ボイラープレートを減らすことができます。 message message   function sendMessage({ content, senderId, replyTo, }: { content: string; senderId: string; replyTo?: string; }) { // you have access to `content` directly } なぜそれが悪い考えだと思うのか、どうすれば改善できるのか? いいアイデアに見えるかもしれませんが、何回も を書く必要はありませんよね？それほど素晴らしいものではないことがわかりました。私がアンチパターンだと思う5つの理由について話しましょう。 message  1. データがどこから来ているのかわからない 関数本体を読んでいると、  が表示され、その関数がどこから来たのかを再確認する必要があります。引数として渡されるか、関数のどこかで計算されますか? senderId  2. ドキュメントを書くのが難しい 関数定義ですべての型が構造化されて窮屈になっている場合、ドキュメンテーション コメントを書く自然な場所はありません。各型フィールド間にコメントを書くこともできますが、それによって関数定義全体がさらに長くなります。渡すデータの簡単な要約を書くことを積極的に思いとどまらせています。  3. そのデータを転送するのは難しい データが構造化されていない場合、データを転送したい場合は、構造化して新しいオブジェクトにする必要があります。これにより、小さなヘルパー関数を作成したり、コンポジションに依存してメイン関数のロジックを構築したりすることを思いとどまらせます。  4. この関数の外で引数の型を再利用することはできません メイン関数のロジックを作成するときにヘルパー関数で関数の引数を再利用する必要がある場合は、同じ型のセットを繰り返し入力する必要があります。これにより、タイプをまったく記述しないことが容易になります。  5. かなりのスペースが必要 それに直面しよう。多くの画面スペースを占有するのは、多くのコード行です。さらに、実装の詳細 (関数に渡す引数の内部型) に焦点を当てていますが、これはほとんどの場合、その関数を見ているときには関係ありません。 そのためのタイプを作成するだけです 型を抽出して関数のすぐ上に配置すると、読みやすくなります。ドキュメント コメント用の場所があります。必要に応じて、その型を他のヘルパー関数で再利用し、型定義を 1 か所で変更できます。   /** * Message to send using XYZ API */ export type MessageToSend = { /** * Markdown string of the user's message */ content: string; /** * Id of the sender user */ senderId: string; /** * Other message ID if this is a reply */ replyTo?: string; }; function sendMessage(message: MessageToSend) { // function logic } function getUserIdsToNotify(message: MessaageToSend) { // function logic } 資力 このブログ投稿を調査する際に使用したリソースのリストを見つけてください。   https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Alongside

Twitter

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

構造化とインライン型を使用すると、TypeScript コードベースが損なわれる可能性があります

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

暗号通貨の成長: 効果的なユーザーペルソナの作成

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

暗号通貨の成長: 効果的なユーザーペルソナの作成

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps