TypeScript 型一覧

## はじめに
今回初めてTypeScriptでNext.jsを利用したいと考え、まずは型定義でしっかりとハマることがあったので、頭の整理のためにまとめてみたいと思います。


- object型 
    ```jsx
    const person: {
    	name: string;
    	age: number
    } = {
    	name: 'taro',
    	age: 20,
    }
    ```
<br>

- array型
    
    ```jsx
    //すべての要素に対して、ひとつの型のみを許可する型指定
    let favoriteActiveties: string[] = ['basketball', 'soccer'];
    //変数に対して変数であるというだけの型指定。要素に対してはどのような型でも許容する
    let favoriteWords: any[] = ['love', 0, 'family'];
    //tuple型: 変数に対して配列であり、配列の長さ、配列の要素の指定をする。配列メソッドのpushによる配列操作に対する制限はできない
    let favoriteWords: [string,number,string] = ['love', 0, 'family'];
    ```
<br>

- enum型
  ```jsx
    enum 大文字から始める利用したいenum名 {
    	利用したい命名1,
    	利用したい命名2,
    	...
    }
    enum Role {
        engineer,
        manager,
        dad
    }
    
    const person = {
        name: 'taro',
        age: 20,
        hobbies: ['fashion','basketball'],
        role: Role.engineer
    }
    
    if(person.role===Role.engineer){
        console.log(Role)
    }
   ```
<br>

- any型(非推奨: 型定義として汎用性が高すぎる)
    
    ```jsx
    const example: any[] = ['name','age',10,'gender'];
    ```
<br>

- union型
    
    変数に対して、いくつかの型を許容するときに利用できる
    
    ```jsx
    function conbine(input1: number | string, input2: number | string) {
        let result
        if (typeof input1 === 'number' && typeof input2 === 'number') {
            result = input1 + input2
        } else {
            result = input1.toString() + input2.toString();
        }
        return result
    }
    const conbineAges = conbine(1, 50)
    const conbineName = conbine('tanaka', 'taro')
    console.log(conbineAges);
    console.log(conbineName);
    ```
    <br>

    
- type型 (型エイリアス/ カスタム型)
    
    型を変数に格納するようなこと。
    
    オブジェクトの型定義など記述が冗長になるものを、エイリアス型で記述することで型指定の記述を短くすることができる
    
    ```jsx
    type Combinable = number | string;
    //このように記述することで、union型の記述をしなくても型定義にCombinableと指定すればOK
    
    ```
    <br>

- void型
        関数の戻り値がなにもないということを意味する型定義である
        returnでなにも返ってこないときに利用する。通常明示的に示す以外には特別利用することはない
<br>

- function型
        関数を格納する変数名を宣言するときに利用する

    ```javascript
        type Add = (a: number, b: number) => number
        let combineVals: Add;
        //上の記述では指定された関数型が入る変数であると宣言している
        combineVals = (num1: number, num2: number) => {
          let calcNum = num1 * num2
          let plusNum = num1 + num2
          const result = calcNum + plusNum
          return result
        }
        //typeにそった関数を実装する
        console.log(combineVals(3, 5))
    ```

        


        
    - コールバック関数に対する型定義
        
        ```jsx
        function addAndHundle(num1: number, num2: number, cd:(num: number) => void): void {
            const result=num1+num2;
            cd(result);
        }
        addAndHundle(4,5,(result)=>{
            console.log(result)
        })
        ```
<br>      

- unknown型
    
    ```jsx
    let userInput: unknown
    // unknownはなにが入ってくるかわからないという意味
    let userName: string
    userName = userInput;
    // これはエラーになる
    // userInputはなにが入ってくるかわからないということが明示されている
    // userNameはstringであるということが担保されている状況でないと代入することができない
    // この場合でエラーを発生させない方法は
    if (typeof userInput === 'string') {
        userName = userInput
    }
    ```
<br>

- never型
    
    void型と異なる点は決して戻り値が発生することがない場合に利用する
    
    このようなスクリプトをクラッシュするような関数に関しては絶対に戻り値が発生することはないため、neverを利用すると明示的にスクリプトをクラッシュさせるのだと伝えられる
    
    ```tsx
    function generateError(message: string, code: number):never{
    	throw {message: message, code: code}
    }
    ```

## まとめ
今回初めてTypeScriptを利用して、型を定義することによる開発のしやすさを感じることもありました。しかし、ReactやNext.js特有の型定義によってハマってしまったこともありました。
TypeScriptの優位性を本質的な利用ができるように、今後も取り組んでいきたいと思いました。