タイプスクリプトの型を知っていなければなりません

導入
タイプは私たちが最初の場所でtypescriptを使用する理由の1つの理由です、そして、私たちが利益を得ることができるそれらの多くがあります.フロントエンドの開発者が反応して専門家として、すべての種類をシームレスに動作するように利用するトリックがあります.これらのヒントやトリックでは、TypesScriptの代わりに負担を運ぶために負担されます.

Type Aliases

Object Type

Record Type

Omit Type

Pick Type

Union Type

Typeof Type

型エイリアス
を定義するいくつかの方法がありますType 以下では

// Defining a type
type Person = {
  age?: number; // Optional property
  name: string;
  id: ID;
};

// Defining union type
type ID = number | string;

// Combining types
type Person = {
  age: number;
  name: string;
  id: ID;
};

type Car = {
  color: string;
  year: number;
};

type CarAndPersonCombined = Person & Car;

オブジェクトタイプ
型が複雑でなくて、書くのが簡単であるならば、我々は単純に:

// Directly inside parameter
const foo = (id: { id: string | number }, car: { color: string; year: number }) => {};

レコードタイプ
エーRecord<K, T> プロパティキーがkで、そのプロパティ値がTであるオブジェクト型です.したがって、レコードキーの型を確認します.もちろん、プロパティの型は予期しないものではありません.

const colorMap: Record<string, { color: string; hover: string }> = {
  nextjs: { color: '#0A7B83E2', hover: '#09686dE2' },
  javascript: { color: '#F5B50FE2', hover: '#d69e0cE2' },
};

上の例では、キーは常にstring , color and hover プロパティは文字列になります.我々が彼らを供給しようとするならばnumber , 以下のエラーが表示されます.

const colorMap: Record<string, { color: string; hover: string }> = {
  nextjs: { color: 1234, hover: 1245 }, // Type 'number' is not assignable to type 'string'.ts
  javascript: { color: '#F5B50FE2', hover: '#d69e0cE2' },
};

だから我々はキーとプロパティの種類を完全に制御を目指している場合Record 'sは行く方法です.

省略する
あなたがすでにタイプがあるならば、若干の特性を削除したいです?Omit これを行うことができます.

type Person = {
  name: string;
  age: number;
  salary: number;
};

type PersonWithoutSalary = Omit<Person, 'salary', 'age'>;

const personObj: PersonWithoutSalary = {
  name: 'Foo',
};

削除しましたsalary and age からPerson 今私たちが持っているすべてのタイプname .

ピックタイプ
だからあなたはPick あなたが持っていないものを省略する代わりにプロパティ?

type Person = {
  name: string;
  age: number;
  salary: number;
};

type PersonWithoutSalary = Pick<Person, 'salary'>;

const personObj: PersonWithoutSalary = {
  salary: 10000,
  age: 19, // Type '{ age: number; }' is not assignable to type 'Pick<Person, "salary">'
};

含まれていないプロパティを使用しようとするとPick , TypeScriptはエラーをスローします.

ユニオンタイプ

type TodoProps = {
  id: string;
  desc: string;
  state: StateTypes;
};

type StateTypes = 'Active' | 'All' | 'Completed';

to do do stateは、Union 種類あなたが必要なすべての条件のリストのうち、1つは、次に利用するUnion . そうすることで
我々は他のオプションを制限し、IntelliSenseの仕事を我々の好意にする.

タイプタイプ
新しいタイプを作成するのがとても怠惰であるならば、あなたはすでにあなたのタイプをマップする目的を持っています:

const Person = {
  name: 'John',
  age: '20',
};

type PersonType = typeof Person;

const newPersonObj: PersonType = {
  name: 'Smith',
  age: '21',
};

読書ありがとう🥳🥳🥳.