TypeScriptでGatsbyプロジェクトを設定する方法

getdocs

2年前

序章

TypeScript は、 JavaScript のスーパーセットであり、ビルド時にオプションの静的型付けを追加して、ランタイムエラーのデバッグを削減します。何年にもわたってJavaScriptの強力な代替手段に成長しました。同時に、 Gatsby は、静的Webサイトを作成するための便利なフロントエンドフレームワークとして登場しました。 TypeScriptの静的型付け機能は、Gatsbyのような静的サイトジェネレーターとうまく調和し、GatsbyにはTypeScriptでのコーディングのサポートが組み込まれています。

このチュートリアルでは、Gatsbyの組み込み機能を使用して、TypeScript用にGatsbyプロジェクトを構成します。このチュートリアルの後、TypeScriptをGatsbyプロジェクトに統合する方法を学びます。

前提条件

開発環境を実行し、TypeScriptまたはGatsby関連のパッケージをそれぞれ処理するには、Nodeとnpmの両方をインストールする必要があります。このチュートリアルは、Node.jsバージョン14.17.2およびnpmバージョン6.14.13でテストされました。 macOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストールセクションの手順に従います。 Ubuntu20.04にNode.jsをインストールするには。
コンピューターにGatsbyCLIコマンドラインツールがインストールされている必要があります。これを設定するには、最初のギャツビーサイトを設定する方法の冒頭をお読みください。このチュートリアルは、Gatsbyv3.9.0およびGatsbyCLIv3.9.0でテストされています。
JavaScript、特にデストラクチャリングやインポート/エクスポートなどのES6+構文に関する十分な知識が必要になります。これらのトピックの詳細については、 JavaScript での破棄、RESTパラメーター、およびスプレッド構文の理解とJavaScriptでのモジュールとインポートおよびエクスポートステートメントの理解を参照してください。
さらに、TypeScriptをマシンにインストールする必要があります。これを行うには、公式TypeScriptWebサイトを参照してください。 Visual Studio Code 以外のエディターを使用している場合は、TypeScriptがビルド時に型チェックを実行し、エラーを表示するようにするために、いくつかの追加手順を実行する必要があります。たとえば、Atomを使用している場合、真のTypeScriptエクスペリエンスを実現するには、atom-typescriptパッケージをインストールする必要があります。プロジェクト専用のTypeScriptをダウンロードする場合は、Gatsbyプロジェクトフォルダーを設定した後でダウンロードしてください。

ステップ1—新しいギャツビーサイトの作成とボイラープレートの削除

まず、Gatsbyサイトを作成し、サーバーを実行してサイトを表示できることを確認します。その後、未使用の定型ファイルとコードをいくつか削除します。これにより、後の手順で編集できるようにプロジェクトが設定されます。

コンピューターのコンソール/ターミナルを開き、次のコマンドを実行します。

gatsby new gatsby-typescript-tutorial

Gatsbyサイトに必要な定型ファイルとフォルダーを設定するため、実行には数秒かかります。それが終わった後、 cd プロジェクトのディレクトリに：

cd gatsby-typescript-tutorial

サイトの開発環境を正しく開始できることを確認するには、次のコマンドを実行します。

gatsby develop

数秒後、コンソールに次のメッセージが表示されます。

Output...
You can now view gatsby-starter-default in the browser.

  http://localhost:8000

通常、デフォルトのポートは :8000、ただし、実行することでこれを変更できます gatsby develop -p another_number 代わりは。

お好みのブラウザに移動して、次のように入力します http://localhost:8000 アドレスバーでサイトを検索します。次のようになります。

注：プラグインには既知の問題があります gatsby-plugin-sharp Gatsbyサイトの構築時に次のエラーが発生する可能性があるバージョン3.9.0：

Output ERROR

ENOENT: no such file or directory, open 'your_file_path/gatsby-typescript-tutorial/.cache/caches/gatsby-plugin-sharp/diskstore-f6dcddbf3c9007cd2587894f75b5cd62.json'

このエラーの回避策は、ダウングレードすることです gatsby-plugin-sharp バージョン3.8.0へ。これを行うには、 package.json ファイルを作成し、次の強調表示された変更を行います。

