【TypeScript】型を調べる方法「VSCodeのホバー表示」

基礎

TypeScript

React

使用しているもの

VisualStudioCode

結論

マウスカーソルを、型を確認したい変数の上に移動する
型が表示されるので、ドラッグしてショートカットキー(Windows: Ctrl+CMac: ⌘+C)でコピーする

表示されない場合

VSCode「設定」→「Editor › Hover: Enabled」にチェックが入っているか確認してください

この方法を使った具体例

これからする説明にはReactとTypeScriptを使用しています

既にコンポーネント内に定義している定数・変数を、別のコンポーネントから引数(Props)として渡してあげる形に変更したいときの引数への型付けをする例をもとに説明していきます。

具体例の説明

TypeScriptなどの最近の静的型付け言語には、

という考え方、機能があります。(型推論という機能です。TypeScriptはこれが非常に強力だと言われています。)

なので、以下のコードのような場合は型を省略することが多いわけです。

もう少し具体的に、ここではCSS in JS(CSSをJavaScript内で使うためのもの)のライブラリのひとつである@emotion/reactを使ったコードで解説していきます。

変更前

// SampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import React from "react";

const styles = css`
  font-size: 2rem;
  letter-spacing: 0.3rem;
  font-weight: 700;
`;

export const SampleComponent: React.FC = () => {
  return (
    <>
      <div css={styles}>サンプルテキスト</div>
    </>
  );
};

例えば、定義したstyles 変数を同じコンポーネント内で使用するのでしたら、const styles = css`...` と型付けを省略しても特に問題ないのです。

しかし、これを別のコンポーネントから引数(Props)として渡してあげる形にしたいときに型が必要となってきます。

変更後

子コンポーネント側(呼び出される側)

// ChildSampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { SerializedStyles } from "@emotion/react";
import React from "react";

type Props = {
  css?: SerializedStyles;
};

export const ChildSampleComponent: React.FC<Props> = ({ css }: Props) => {
  return (
    <>
      <div css={css}>サンプルテキスト</div>
    </>
  );
};

親コンポーネント側(呼び出し側)

// ParentSampleComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import React from "react";
import { ChildSampleComponent } from "./component2_after_child";

const styles = css`
  font-size: 2rem;
  letter-spacing: 0.3rem;
  font-weight: 700;
`;

export const ParentSampleComponent: React.FC = () => {
  return <ChildSampleComponent css={styles} />;
};

変更前のconst styles = css`...` を別のコンポーネントから引数として渡したいとき、つまりtype Props = {css?: <stylesが持つ本来の型>}; としたいのですが、型推論を使っているため、変数 styles には型が記載されていないので分からないですよね。

ここで型を調べるために登場するのが「ホバー表示」です！