如何使用 TypeScript 安装 Gatsby - Shell/Bash

Gatsby 是一个使用 React 构建静态网站的工具。它是一个强大的框架，可以通过插件扩展并使用现代化的Web技术来开发静态网站。

使用 TypeScript 编写 Gatsby 站点可以提高代码可读性和可维护性。

以下是如何在 Shell/Bash 中使用 TypeScript 安装 Gatsby 的步骤:

1. 确保已经安装 Node.js 和 npm

如果你还没有安装 Node.js 和 npm，请先安装它们。你可以在这里下载：https://nodejs.org/en/download/

2. 创建一个新的 Gatsby 项目

在 Shell/Bash 中执行以下命令：

gatsby new my-gatsby-site

这将创建一个新的 Gatsby 项目，并安装必要的文件包。等待安装完成后，进入新创建的目录：

cd my-gatsby-site

3. 安装 TypeScript

执行以下命令来安装 TypeScript：

npm install typescript --save-dev

这将安装 TypeScript 并将其作为 dev 依赖项保存到项目中。

4. 配置 TypeScript

在项目中创建一个名为tsconfig.json的新文件，并添加以下内容：

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true
  }
}

这将配置 TypeScript 编译器。

5. 安装 Gatsby 插件

在 Shell/Bash 中执行以下命令来安装 Gatsby 插件：

npm install gatsby-plugin-typescript --save-dev

这将安装必要的文件以支持在 Gatsby 中使用 TypeScript。

6. 启用 Gatsby 插件

编辑gatsby-config.js并在插件部分添加以下内容：

module.exports = {
  plugins: [`gatsby-plugin-typescript`],
}

这将启用 Gatsby 插件。

7. 运行 Gatsby

现在可以在 Shell/Bash 中运行以下命令来启动 Gatsby：

gatsby develop

8. 创建使用 TypeScript 的组件

现在你可以在 Gatsby 中创建使用 TypeScript 的组件了。

例如，创建一个名为hello.tsx的新组件：

import React from "react"

interface Props {
  name: string;
}

export const HelloComponent = ({ name }: Props) => <div>Hello {name}!</div>

注意：使用.tsx扩展名编写组件时，必须使用tsx而不是jsx。

9. 创建使用 TypeScript 的页面

可以像使用 JavaScript 一样创建一个新页面，只是现在使用.tsx扩展名。

例如，创建一个名为typescript-page.tsx的新页面：

import React from "react"
import { HelloComponent } from "../components/hello"

const TypeScriptPage = () => (
  <div>
    <h1>TypeScript Page</h1>
    <HelloComponent name="John" />
  </div>
)

export default TypeScriptPage

10. 运行 Gatsby 并查看结果

现在你可以在 Shell/Bash 中再次启动 Gatsby，并在浏览器中查看结果：

gatsby develop

打开浏览器并访问http://localhost:8000/typescript-page/，应该可以看到一个页面，其中包含标题“TypeScript Page”和文本“Hello John!”。

这就是如何使用 TypeScript 安装 Gatsby 的步骤。现在你可以使用 Gatsby 和 TypeScript 构建强大的静态网站了！