[gatsby-typescript-tutorial/package.json]
...
  "dependencies": {
    "gatsby": "^3.9.0",
    "gatsby-plugin-gatsby-cloud": "^2.9.0",
    "gatsby-plugin-image": "^1.9.0",
    "gatsby-plugin-manifest": "^3.9.0",
    "gatsby-plugin-offline": "^4.9.0",
    "gatsby-plugin-react-helmet": "^4.9.0",
    "gatsby-plugin-sharp": "3.8.0",
    "gatsby-source-filesystem": "^3.9.0",
    "gatsby-transformer-sharp": "^3.9.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0"
  },
...

ファイルを保存してから、次のコマンドを使用して依存関係を再インストールします。

npm install

次に、GatsbyCLIを使用して public と .cache 新しい依存関係リストを使用して再構築できるように、フォルダー：

gatsby clean

これで、ローカル開発サーバーでGatsbyサイトを開始できるようになります。 gatsby develop. このソリューションの詳細については、 GitHubメモリスレッドのエラー：ENOENT：そのようなファイルまたはディレクトリはありませんGatsbyエラーをお読みください。

次に、不要なファイルをすべて削除します。これも gatsby-node.js, gatsby-browser.js、と gatsby-ssr.js:

rm gatsby-node.js
rm gatsby-browser.js
rm gatsby-ssr.js

次に、セットアップを完了するために、プロジェクトのインデックスページからボイラープレートコードを削除します。プロジェクトのルートディレクトリで、 src ディレクトリ、続いて pages 次に、 index.js ファイル。

このチュートリアルでは、 <StaticImage /> コンポーネントなので、に関連するコードを削除できます <Link /> コンポーネント、と一緒に h1 と p 要素。ファイルは次のようになります。

gatsby-typescript-tutorial / src / pages / index.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
  </Layout>
)

export default IndexPage

ファイルを保存して閉じます。

プロジェクトを作成し、初期設定を完了したので、必要なプラグインをインストールする準備が整いました。

ステップ2—依存関係のインストール

GatsbyでTypeScriptのサポートを設定するには、このステップでインストールする追加のプラグインと依存関係が必要になります。

gatsby-plugin-typescript プラグインには、新しく作成されたGatsbyサイトがすでに付属しています。デフォルトのオプションのいずれかを変更したい場合を除いて、このプラグインをに追加する必要はありません。 gatsby-config.js 明示的にファイルします。このギャツビープラグインは書き込みを行います .ts と .tsx TypeScriptのファイルが可能です。

アプリはTypeScriptファイルを読み取ることができるため、GatsbyのJavaScriptファイルをTypeScriptファイル拡張子に変更します。特に、変更 header.js, layout.js、と seo.js の src/components と index.js の src/pages に header.tsx, layout.tsx, seo.tsx、と index.tsx:

mv src/components/header.js src/components/header.tsx
mv src/components/layout.js src/components/layout.tsx
mv src/components/seo.js src/components/seo.tsx
mv src/pages/index.js src/pages/index.tsx

あなたは使用しています mv ファイルの名前を2番目の引数に変更するコマンド。 .tsx これらのファイルはJSXを使用するため、はファイル拡張子です。

についての1つの重要な警告があります gatsby-plugin-typescript ただし、プラグイン：ビルド時のタイプチェック（TypeScriptのコア機能）は含まれていません。 TypeScriptはVisualStudioでサポートされている言語であるため、VSCodeを使用している場合はこれは問題になりません。ただし、 Atom などの別のエディターを使用している場合は、完全なTypeScript開発エクスペリエンスを実現するためにいくつかの追加構成を行う必要があります。

GatsbyはReactベースのフレームワークであるため、React関連のタイピングを追加することもお勧めします。 Reactに固有のタイプのタイプチェックを追加するには、次のコマンドを実行します。

npm add @types/react

React DOMに関連する型の型チェックを追加するには、次のコマンドを使用します。

npm add @types/react-dom

プラグインに慣れてきたので gatsby-plugin-typescript、次のステップでTypeScript用にGatsbyサイトを構成する準備ができました。

ステップ3—Gatsby用のTypeScriptの設定 `tsconfig.json` ファイル

