Gatsby -typescript 환경설정

1. npm i gatsby-plugin-typescript typescript
2. tsconfig 설정하기

 // rootdir/tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "preserve",
    "lib": [
      "dom",
      "esnext"
    ],
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "allowJs": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "public", ".cache"]
}

3. gatsby-config 설정하기

// rootdir/gatsby-config.js
module.exports = {
  siteMetadata: {
    title: "@JaeWoong2",
  },
  plugins: [`gatsby-plugin-typescrip`],
}

4. MarkDown 페이지 생성을 위한 gatsby-node 설정하기

const { createFilePath } = require(`gatsby-source-filesystem`);
const path = require(`path`);

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` });
    createNodeField({
      node,
      name: `slug`,
      value: slug
    });
  }
};

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return new Promise((resolve, reject) => {
    graphql(`
        {
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }
      `).then(result => {
      result.data.allMarkdownRemark.edges.map(({ node }) => {
        createPage({
          path: node.fields.slug,
          component: path.resolve(`./src/templates/blog-post.tsx`),
          context: {
            // Data passed to context is available in page queries as GraphQL variables.
            slug: node.fields.slug
          }
        });
      });
      resolve();
    });
  });
};

이렇게 설정을하면, gatsby 튜토리얼을 한 후의 환경설정을 그대로 typescript으로 사용할 수 있다.