marshall0426’s diary

①家事育児記録 ②リスキリング記録

【TS:()の位置の違い】関数の型アノテーションとオブジェクトの引数

()の閉じ方の違いで困惑したので復習。
以下の2つの違い

type User = {
  name: string
  age: number
}
const UserName = (user: User[]): { name: string }[] => {
  return user
}
console.log(UserName([{ name: 'a'}])
type User = {
  name: string
  id: number
}
const UserObject = (user: { name: string; id: number }) => {
  return user
}
console.log(UserOcject([{ name: 'a'}])

1. 関数の型アノテーション
(users: User): { name: string }

この場合、関数の引数と戻り値の型を指定している。
・(users: User)
 引数を定義する部分で、括弧は 複数の引数をまとめる構文上のルール 。
・{ name: string }

 関数の戻り値の型を示す。この場合、{ name: string } 型のオブジェクトを要素に持つ配列を返すことを意味する。

2. オブジェクトの型
(user: { name: string; id: number })

ここでは、オブジェクト型の引数をそのまま定義している。
・{ name: string; id: number }
 name プロパティが文字列型で、id プロパティが数値型であるオブジェクトの型。
 引数型の直接的な表現であり、括弧の中に収める必要があるのは引数部分のみ。

ここでの結論は、関数を表しているか、オブジェクトの引数を表しているか、の違いによるもの。