typescriptの分割代入の使い方

Copy
// 配列を作成
const arr = Array.of(1, 2, 3);

// 分割代入
const [val1,val2] = ...arr

console.log(val1)
console.log(val2)

// ログ
// 1
// 2

Copy
// 配列を作成
const arr = Array.of(1, 2, 3, 4, 5);

// 分割代入
let [val1,val2] = arr
val1 = 2000

console.log(val1)
console.log(val2)

// ログ
// 2000
// 2

Copy
// パターン①
// 配列を作成
const arr1 = [1, "abc", true]

// 分割代入
let [num1, str1, bool1] = arr1

// 型推論は働かないためエラー発生しない
num1 = 'moji'
str1 = 111
bool1 = false

// パターン②
// 型を指定してタプルを設定
const arr2: [number, string, boolean] = [1, "abc", true]

let [num2, str2, bool2] = arr2

// 型推論が働く
num2 = 'moji'　//コンパイルエラー
str2 = 111　//コンパイルエラー
bool2 = false

// パターン③
//　右辺の配列リテラルは TypeScript ではタプル型とされる
let [num, str, bool] = [1, "abc", true] 

// 型推論が働く
num = 'moji' //コンパイルエラー
str = 111 //コンパイルエラー
bool = false

Copy
// 配列を作成
const arr = Array.of(1, 2, 3, 4, 5);

// 分割代入でレスト構文を使う
let [val1, val2,...rest] = arr;

console.log(val1);
console.log(val2);
console.log(rest);

// ログ
// 1
// 2
// (3) [3, 4, 5]

Copy
// 配列を作成
const arr = Array.of(1, 2, 3, 4, 5);

// 分割代入で指定して取得
let [val1, , , , val5] = arr;

console.log(val1);
console.log(val5);

// ログ
// 1
// 5

Copy
type User = {
  id: number,
  name:string,
  age?:number
};

const user:User = { id: 1, name: "hogehoge" }

// idとnameだけ分割代入で取得する
const {id,name} = user

console.table(id)
console.log(name)

// ログ
// 1
// hogehoge

Copy
// typeを定義
type User = {
  id: number;
  name?: string;
  age?: number;
};

// オブジェクト作成
// idしか設定しない
const user: User = { id: 1 };

// idとnameだけ分割代入で取得する
// nameにはデフォルト値を設定
const { id, name = "defoult"} = user;

console.table(id);
console.log(name);

// ログ
// 1
// defoult

Copy
export * from "./add";

// typeを定義
type User = {
  id: number;
  name?: string;
  age?: number;
};

type User2 = {
  id2: number;
  name2?: string;
};

// オブジェクト作成
const user: User = { id: 1 };
const user2: User2 = { id2: 2 };

// idとnameだけ分割代入で取得する
// 型アノテーションを個別で設定
const { id, name = "defoult"}:{id:number,name?:string} = user;

// 型アノテーションをtypeで設定（interfaceでも可）
const { id2, name2 = "defoult2"}:User2 = user2;

console.table(id);
console.log(name);
console.table(id2);
console.log(name2);

// ログ
// 1
// defoult 
// 2
// defoult2

Copy
// typeを定義
type User = {
  id: number;
  name: string;
  age?: number;
};

// オブジェクト作成
const user: User = { id: 1, name: "hogehoge" };

// idとnameだけ分割代入で取得する
const { id, name: firstName }: { id: number; name?: string } = user;

console.table(id);
console.log(firstName);

// ログ
// 1
// hogehoge

Copy
// オブジェクトを定義
let user: {id:number,name:string,age:number} = {
  id: 1,
  name: "hoge",
  age: 20
};

// 分割代入
let {id,age} = user
// 分割代入後も型は保持している
id = 'aaa'　//エラー

Copy
export * from "./add";

// 空オブジェクトの型
type EmptyObject = { [key: string]: any };

// オブジェクトを定義
let user: EmptyObject = {
  id: 1,
  name: "hhoge",
  age: 20
};

// 分割代入用の変数を定義
let id: number, age: number;

// 分割代入
// ()で囲まないとエラーになる
({id,age} = user)

console.table(id);
console.log(age);

// ログ
// 1
// 20

Copy
// オブジェクトを定義
const user = {
  id: 1,
  detail: {
    name: "hoge",
    age: 21
  }
};

// 階層別分割代入する
const {
  detail: { name }
} = user;

console.log(name)

Copy
// 関数を定義
// 分割代入とレスト構文で受け取る
const func = ({id,name,...rest})=>{
  console.log(id)
  console.log(name)
  console.log(rest.age)
}

// typeを定義
type User = {
  id: number,
  name:string,
  age?:number
};

// オブジェクト作成
const user:User = { id: 1, name: "hogehoge",age:21 }

// 関数呼出し
func(user)

// 実行結果
// 1
// hogehoge 
// 21

Copy
/// 関数を定義
// デフォルト値を設定(まとめて設定)
const func = ({id,name}={id:0,name:"defoult"})=>{
  console.log(id)
  console.log(name)
}

// デフォルト値を設定(個別で設定)
const func2 = ({id=99,name="defoult99"}={})=>{
  console.log(id)
  console.log(name)
}

// 関数呼出し
func()
func2()

// ログ
// 0
// defoult 
// 99
// defoult99