Just do IT

思うは招く

React で FC を使ってファンクショナルコンポーネントを定義する

React + TypeScriptでファンクショナルコンポーネントを定義するときの話。

以下の方法でも可能は可能。

type Props = {
  name: string
}

const Person = ({ name }: Props) => {
  return (
    <h2>{name}</h2>
  )
}

export default Person;

ただ、Personがファンクショナルコンポーネントとして定義されていない。

以下のように定義してみると、、、

import { FC } from 'react';

type Props = {
  name: string
}

const Person: FC = ({ name }: Props) => {
  return (
    <h2>{name}</h2>
  )
}

export default Person;

単純にFCを定義しても、エラーが出る。

Type '({ name }: Props) => JSX.Element' is not assignable to type 'FC<{}>'.
  Types of parameters '__0' and 'props' are incompatible.
    Property 'name' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.ts(2322)

FC<Props>と定義すればよい。

import { FC } from 'react';

type Props = {
  name: string
}

const Person: FC<Props> = ({ name }) => {
  return (
    <h2>{name}</h2>
  )
}

export default Person;

Lazygit ファイル ディレクトリツリー 表示・非表示

LazygitでGit操作をするとき、コミットするファイルのディレクトリが表示されているのをファイル名だけの表示にしたい。

ディレクトリ→ファイルで表示されている

これはLazygitを開いているときにバッククォート(`)を打てばファイルパスだけで表示されるようになる。

ファイルパスだけで表示できる

個人的には後者が好み。

しかし、デフォルトだとツリー表示になっているのでファイル表示をデフォルトにしたい。configに以下を追記すればOK。

gui:
  showFileTree: false

設定の参考:

github.com

github.com