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

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

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

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3011閲覧

React ー typescriptとstyledcomponentでreact-router-domのLinkをベースにコンポネントをつくるとエラーになる

退会済みユーザー

退会済みユーザー

総合スコア0

TypeScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/03/09 11:57

編集2020/03/09 11:58

react-router-domのLinkコンポネントを基にstyled-componentとtypescriptで、スタイルを適用したLinkコンポネントを作ろうとしています。
以下Linkコンポネント部分のソースコードです

import React from 'react'; import { Link as RouterLink, LinkProps } from 'react-router-dom'; import styled from 'styled-components'; export const Link: React.FC<LinkProps> = props => <StyledLink {...props} />; const StyledLink = styled(RouterLink)` text-decoration: none; `

いくつかのサイト通りにコードを書きましたが以下のエラーがでてしまいます。

TS2769: No overload matches this call. Overload 1 of 2, '(props: Pick<Pick<LinkProps<unknown> & RefAttributes<Link<unknown>>, "style" | "title" | "type" | "ref" | "component" | "to" | "replace" | "innerRef" | "download" | ... 259 more ... | "key"> & Partial<...>, "style" | ... 267 more ... | "key"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type '{ component?: ComponentClass<any, any> | FunctionComponent<any> | undefined; to: string | LocationDescriptorObject<PoorMansUnknown> | ((location: Location<...>) => LocationDescriptor<...>); ... 264 more ...; onTransitionEndCapture?: ((event: TransitionEvent<...>) => void) | undefined; }' is not assignable to type 'Pick<Pick<LinkProps<unknown> & RefAttributes<Link<unknown>>, "style" | "title" | "type" | "ref" | "component" | "to" | "replace" | "innerRef" | "download" | ... 259 more ... | "key"> & Partial<...>, "style" | ... 267 more ... | "key">'. Types of property 'to' are incompatible. Type 'string | LocationDescriptorObject<PoorMansUnknown> | ((location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>)' is not assignable to type 'string | LocationDescriptorObject<unknown> | ((location: Location<unknown>) => LocationDescriptor<unknown>)'. Type '(location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>' is not assignable to type 'string | LocationDescriptorObject<unknown> | ((location: Location<unknown>) => LocationDescriptor<unknown>)'. Type '(location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>' is not assignable to type '(location: Location<unknown>) => LocationDescriptor<unknown>'. Types of parameters 'location' and 'location' are incompatible. Type 'Location<unknown>' is not assignable to type 'Location<PoorMansUnknown>'. Type 'unknown' is not assignable to type 'PoorMansUnknown'. Type 'unknown' is not assignable to type '{}'. Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Link, any, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof Link, any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '{ component?: ComponentClass<any, any> | FunctionComponent<any> | undefined; to: string | LocationDescriptorObject<PoorMansUnknown> | ((location: Location<...>) => LocationDescriptor<...>); ... 264 more ...; onTransitionEndCapture?: ((event: TransitionEvent<...>) => void) | undefined; }' is not assignable to type 'Pick<Pick<LinkProps<unknown> & RefAttributes<Link<unknown>>, "style" | "title" | "type" | "ref" | "component" | "to" | "replace" | "innerRef" | "download" | ... 259 more ... | "key"> & Partial<...>, "style" | ... 267 more ... | "key">'. Types of property 'to' are incompatible. Type 'string | LocationDescriptorObject<PoorMansUnknown> | ((location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>)' is not assignable to type 'string | LocationDescriptorObject<unknown> | ((location: Location<unknown>) => LocationDescriptor<unknown>)'. Type '(location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>' is not assignable to type 'string | LocationDescriptorObject<unknown> | ((location: Location<unknown>) => LocationDescriptor<unknown>)'. Type '(location: Location<PoorMansUnknown>) => LocationDescriptor<PoorMansUnknown>' is not assignable to type '(location: Location<unknown>) => LocationDescriptor<unknown>'.

解決策を教えていただけないでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

昨日一日中悩んだ挙句、先ほど質問したのですが
下記の通りに交差型でtype宣言すれば動きました。
バージョンアップの影響なのかわかりませんがLinkPropsだけでは足りなくなったようですね。

type Props = LinkProps & { to: string };

投稿2020/03/09 12:28

編集2020/03/09 12:30
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問