ホームページ > 記事 > ウェブフロントエンド > TypeScript で知っておく価値のある 7 つのメソッドについての簡単な説明
TypeScript で知っておく価値のある 7 つのメソッドについての簡単な説明
- 青灯夜游転載
- 2021-09-17 10:53:341745ブラウズ
この記事では、知っておくべき 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></type>
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></type>
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. Partial30690cee1a11d5dfbdced93b89f678ee
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. Required30690cee1a11d5dfbdced93b89f678ee
は、Partial の逆です。すべてのプロパティが必要な型を構築します。これを使用すると、型にオプションのプロパティが存在しないことを確認できます。 <pre class="brush:js;toolbar:false;">type PartialUser = {
name: string
age: number
address?: string
occupation?: string
}
type User = Required<PartialUser>
// type User = {
// name: string;
// age: number;
// address: string;
// occupation: string;
// }</pre>
Readonly30690cee1a11d5dfbdced93b89f678ee
型セットのすべてのプロパティが読み取られる型を構築します。 -のみ。新しい値 TS を再割り当てすると、エラーが発生します。 <pre class="brush:js;toolbar:false;">type User = {
name: string
age: number
address: string
occupation: string
}
type ReadOnlyUser = Readonly<User>
const user: ReadOnlyUser = {
name: "小智",
age: 24,
address: "厦门",
occupation: "大迁世界"
}
user.name = "王大冶"
// Cannot assign to &#39;name&#39; because it is a read-only property.</pre>
ReturnType30690cee1a11d5dfbdced93b89f678ee
関数型の戻り値の型から型を構築します。これは、外部ライブラリの関数型を処理し、それらに基づいてカスタム型を構築する場合に非常に役立ちます。 <pre class="brush:js;toolbar:false;">import axios from &#39;axios&#39;
type Response = ReturnType<typeof axios>
function callAPI(): Response{
return axios("url")
}</pre>上記に加えて、よりクリーンなコードを作成するのに役立つユーティリティ タイプが他にもあります。ユーティリティ タイプに関する TypeScript ドキュメントへのリンクは、ここにあります。
ユーティリティ タイプは、TypeScript が提供する非常に便利な機能です。開発者は、型のハードコーディングを避けるためにこれらを活用する必要があります。同僚よりも優れているように見えますか? 知っておくべきことは次のとおりです!この記事は次の場所に転載されています: https://segmentfault.com/a/1190000040574488
プログラミング関連の知識の詳細については、次のサイトを参照してください:概要プログラミング
以上がTypeScript で知っておく価値のある 7 つのメソッドについての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。