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

JavaScriptからTypeScriptを始めようとすると「型を付けるのは分かったけど、どうやって調べるんだろう...？」と悩みますよね。
今回はTypeScriptで型を調べる方法「VSCodeのホバー表示」についてまとめていきます。

使用しているもの

VisualStudioCode

結論

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

(表示されない場合)
VSCode「設定」→「Editor › Hover: Enabled」にチェックが入っているか確認してください

この方法を使った具体例

(Reactを使った例)

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

具体例の説明

TypeScriptなどの最近の静的型付け言語には、「ぱっと見で型が分かる定数や変数は、型を付けなくても分かるし省略しよう！」という考え方、機能があります。(型推論という機能です。TypeScriptはこれが非常に強力だと言われています。)
なので、以下のコードのような場合は型を省略することが多いわけです。

Good◎：const num = 100
Bad△：const num: number = 100

もう少し具体的に、ここでは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 には型が記載されていないので分からないですよね。
ここで型を調べるために登場するのが「ホバー表示」です！

ホバーを使って、表示された型をコピペで定義してあげることにより、type Props = {css?: SerializedStyles;}; と型を付けることができました。

もちろん、なんでも渡すことができるany 型を使えばエラーは出ないですが、せっかくTypeScriptを使っているのですから極力型を付けるようにしていきましょう。