このステップでは、 tsconfig.json ファイル。 A tsconfig.json ファイルには2つの主な目的があります。TypeScriptプロジェクトのルートディレクトリを確立する（include）そしてTypeScriptコンパイラのデフォルト設定を上書きする（compilerOptions). このファイルを作成するには、いくつかの方法があります。あなたが持っている場合 tsc npmとともにインストールされたコマンドラインツールを使用すると、新しいコマンドラインツールを作成できます tsconfig とファイル tsc --init. ただし、ファイルには多くのデフォルトオプションとコメントが入力されます。

代わりに、ディレクトリのルートに新しいファイルを作成します（gatsby-typescript-project/）そしてそれに名前を付けます tsconfig.json.

次に、2つのプロパティを持つオブジェクトを作成します。 compilerOptions と include、次のコードが入力されます。

[label gatsby-typescript-tutorial/tsconfig.json] 
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false
  },
  "include": ["./src/**/*"]
}

注：この構成は、gatsby-starter-typescript-plusスターターに部分的に基づいています。

このファイルを保存し、完了したら閉じます。

The include プロパティは、コンパイラがTypeScriptからJavaScriptに変換することを知っているファイル名またはパスのarrayを指します。

で使用される各オプションの簡単な説明は次のとおりです compilerOptions:

module -プロジェクトのモジュールシステムを設定します。 commonjs デフォルトで使用されます。
target -使用しているJavaScriptのバージョンに応じて、このオプションは、ダウンレベルする機能とそのままにしておく機能を決定します。これは、プロジェクトが古い環境にデプロイされている場合と、新しい環境。
jsx -JSXがどのように扱われるかの設定 .tsx ファイル。 The preserve オプションはJSXを変更しないままにします。
lib -さまざまなJSライブラリ/APIの指定された型定義の配列（dom, es2015など）。
strict -に設定した場合 true、これにより、ビルド時にTypeScriptのタイプチェック機能が有効になります。
noEmit -GatsbyはすでにBabelを使用してコードを読み取り可能なJavaScriptにコンパイルしているため、このオプションを次のように変更します。 true TypeScriptを除外します。
isolatedModules -コンパイラ/トランスパイラとしてBabelを選択すると、一度に1つのファイルをコンパイルすることを選択することになり、実行時に潜在的な問題が発生する可能性があります。このオプションをに設定する true この問題が発生しようとしている場合にTypeScriptが警告を表示できるようにします。
esModuleIterop -このオプションを有効にすると、CommonJS（セット module）およびESモジュール（カスタム変数および関数のインポートとエクスポート）がより適切に連携し、すべてのインポートで名前空間オブジェクトを使用できるようにします。
noUnusedLocals と noUnusedParamters -これら2つのオプションを有効にすると、未使用のローカル変数またはパラメータを作成した場合にTypeScriptが通常報告するエラーが無効になります。
removeComments -これをに設定する false （またはまったく設定しないで）TypeScriptファイルがJavaScriptに変換された後にコメントを表示できるようにします。

TypeScriptのリファレンスガイドにアクセスすると、これらのさまざまなオプションやその他の多くのオプションについて詳しく知ることができます。 tsconfig.

TypeScriptがGatsby用に構成されたので、ボイラープレートファイルの一部をリファクタリングしてTypeScript統合を完了します。 src/components と src/pages.

ステップ4—リファクタリング `seo.tsx` TypeScriptの場合

このステップでは、TypeScript構文をに追加します。 seo.tsx ファイル。このステップでは、TypeScriptのいくつかの概念を詳しく説明します。次のステップでは、他のボイラープレートコードをより簡略化してリファクタリングする方法を示します。

TypeScriptの特徴の1つは、構文の柔軟性です。変数に明示的に入力を追加したくない場合は、追加する必要はありません。 Gatsbyは、ワークフローにTypeScriptを採用することは「インクリメンタルである可能性があり、インクリメンタルである必要がある」と考えているため、このステップでは3つのコアTypeScriptの概念に焦点を当てます。

基本タイプ
タイプとインターフェースの定義
ビルド時エラーの処理

TypeScriptの基本的なタイプ

