typescriptの非同期処理(asyn/await)の戻り値がPromise型になってしまい、意図したものにならない

前提・実現したいこと

React×TypeScript
hooksを用いてシステムを作成しています。

TypeScriptBでapi通信をした後、返却値をTypeScriptAで受け取り、
setSkillsでstateを更新できるように型を定義できることが、実現したいゴールです。

問題は、
await setSkills(res.data);
にて型定義Errorが起きます。
以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

プロパティ 'data' は型 '(dispatch: Dispatch<any>) => Promise<number[]>' に存在しません。ts(2339)

該当のソースコード

TypeScriptA
1const Dashboard = () => {
2  const [skills, setSkills] = useState<[]>([]);
3  const user = useSelector((state: RootState) => state.auth.user);
4  const dispatch = useDispatch();
5  useEffect(() => {
6    let didCancel = false;
7
8    (async () => {
9      if (user && user.id) {
10        const res = await getOwnSkillIds(user.id);
11        if (!didCancel) {
12          await setSkills(res.data);
13        }
14      }
15    })();
16
17    return () => {
18      didCancel = true;
19    };
20  }, [skills]);
21
22-----(後略)------
23}
24

TypeScriptB
1  useEffect(() => {
2    let didCancel = false;
3
4    (async () => {
5      if (user && user.id) {
6        const res = await getOwnSkillIds(user.id);
7        if (!didCancel) {
8          await setSkills(res.data);
9        }
10      }
11    })();
12
13    return () => {
14      didCancel = true;
15    };
16  }, [skills]);
17

Typescript
1export function getOwnSkillIds(userId: number) {
2  return async function(dispatch: Dispatch<any>) {
3    try {
4      const response = await baseAxios.get<[]>(
5        `/skills/own_skill_ids/${userId}`,
6        {}
7      );
8
9      return response.data;
10    } catch (err) {
11      return [];
12      // エラー処理
13    }
14  };
15}

試したこと

await/async 以外の書き方を試してみる(Promiseなど)
Promise.resolve()の書き方で解決できないか？

ただ、jsの非同期処理の本質がわかっていないためか、どの方法でも、型エラーを解決できませんでした。

非同期処理をawait/asyncで記載した場合には戻り値はどのように扱えばよいのでしょうか？
または別の解決方法がありましたらご教授頂けますと幸いです。

補足情報（FW/ツールのバージョンなど）

React
TypeScript

行動規範の内容に同意します

回答2件

ベストアンサー

プロパティ 'data' は型 '(dispatch: Dispatch<any>) => Promise<number[]>' に存在しません。ts(2339)

エラーメッセージのとおりです。getOwnSkillIdsの返り値は関数ですので、dataプロパティは参照できません。

投稿2020/01/29 02:09

maisumakun

総合スコア145183

ManaKuri09

2020/01/29 06:16

ご返答ありがとうございます。確かに、 return async function(dispatch: Dispatch<any>) という返却値のため、関数型になってしまっている事は理解しました。そうなってくると、その関数内で返却した値を参照したいとなると、別途処理を挟む必要があるのでしょうか？もしくは今書いたreturnを関数じゃないように記載する必要があるのでしょうか？叶えたいことは、api通信を同期的に処理し、その返却値を呼び元で使いたいという内容なのです。