TypeScript で知っておく価値のある 7 つのメソッドについての簡単な説明

この記事では、知っておくべき TypeScript の 7 つのメソッドを紹介します。お役に立てれば幸いです。

#TypeScript の型システムは非常に強力です。これはタイプ セーフティを提供します。型システムは愛されていますが、型とインターフェイスを計画および設計しないと、コードが乱雑で読みにくくなる可能性もあります。

ジェネリック

コードの重複を避け、再利用可能な型を作成することは、簡潔なコードを作成する際の重要な部分です。ジェネリックは、再利用可能な型を作成できるようにする TypeScript の機能です。次の例を見てください。

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
}

正しい型を Add のジェネリック型に入力します。これは、2 つの数値の加算または 2 つの文字列の連結を記述するために使用できます。関数ごとに型を記述する代わりに、ジェネリックを使用してそれを 1 回行うだけで済みます。これにより、労力が節約されるだけでなく、コードがよりクリーンになり、エラーが発生しにくくなります。

ユーティリティ タイプ

TypeScript は、一般的な型変換の実行に役立ついくつかの便利なユーティリティ タイプをネイティブに提供します。これらのユーティリティ タイプはグローバルに利用でき、すべてジェネリックを使用します。

私がよく使うのは以下の7つです。

1. Pick<Type, Keys>

Pick は、Type から属性セット Keys を選択して、新しいタイプのキーは、文字列リテラルまたは文字列リテラルの結合にすることができます。 Keys の値は Type のキーである必要があります。そうでない場合は、TypeScript コンパイラーからエラーが発生します。このユーティリティ タイプは、多くのプロパティを持つオブジェクトから特定のプロパティを選択して、より軽量なオブジェクトを作成する場合に特に便利です。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

2. Omit<Type, Keys>

Omit は Pick## の逆です。 ＃。 キー これは、どの属性を保持するかということではなく、省略する属性キーのセットを意味します。これは、オブジェクトから特定のプロパティを削除し、他のプロパティを保持したい場合に便利です。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

3. Partial

Partial すべての型属性セットを使用して型を構築することはオプションです。これは、オブジェクトの更新ロジックを作成するときに非常に役立ちます。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

// type PartialUser = {
//   name?: string;
//   age?: number;
//   address?: string;
//   occupation?: string;
// }

4. Required

##Required

は、Partial の逆です。すべてのプロパティが必要な型を構築します。これを使用すると、型にオプションのプロパティが存在しないことを確認できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">type PartialUser = { name: string age: number address?: string occupation?: string } type User = Required&lt;PartialUser&gt; // type User = { // name: string; // age: number; // address: string; // occupation: string; // }</pre><div class="contentsignin">ログイン後にコピー</div></div>

5.

Readonly

Readonly

型セットのすべてのプロパティが読み取られる型を構築します。 -のみ。新しい値 TS を再割り当てすると、エラーが発生します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">type User = { name: string age: number address: string occupation: string } type ReadOnlyUser = Readonly&lt;User&gt; const user: ReadOnlyUser = { name: &quot;小智&quot;, age: 24, address: &quot;厦门&quot;, occupation: &quot;大迁世界&quot; } user.name = &quot;王大冶&quot; // Cannot assign to &amp;#39;name&amp;#39; because it is a read-only property.</pre><div class="contentsignin">ログイン後にコピー</div></div>

6.

ReturnType

ReturnType

関数型の戻り値の型から型を構築します。これは、外部ライブラリの関数型を処理し、それらに基づいてカスタム型を構築する場合に非常に役立ちます。

import axios from 'axios'

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

上記に加えて、よりクリーンなコードを作成するのに役立つユーティリティ タイプが他にもあります。ユーティリティ タイプに関する TypeScript ドキュメントへのリンクは、ここにあります。

https://www.typescriptlang.org/docs/handbook/utility-types.html

ユーティリティ タイプは、TypeScript が提供する非常に便利な機能です。開発者は、型のハードコーディングを避けるためにこれらを活用する必要があります。同僚よりも優れているように見えますか? 知っておくべきことは次のとおりです!

この記事は次の場所に転載されています: https://segmentfault.com/a/1190000040574488

プログラミング関連の知識の詳細については、次のサイトを参照してください:

概要プログラミング

! ！

以上がTypeScript で知っておく価値のある 7 つのメソッドについての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。