TypeScriptは、次のような基本データ型をサポートします。 boolean, number、と string. JavaScriptと比較したTypeScriptとの主な構文上の違いは、変数を関連付けられた型で定義できるようになったことです。

たとえば、次のコードブロックは、強調表示されたコードで基本タイプを割り当てる方法を示しています。

let num: number;
num = 0

let str: string;
str = "TypeScript & Gatsby"

let typeScriptIsAwesome: boolean;
typeScriptIsAwesome = true;

このコードでは、 num である必要があります number, str である必要があります string、と typeScriptIsAwesome である必要があります boolean.

今、あなたは調べます defaultProps と propTypes の宣言 seo.tsx にあるファイル src/components ディレクトリ。エディターでファイルを開き、次の強調表示された行を探します。

gatsby-typescript-tutorial / src / components / seo.tsx

...
import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

...
      ].concat(meta)}
    />
  )
}


SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO

デフォルトでは、GatsbyサイトのSEOコンポーネントには、PropTypesを使用した弱いタイピングシステムが付属しています。 The defaultProps と propTypes インポートされたものを使用して明示的に宣言されます PropsTypes クラス。たとえば、 meta の小道具（またはエイリアス） propTypes オブジェクト、その値はオブジェクトの配列であり、各オブジェクトはそれ自体が PropTypes 成分。一部の小道具は必要に応じてマークされています（isRequired）他のものはそうではありませんが、それらがオプションであることを意味します。

TypeScriptを使用しているため、このタイピングシステムを置き換えることになります。先に進み、削除します defaultProps と propTypes （一緒に import の声明 PropTypes ファイルの先頭にあります）。ファイルは次のようになります。

[label gatsby-typescript-tutorial/src/components/seo.tsx] 
...
import * as React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"


...
      ].concat(meta)}
    />
  )
}

export default SEO

デフォルトの入力を削除したので、TypeScriptを使用して型エイリアスを書き出します。

TypeScriptインターフェイスの定義

TypeScriptでは、 interface を使用して、カスタムタイプの「形状」を定義します。これらは、Reactコンポーネントや関数パラメーターなどの複雑なデータの値型を表すために使用されます。の中に seo.tsx ファイル、あなたはビルドするつもりです interface 交換するには defaultProps と propTypes 削除された定義。

次の強調表示された行を追加します。

[label gatsby-typescript-tutorial/src/components/seo.tsx] 
...
import * as React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

interface SEOProps {
  description?: string,
  lang?: string,
  meta?: Array<{name: string, content: string}>,
  title: string
}

...

インターフェース SEOProps 何を達成する SEO.propTypes データ型に関連付けられた各プロパティを設定し、必要に応じていくつかのプロパティをマークすることによって行いました ? キャラクター。

関数を入力する

JavaScriptと同様に、関数はTypeScriptアプリケーションで重要な役割を果たします。渡される引数のデータ型を指定することで、関数を入力することもできます。の中に seo.tsx ファイル、あなたは今定義されたで作業します SEO 関数コンポーネント。のためのインターフェースの下で SEOProps が定義されている場合は、のタイプを明示的に宣言します SEO コンポーネントの関数の引数と、の戻り値の型 SEOProps 直後の：

次の強調表示されたコードを追加します。

gatsby-typescript-tutorial / src / components / seo.tsx

...
interface SEOProps {
  description?: string,
  lang?: string,
  meta?: Array<{name: string, content: string}>,
  title: string
}

function SEO({ description='', lang='en', meta=[], title }: SEOProps) {
  ...
}

ここでは、デフォルトを設定します SEO 関数の引数がインターフェイスに準拠するようにし、インターフェイスを追加しました : SEOProps. 少なくとも、 title に渡される引数のリストで SEO コンポーネントは、で必須のプロパティとして定義されているためです。 SEOProps 以前に定義したインターフェース。

最後に、あなたは修正することができます metaDescription と defaultTitle タイプを設定することによる定数宣言。 string この場合：

[label gatsby-typescript-tutorial/src/components/seo.tsx] 
...
function SEO({ description='', lang='en', meta=[], title }: SEOProps) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )
  
  const metaDescription: string = description || site.siteMetadata.description
  const defaultTitle: string = site.siteMetadata?.title
