TypeScript　まとめ２（ユーティリティ型）

## TypeScriptまとめ集
1. [型について](https://qiita.com/hiro-hiro/items/f2dc671f48e2599e923b)
1. [ユーティリティ型](https://qiita.com/hiro-hiro/items/0f0201a8a49db06e0032)
1. [モジュール化](https://qiita.com/hiro-hiro/items/9879a297cf5b30c474e2)
1. [インストール〜コンパイル方法](https://qiita.com/hiro-hiro/items/52108807c0594798e1c3)

## 目次
1. [ユーティリティ型とは？](#1ユーティリティ型とは) 
1. [ユーティリティ型早見表](#2ユーティリティ型早見表)
1. [ユーティリティ型サンプルコード](#3ユーティリティ型サンプルコード)

## 1.ユーティリティ型とは？
既存の型を元にした新規型を手軽に生成できる。

## 2.ユーティリティ型早見表

|書き方|変換結果|
|---|---|
|Partial```<T>```|任意型に変換|
|Readonly```<T>```|読み取り専用に変換|
|Required```<T>```|必須型に変換|
|Record```<K,T>```|指定の型を持つプロパティ群を生成|
|Pick```<T,K>```|既存の型から特定のプロパティだけを抽出|
|Omit```<T,K>```|Pickと同じ|
|Exclude```<T,U>```|既存の型から特定の型を除外|
|Extract```<T,U>```|Excludeと同じ|
|NonNullable```<T>```|null｜undefinedを除外|
|Parameters```<T>```|関数型の引数を元にタプル型を生成|
|ReturnType```<T>```|関数型の戻り値型を生成|
|ConstructorParameters```<T>```|コンストラクターの引数型を元にタプル型を生成|
|ThisType```<T>```|関数の中で使用されるthisの型を指定|
|ThisParameterType```<T>```|関数型のthis引数の型を抽出|
|OmitThisParameter```<T>```|関数型のthis引数の型を除外した型|
|Uppercase```<Stringtype>```|大文字に変換|
|Lowercase```<Stringtype>```|小文字に変換|
|Capitalize```<Stringtype>```|１文字目を大文字に変換|
|Uncapitalize```<Stringtype>```|１文字目を小文字に変換|


## 3.ユーティリティ型サンプルコード

### Partial```<T>```

型Tのプロパティを**任意型(省略可能)**に変換

```typescript:typescript()
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//sampleの全プロパティを任意型(~?)に変換
type sampleOp = Partial<sample>;

//これと同義
interface sampleOp {
  name?: string,
  age?: number
}
```

### Readonly```<T>```

型Tのプロパティを**読み取り専用**に変換

```typescript:typescript(Readonly)
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//sampleの全プロパティを読み取り専用に変換
type sampleOp = Readonly<sample>;

//これと同義
interface sampleOp {
  readonly name: string,
  readonly age: number
}
```

### Required```<T>```

型Tのプロパティを**必須プロパティ**に変換する

```typescript:typescript(Required)
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//sampleの全プロパティを必須プロパティに変換
type sampleOp = Required<sample>;
```

### Record```<K,T>```

**型Kのプロパティ名で、型は型Tのプロパティ群を生成**する。

```typescript:typescript(Record)
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//{'AAA':sample, 'BBB':sample}のプロパティを持つ型を生成
type sampleOp = Record<'AAA'|'BBB', sample>;

//これと同義
interface sampleOp {
  AAA: sample
  BBB: sample
}
```

### Pick```<T,K>``` / Omit```<T,K>```

**型Tから型Kを抽出**する

```typescript:typescript(Pick,Omit)
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//sampleのnameプロパティだけを抽出
type sampleOp = Pick<sample, 'name'>;

//これと同義
interface sampleOp {
  name: string
}
```

### Exclude```<T,U>``` / Extract```<T,U>```

**型Tから型Uを除外**する 

```typescript:typescript(Exclude,Extract)
//インターフェイスを定義
interface sample{
  name: string,
  age: number
}

//sampleのnameプロパティを除外
type sampleOp = Extract<sample, 'name'>;

//これと同義
interface sampleOp {
  age: number
}
```

### NonNullable```<T>```

型Tから**null | undefinedの方を持つプロパティを除外**する

```typescript:typescript(NonNullable)
//インターフェイスを定義
interface sample{
  name: string,
  nul: null,
  unde: undefined
}

//sampleのnull|undefinedの型を持つプロパティを除外
type sampleOp = NonNullable<sample>;

//これと同義
interface sampleOp {
  name: string,
}
```

### Parameters```<T>``` / ReturnType```<T>``` / ConstructorParameters```<T>```

* 与えられた関数型の引数を元に**タプル型を生成**する 。
* ReturnTypeは関数型の戻り値型をタプル型として返す。
* ConstructorParametersはコンストラクターの引数型を元にタプル型として返す。

```typescript:typescript(Parameters,ReturnType,ConstructorParameters)
//引数付きの関数を定義
function sample(name:string, age:number){ ... }

//sampleの引数を元にタプル型を生成
type sampleOp = Parameters<typeof sample>;
```

### ThisType```<T>```, ThisParameterType```<T>```, OmitThisParameter```<T>```

* ThisTypeは関数の中で使用されるthisの型をTに指定できる。（-noImplicitThisを設定する必要あり）
* ThisParameterTypeは関数型Tのthis引数の型を抽出した型を生成する。（--strictFunctionTypesを設定する必要あり）
* OmitThisParameterは関数型Tのthis引数の型を取り除いた型を生成する。（--strictFunctionTypesを設定する必要あり）

```typescript:typescript(ThisType,ThisParameterType,OmitThisParameter)
//ThisType
interface A {
  name: string;
}
interface B {
  hello(): void;
}

//thisの型を指定する
const obj: B & ThisType<A> = {
  hello() {
    console.log(`Hello, ${this.name}`);
  },
};

//ThisParameterType
function sample(this: number) {
  return this.toString()
}
type TypeA = ThisParameterType<typeof sample> //number

//OmitThisParameter
function sample(this: number) {
  return this.toString()
}
type TypeA = OmitThisParameter<typeof sample> //string
```

### Uppercase```<StringType>``` / Lowercase```<StringType>```

TypeScript 4.1で追加。
Uppercaseは全てstring型のプロパティのプロパティ名を**大文字**にする。
Lowercaseは全てstring型のプロパティのプロパティ名を**小文字**にする。

```typescript:typescript(Uppercase,Lowercase)
//Uppercase
//sampleを大文字に変換
type sample = Uppercase<'sample'>;
//これと同義
type sample = 'SAMPLE';

//Lowercase
//sampleを小文字に変換
type sample = Lowercase<'SAMPLE'>;

//これと同義
type sample = 'sample';
```

### Capitalize```<StringType>``` / Uncapitalize```<StringType>```

TypeScript 4.1で追加。
Capitalizeは全てstring型のプロパティのプロパティ名の**１文字目を大文字**にする。
Uncapitalizeは全てstring型のプロパティのプロパティ名の**１文字目を小文字**にする。

```typescript:typescript(Capitalize,Uncapitalize)
//Capitalize
//sampleの１文字目を大文字に変換
type sample = Capitalize<'sample'>;

//これと同義
type sample = 'Sample';

//Uncapitalize
//sampleの１文字目を小文字に変換
type sample = Uncapitalize<'Sample'>;

//これと同義
type sample = 'sample';
```