Typescriptの型

オブジェクトやら配列やらnever?ってどう対処すればいいのか、もうわけがわからずいつもtypeエラーで使いたく無いと思える時もありました。
今回色々な型の定義方法を書きとめます。

基本の基本

基本的な型

type Baseobj = {
    数字 : number
    文字 : string
    真偽 : boolean;
    なんでも:  any;
    配列1 : string[];
    "配列2" : Array<string>
    オブジェクト1: {}
    "オブジェクト2": {key:string}
    }
//こんな感じで使用することができる。
  let demodata: Baseobj;
  let tempdata ={
    数字:1001 , 
    文字:"文字れつ",
    真偽 : true,
    なんでも:[{オブジェクト:"配列とか、なんでも"},],
    配列1:["配列の","文字","だけ"],
    配列2:[123,456,789],
    オブジェクト1:{キー:"数字とか、文字とか"},
    オブジェクト2:{key:"文字"}
  }
  demodata = tempdata;
  console.log(demodata);

ここまでは、見たらなんと無く分かる。
しかしこんなに綺麗な型でデータを取得出来るとは限らない。

応用編

応用編とは言ったものの難しい事はしない。とりあえず動く、エラーを吐かないようにするだけ。

文字か数字か分からない

配列の中は文字、または数字の両方が入る可能性がある。

    type Baseobj2 = {
        配列1 : (string|number)[];
        }
  let demodata: Baseobj2 = {
    配列1:["配列の","文字","も","数字も大丈夫",123],
  };
console.log(demodata);
//真偽も追加する場合はとなる。
//配列1 : (string|number|boolean)[];

オブジェクトキーの可変型

オブジェクトのキーが決まってる場合は良いのだけれどキーを追加する時は？
大括弧を使う

type object1 = {
    [ids:string]: string
}

  let id:string[] = ["id1","id2","id3","id4"];
  let name:string[] = ["一番","二番","三番","四番"];
  let kahenobj:Baseobj3 = {};
  id.map((value:string,index:number)=>{
    kahenobj[value]= name[index];
  })
  console.log(kahenobj);
  /*
  console.logの出力は
  {
    "id1": "一番",
    "id2": "二番",
    "id3": "三番",
    "id4": "四番"
    }
*/
//returnが無いのにarray.mapを使うなっていうのは置いといて...

このようにオブジェクトキーが変わる。可変である場合は大括弧を使う

ちなみに一般的には

ドキュメント関係はkeyと記されている。

type Baseobj3 = {
    [key:string]: string
}
//キーの部分はkeyと記されている。

オブジェクトのキーが存在する場合と存在しない場合

返って来る値に特定のキーが存在する場合としない場合どうすればいいのか？

type Baseobj = {
    数字 : number
    文字 : string
    真偽 : boolean;
    なんでも:  any;
    配列1 : string[];
    "配列2" : Array<number>
    オブジェクト1: {[ids:string]: {}}
    "オブジェクト2": {key:string}
    
    }
////////////////
  let tempdata1 ={
    数字:1001 , 
    文字:"文字れつ",
    真偽 : true,
    なんでも:[{オブジェクト:"配列とか、なんでも"},],
    配列1:["配列の","文字","だけ"],
    配列2:[123,456,789],
    オブジェクト1:{キー:"数字とか、文字とか"},
    オブジェクト2:{key:"文字"}
  }
  let tempdata2 ={
    数字:1001 , 
    文字:"文字れつ",
    オブジェクト2:{key:"文字"}
  }
    let demodata: Baseobj;
    demodata = tempdata1;
    demodata = tempdata2;//<-エラーが出る。

このようにtypeを指定しているのに、そのキーが存在しない場合はtypeエラーが発生する。その場合は?

type Baseobj = {
    数字 : number
    文字 : string
    真偽? : boolean;
    なんでも?:  any;
    配列1? : string[];
    "配列2"? : Array<number>
    オブジェクト1?: {[ids:string]: {}}
    "オブジェクト2"?: {key:string}
    }
      let tempdata1 ={
    数字:1001 , 
    文字:"文字れつ",
    真偽 : true,
    なんでも:[{オブジェクト:"配列とか、なんでも"},],
    配列1:["配列の","文字","だけ"],
    配列2:[123,456,789],
    オブジェクト1:{キー:"数字とか、文字とか"},
    オブジェクト2:{key:"文字"}
  }
  let tempdata2 ={
    数字:1001 , 
    文字:"文字れつ",
  }
    let demodata: Baseobj;
    demodata = tempdata1;
    demodata = tempdata2;//<-エラー出ない。

はてな「?」を付けることでtypeエラーがでなくなる。

配列内のオブジェクト

配列内に特定の型のオブジェクトが入っていた場合の型の宣言は次のようにすることができます。

type Tobj ={
    name: string;
    age: number;
}[]

  const arrayobj = [{name:"名前１",age:28},{name:"名前2",age:11},{name:"名前3",age:33}]
  let Tos:Tobj =arrayobj;
  console.log(Tos)
//ちなみに下のように分けて書くこともできる。
//私は分けて書く派。
type human = {name : string; age: number}
type people = human[]
let Tos2:people =arrayobj;

その他

ほとんどの場合は上記だけで切り抜けれそうであるが...
たまに暗号のような型が発生することがあり、どうしても複雑に見えてしまう。
「ジェネリック型,交差型,条件型,Union型(一応今回使った)」

分かりやすかったサイト

• ジェネリック型
• 交差型
• 条件型

また他の型は「null,undefined,void,unknown,never」とかもある。

typeエラー回避

typescriptを使用しているとどうしてもtypeエラーが解決出来なかったり、とりあえず今はtypescriptのエラーを無視してほしい状況の場合次のように コードを一行書くことでtypeエラーを無視することができる。

//###ページ全体を無視。一番上に書いてください。
// @ts-nocheck 

//###次の行を無視
//  @ts-ignore
tmpobj[value].type = users[value]["type"];//<-これが無視される。

まとめ

typescriptを使うと型宣言でエラーが発生して...何が違うのですか？
ではどのように型を定義すればいいのですか？となり、最初は辛かったし、今でもあまり使いたく無いと思う事も多い。
だって面倒くさいもん。
個人で小規模であれば使わないが、大規模になって来るとtypescriptを使わないと、この値って何返って来るんだっけ?
ここは文字？数字の引数渡して...? どこで間違ってしまったんだエラーが発生していないのだが...となってしまうので必要なのも分かる。
typescriptは引数に何が入って何を渡しているのかを型である程度判断できるため、コメントの代わりにもなっている。
そのため、typescriptを使わなくてもいいが、使える必要性があると感じる。