...

TypeScriptの別のタイプは any タイプ。タイプが不明確または定義が難しい変数を扱っている状況では、次を使用します。 any ビルド時のエラーを回避するための最後の手段として。

の使用例 any タイプは、APIリクエストやGraphQLクエリなど、サードパーティからフェッチされたデータを処理する場合です。の中に seo.tsx ファイル、ここで非構造化 site プロパティはGraphQL静的クエリで定義され、そのタイプをに設定します any:

gatsby-typescript-tutorial / src / components / seo.tsx

...
interface SEOProps {
  description?: string,
  lang?: string,
  meta?: Array<{name: string, content: string}>,
  title: string
}

function SEO({ description='', lang='en', meta=[], title }: Props) {
  const { site }: any = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )
  ...
}

ファイルを保存して終了します。

定義された値を常にタイプと一致させることが重要です。それ以外の場合は、TypeScriptコンパイラを介してビルド時エラーが表示されます。

ビルド時エラー

TypeScriptがビルド時にキャッチして報告するエラーに慣れるのに役立ちます。 TypeScriptは、ビルド時にこれらのエラー（主にタイプ関連）をキャッチし、これにより、長期的に（コンパイル時に）デバッグの量を削減するという考え方です。

発生するビルド時エラーの1つの例は、あるタイプの変数を宣言したが、別のタイプの値を割り当てた場合です。に渡されるキーワード引数の1つの値を変更する場合 SEO コンポーネントを別のタイプの1つに変更すると、TypeScriptコンパイラは不整合を検出し、エラーを報告します。以下は、これがVSCodeでどのように見えるかのイメージです。

エラーは言う Type 'number' is not assignable to type 'string'. これは、あなたが interface、あなたは言った description プロパティはタイプになります string. 値 0 タイプです number. の値を変更した場合 description 「文字列」に戻ると、エラーメッセージは消えます。

ステップ5—ボイラープレートの残りの部分をリファクタリングする

最後に、TypeScriptを使用して残りのボイラープレートファイルをリファクタリングします。 layout.tsx と header.tsx. お気に入り seo.tsx、これらのコンポーネントファイルはにあります src/components ディレクトリ。

開ける src/components/layout.tsx. 下に向かって、定義されています Layout.propTypes. 次の強調表示された行を削除します。

[label gatsby-typescript-tutorial/src/components/layout.tsx] 
/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
...

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

The children propは、その値がタイプであることを示しています node あたり PropTypes クラス。さらに、それは必須の小道具です。以来 children レイアウトには、単純なテキストからReactの子コンポーネントまで、何でもかまいません。 ReactNode 上部近くにインポートしてインターフェースに追加することにより、関連するタイプとして：

次の強調表示された行を追加します。

gatsby-typescript-tutorial / src / components / layout.tsx

...
import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

interface LayoutProps {
  children: ReactNode
}

const Layout = ({ children }: LayoutProps) => {
  ...

次に、タイプを追加します data サイトタイトルデータをフェッチするGraphQLクエリを格納する変数。このクエリオブジェクトはGraphQLのようなサードパーティのエンティティから来ているので、 data と any タイプ。最後に、 string 次のように入力します siteTitle そのデータで機能する変数：

[label gatsby-typescript-tutorial/src/components/layout.tsx] 
...
const Layout = ({ children }: LayoutProps) => {
  const data: any = useStaticQuery(graphql`
  query MyQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`)

const siteTitle: string = data.site.siteMetadata?.title || `Title`

  return (
    <>
      <Header siteTitle={siteTitle} />
      <div
...

ファイルを保存して閉じます。

今すぐ開きます src/components/header.tsx ファイル。このファイルには、事前定義された小道具タイプも付属しています。 PropTypes クラス。お気に入り seo.tsx と layout.tsx、交換 Header.defaultProps と Header.propTypes と interface 同じ小道具名を使用する：

gatsby-typescript-tutorial / src / components / header.tsx

import * as React from "react"
import { Link } from "gatsby"

interface HeaderProps {
  siteTitle: string
}

const Header = ({ siteTitle }: HeaderProps) => (
  <header
    style={{
      background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </header>
)

export default Header