今回はTypeScript

最近モダン開発で流行ってる型をつけたjavascript。代入時や結果に型が合わないなどの不具合を未然に防ぐ事ができる。

型

boolean・number・stringは特によくつかう

let v_bool:boolean = true;
let v_num:number = 123;
let v_str:string = "ABCDEFG";
let v_null:null = null;
let v_undef:undefined = undefined;

配列

1番目と3番目はよく使う

let v_arr1:string[] = ["Red", "Green", "Blue"];
let v_tuple:[string, number] = ["Yamada", 26];
// 二次元配列
let twoDarray:number[][] = [
  [50, 100],
  [150, 300]
]

オブジェクト

let v_objA:object = {}
let v_objB:{} = {}
let v_objC:{
	name:String,
	age:Number,
	man:Boolen
} = {
	name: "太郎",
	age: 18,
	man: false
}

ユニオン型(型が混在する)

let twoDarray02:(number | string | boolean)[] = [ 1,"文字列",true ]
// 配列の中にオブジェクト
let arrayObj:{ name:String, age:Number, sex?:Boolean }[] = [
  { name: "麦生田", age: 20, sex:true}
]

どの型が入るか分からない時（ジェネリクス）

ユニオン型と同じ？

const getNumber = function<T>(e:T) {
  console.log(e);
}
getNumber(true);// true
getNumber(100);// 100
getNumber("konbanha");// konbanha

// APIやユーザー入力
const arr = [1,2,3,"ai"] //渡ってくるAPIの中身が分からない時
// 抽象的な型指定
type jene<T> = {
data: T
}
function getApi<T>(arr: T[]){
　return arr[0]
}
console.log(getApi(arr))
// 使い回し
type student = jene<{id:number, name:string, age:number}>
const list:student = {
 data:{
  id:2,
  name: "田中",
  age: 40
 }
}
// 関数にする場合
function listIdAge(list:student):number {
 return list.data.id + list.data.age
}
console.log(listIdAge(list))

interface

interfase taro{
	name:String,
	age:Number,
	man:Boolen
}

let v_objD: taro = {
	name: "太郎",
	age: 18,
	man: false
}

type(型の使い回しができる)

ユニオン型と同じでAPIやユーザーの入力で開発側から指定できない時（ジェネリクス）

これで大体はOK

複数の型が入る物

const aaa:string | number = 23;
// 関数宣言分
function increment(num: number): number {
  return num + 1;
}
// 関数式
const increment = function (n: number): number {
  return n + 1;
};

返り値が無い関数

const bbb = function():void {
	console.log("hello")
}
bbb()

---

感想

大規模サイトになると定数や変数が被ったり、分からなくなるのでtypescriptは結構必須だろう
今後も開発には積極的にtypescript使って行こう