typescriptで関数の引数をオブジェクトで持つ型の指定がエラーになる

Question

export interface Hoge {
  name: string;
  path: string;
}

const aa: {
  login: boolean;
  badgeConten: number;
} = ({ login, badgeConten }): Hoge[] => {
  return [
    {
      name: "ログイン",
      path: "sign-in",
    },
    {
      name: "ログアウト",
      path: "sign-out",
    },
  ];
};

だと

const aa: {
    login: boolean;
    badgeConten: number;
}
'aa' is declared but its value is never read.ts(6133)
Type '({ login, badgeConten }: { login: any; badgeConten: any; }) => Hoge[]' is missing the following properties from type '{ login: boolean; badgeConten: number; }': login, badgeConten

や
var login: any
All destructured elements are unused.ts(6198)
Binding element 'login' implicitly has an 'any' type.ts(7031)

となってしまいます。型の指定方法が違っているのでしょうか？ご教授お願いします。

Comments

[hoshi-takanori]

aa は関数ですよね。型が関数になってませんけど…。

[roooo]

const aa: {
引数の型
} = ({ 引数 }): 戻り値の型 => {
return [
{
name: "ログイン",
path: "sign-in",
},
{
name: "ログアウト",
path: "sign-out",
},
];
};

と違いますか？すいません。

Answer 1

こんな感じでしょうか。(よく考えたら : Hoge[] は省略可能だったので省略しました。)

const aa: (args: {
  login: boolean;
  badgeConten: number;
}) => Hoge[] = ({ login, badgeConten }) => {
  // 以下略

---

const aa: の後ろの以下の部分が関数の型になります。引数は、login と badgeConten というプロパティを持った一つのオブジェクトになります。TypeScript の文法上、引数の名前が必要ですが、引数名はあくまで型を書くのに必要なだけで、実際のコードでは使われません。
参考: 1-3. 関数の型 (TypeScriptの型演習（解答・解説編） - Qiita)

(args: {
  login: boolean;
  badgeConten: number;
}) => Hoge[]

関数そのものは、型を省略して書くと次のようになります。

// 引数を args で受け取る場合
const aa = (args) => {
  // 以下略

// 引数を login, badgeConten に分割して受け取る場合
const aa = ({ login, badgeConten }) => {
  // 以下略

引数を args で受け取った場合は args.login や args.badgeConten と書くことになりますが、分割して受け取った場合は args は不要で login, badgeConten とだけ書いて使えます。
参考: 関数の引数で分割代入ができる - Qiita

Comments

[roooo]

args.loginみたいな感じでアクセスするのでしょうか？
argsは省略して記述することは不可能でしょうか？