TypeScript 型一覧

はじめに

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

• object型

  const person: {
  	name: string;
  	age: number
  } = {
  	name: 'taro',
  	age: 20,
  }
  

• array型

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

• enum型

    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)
    }
  

• any型(非推奨: 型定義として汎用性が高すぎる)

  const example: any[] = ['name','age',10,'gender'];
  

• union型

  変数に対して、いくつかの型を許容するときに利用できる

  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);
  

  
  

• type型 (型エイリアス/ カスタム型)

  型を変数に格納するようなこと。

  オブジェクトの型定義など記述が冗長になるものを、エイリアス型で記述することで型指定の記述を短くすることができる

  type Combinable = number | string;
  //このように記述することで、union型の記述をしなくても型定義にCombinableと指定すればOK
  
  

  
  

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

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

      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))
  

  • コールバック関数に対する型定義

    function addAndHundle(num1: number, num2: number, cd:(num: number) => void): void {
        const result=num1+num2;
        cd(result);
    }
    addAndHundle(4,5,(result)=>{
        console.log(result)
    })
    

• unknown型

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

• never型

  void型と異なる点は決して戻り値が発生することがない場合に利用する

  このようなスクリプトをクラッシュするような関数に関しては絶対に戻り値が発生することはないため、neverを利用すると明示的にスクリプトをクラッシュさせるのだと伝えられる

  function generateError(message: string, code: number):never{
  	throw {message: message, code: code}
  }
  

まとめ

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