質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

7635閲覧

TypeScript:パラメータの型エラーを解決したい

senseIY

総合スコア281

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1グッド

0クリップ

投稿2022/06/08 02:04

編集2022/06/08 03:15

解決したいこと

typescriptで以下のような型エラーが発生してしまうので解決したいです

(alias) const usersShow: (id: Partial<UserType>) => string import usersShow 型 '(id: Partial<UserType>) => string' の引数を型 'string' のパラメーターに割り当てることはできません。ts(2345) users.tsx(6, 20): この式を呼び出すことを意図していましたか?

関係するコード

### apis/users.tsx ### このファイルでエラーが出ています import axios from "axios"; import { usersShow } from "../urls/index"; export const fetchUser = () => { return axios.get(usersShow)    <=ここのusersShowでエラーが出ています .then(res => { return res.data }) .catch((e) => console.error(e)) } ### urls/index.tsx ### const DEFAULT_API_LOCALHOST = "http://localhost:3000/api/v1" interface UserType { id: any } export const usersShow = (id: Partial<UserType>):string => `${DEFAULT_API_LOCALHOST}/users/${id}` ### App.tsx ### import { BrowserRouter, Routes, Route, useParams } from "react-router-dom"; import { Users } from "./containers/User"; import { MainTargets } from "./containers/MainTarget"; import { SubTargets } from "./containers/SubTarget"; function App() { return ( <> <BrowserRouter> <Routes> <Route path="users/:usersId" element={<Users />} /> </Routes> </BrowserRouter> </> ); } export default App;

環境など

・railsをapiモードで使っています。
・とりあえずshowアクションのみ載せています
・rails7系 ruby 3系 react18系を使用しており、Dockerで環境構築を行いました。
・エラーが出てしまったのでまだ詳細なコードは書いていません

期待する動作(まだコードは完成していません)

1React側からaxiosを使ってrailsで作ったapiを叩きに行く(今回はshowアクション。)
2 apiからのresを受け取り、React側で表示する

自分でやったこと

まず、エラーの内容をみて何をすればいいか考えてみましたが、エラーの意味がよくわかりませんでした。恐らく、引数として受け取ったidをテンプレートリテラルの中に入れる際に型エラーが起きていると思われます。なので、interfaceにid:any(入ってくる数字が文字扱いなのか数字扱いなのかわからなかったのでとりあえずanyにしました。id:stringにしてもエラーが出ました)を設定しました。しかし、エラーが直りませんでした。
次にこの方の記事を参考にしてみました
https://teratail.com/questions/252125
どうやら「型をPartial<User>」のようにすると直ったようです。ですが私の場合エラーが直りませんでした。
他にも調べたのですが、なぜエラーになるのか分かりませんでした。何かしらアドバイスがあればよろしくお願いいたします。

ikyu👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

https://zenn.dev/mkt_engr/articles/axios-req-res-typescript
こちらのサイトを参考にしたところ上手く動くようになりました。ご協力ありがとうございました。

投稿2022/06/08 04:26

senseIY

総合スコア281

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問