ぷっぽプログラミング備忘録

linux, javascript, php, C#, そのうちScalaとかアプリ開発とかやってみたいです。

typescriptの名前付き引数(名前付き引数の中に関数がある場合)の書き方

概要

name1という名前の文字列と、func1という名前の「引数なし、返却値なしfunction」をプロパティに持つオブジェクトを受け取る場合

function hoge({name1, func1}: {name1:string, func1:() => void}) {
  console.log(name1);
  func1();
}

function method1() {
  console.log('test!');
}

hoge({name1:"puppo tarou", func1:method1})

結果

puppo tarou
test!

説明

typescriptで引数が関数だった場合の型指定は、「アロー演算子likeで書く」のがポイント。
func1が引数なし返却なしの関数 -----------> () => void という型
となる。

他の例

func2がstring引数1つ、Arg1型の返却ありの関数 ------> (a:string) => Arg1

// typescriptはオブジェクトを使う場合は、毎度型を定義しないとダメっぽいのでArg1という方を定義
interface Arg1 {
  foo: string;
  bar: string;
}

function hoge2({name2, func2}: {name2:string, func2:(a:string) => Arg1}) {
  console.log(name2);
  let resultFunc = func2(name2);
  console.dir(resultFunc);
}

function method2(arg1:string): Arg1 {
  console.log('test2!');
  return {foo:'aaa', bar:'bbb'};
}

hoge2({name2:"puppo tarou2", func2:method2})

結果 f:id:teenprogrammer:20220206114615p:plain