TypeScript環境でstyle-componentsを利用したLinkコンポーネントへのpropsの渡し方

# はじめに

create-react-app、TypeScript環境にて、`styled-components`を利用して`react-router-dom`のLinkコンポーネントに`isActive`というオリジナルのpropsを渡したかったのですが、TypeScript環境でどう実装していたかすぐに忘れてしまうのでその覚え書きになります。

もっとスマートなやり方もあるのかもしれませんが、一旦下記の通りでうまく動作するようです。

**開発環境**
- create-react-app 4.0.3
- react 17.0.2
- react-router-dom 5.2.0
- styled-components 5.2.3

# 通常通りに実装してみる
まずは思うがまま、通常通り？に実装してみます。

```react:/src/HeaderAlt.tsx
import React, { ReactNode } from 'react';
import { Link, LinkProps } from 'react-router-dom';
import styled from 'styled-components';

const Navigation = styled.nav`
  width: 100%;
  height: 100px;
`;

type Props = LinkProps & {
  isActive: boolean;
  children: ReactNode;
};

const StyledLink = styled(Link)<Props>`
  font-size: 40px;
  font-weight: ${(props) => (props.isActive ? 'bold' : 'normal')};
`;

const Header = () => {
  return (
    <Navigation>
      <StyledLink to="/" isActive>
        test
      </StyledLink>
    </Navigation>
  );
};

export default Header;
```
表示は問題ないのですが、consoleに不穏な警告メッセージが。。
DOMエレメントに`isActive`なんてないからそんなpropsは受け取れませんよ的に怒られています。。
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268181/190fa8b1-4140-20af-20bb-c2d8f1d658b4.png)

# ちゃんとドキュメントを探す
styled-componentsのドキュメンを探ってみます。

https://styled-components.com/docs/basics#styling-any-component

ReactRouterを利用する際のサンプルを発見！
ひとつ専用のLinkコンポーネントを新規に作成して、それをさらに拡張という形をとればうまくできるようです。
だいぶ回りくどい感じになってしまいますが、下記でエラーなく表示することができるようです。

```react:/src/Header.tsx
import React, { ReactNode } from 'react';
import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
import styled from 'styled-components';

const Navigation = styled.nav`
  width: 100%;
  height: 100px;
`;

type Props = LinkProps & {
  isActive: boolean;
  children: ReactNode;
};

// ここでReactRouterのLinkコンポーネントをくるんだ新規Linkコンポーネントを作成します。
// 今回追加したいpropsであるisActiveをここで渡してあげます。
const Link: React.VFC<Props> = ({ isActive, children, ...props }) => {
  return <ReactRouterLink {...props}>{children}</ReactRouterLink>;
};

const StyledLink = styled(Link)`
  font-size: 40px;
  font-weight: ${(props) => (props.isActive ? 'bold' : 'normal')};
`;

const Header = () => {
  return (
    <Navigation>
      <StyledLink to="/" isActive>
        test
      </StyledLink>
    </Navigation>
  );
};

export default Header;
```

![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1268181/bb1eb3b8-9ec9-633c-c45b-13e3e770a157.png)

# さいごに
大幅な周回遅れで最近styled-componentsを使い始めのでまだまだはまりそうな予感です。
どなたかのお役にたつことがあれば幸いです。

## 補足
上記`Header`コンポーネントを読み込んでいる部分は以下の通りになります。

```react:/src/App.tsx
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Header from './Header';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <Header />
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </BrowserRouter>
  );
}

export default App;
```