Convert project to TypeScript

gatsby-node.js

@@ -5,7 +5,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
 
   return new Promise((resolve, reject) => {
     const pages = []
-    const post = path.resolve('./src/templates/post.js')
+    const post = path.resolve('./src/templates/post.tsx')
 
     resolve(
       graphql(

package.json

@@ -23,6 +23,7 @@
     "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
   },
   "dependencies": {
+    "@types/react-helmet": "^5.0.5",
     "gatsby": "^1.8.12",
     "gatsby-link": "^1.6.8",
     "gatsby-plugin-google-analytics": "^1.0.4",

src/components/PostList.js → src/components/PostList.tsx

@@ -18,10 +18,16 @@ const Date = styled.h4`
   line-height: 4rem;
 `
 
-const Posts = ({ posts }) => (
+interface Props {
+  posts: {
+    node: Post[]
+  }
+}
+
+const Posts: React.SFC<Props> = ({ posts }) => (
   <div>
     {posts.map(post => {
-      const { title, path, date, excerpt } = post.node.frontmatter
+      const { title, path, date } = post.node.frontmatter
 
       return (
         <Container key={path}>

src/layouts/custom.d.ts

@@ -0,0 +1,21 @@
+declare const graphql: (query: TemplateStringsArray) => void
+
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+
+declare module '*.png' {
+  const content: string
+  export default content
+}
+
+type Post = {
+  frontmatter: {
+    title: string
+    path: string
+    date: string
+  }
+  excerpt: string
+  html: string
+}

src/layouts/index.js → src/layouts/index.tsx

@@ -25,9 +25,13 @@ injectGlobal`
   }
 `
 
-class Template extends React.Component {
+interface Props {
+  children: () => JSX.Element
+}
+
+class Template extends React.Component<Props> {
   render() {
-    const { location, children } = this.props
+    const { children } = this.props
 
     return (
       <div>
@@ -44,10 +48,4 @@ class Template extends React.Component {
   }
 }
 
-Template.propTypes = {
-  children: React.PropTypes.func,
-  location: React.PropTypes.object,
-  route: React.PropTypes.object,
-}
-
 export default Template

src/pages/index.js → src/pages/index.tsx

@@ -1,6 +1,4 @@
 import React from 'react'
-import Link from 'gatsby-link'
-import Helmet from 'react-helmet'
 import styled from 'styled-components'
 
 import PostList from '../components/PostList'
@@ -20,11 +18,19 @@ const Contents = styled.main`
   grid-gap: 32px;
 `
 
-class Main extends React.Component {
+interface Props {
+  data: {
+    allMarkdownRemark: {
+      edges: Post[]
+    }
+  }
+}
+
+class Main extends React.Component<Props> {
   render() {
     const { data } = this.props
 
-    const posts = data ? data.allMarkdownRemark.edges : []
+    const posts: any = data ? data.allMarkdownRemark.edges : []
 
     return (
       <Container>
@@ -37,10 +43,6 @@ class Main extends React.Component {
   }
 }
 
-Main.propTypes = {
-  route: React.PropTypes.object,
-}
-
 export default Main
 
 export const pageQuery = graphql`
@@ -57,8 +59,6 @@ export const pageQuery = graphql`
           frontmatter {
             path
             date(formatString: "Do MMMM YYYY")
-          }
-          frontmatter {
             title
           }
         }

src/templates/post.js → src/templates/post.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import Link from 'gatsby-link'
 import styled from 'styled-components'
-import get from 'lodash/get'
 
 const Container = styled.div`
   display: flex;
@@ -44,9 +42,23 @@ const Content = styled.article`
   color: #333333;
 `
 
-class BlogPost extends React.Component {
+interface Props {
+  data: {
+    site: {
+      siteMetadata: {
+        title: string
+      }
+    }
+    markdownRemark: Post
+  }
+}
+
+class BlogPost extends React.Component<Props> {
   render() {
-    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
+    const siteTitle = this.props.data.site.siteMetadata.title
+      ? this.props.data.site.siteMetadata.title
+      : null
+
     const {
       frontmatter: { title, date },
       html,

yarn.lock

@@ -46,6 +46,12 @@
   version "7.0.58"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.58.tgz#ae852120137f40a29731a559e48003bd2d5d19f7"
 
+"@types/react-helmet@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.5.tgz#30a12b0431732a20882f0fa9b75bf56ff91700d3"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^4.2.2":
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.6.tgz#9f7eb3c0e6661a9607d878ff8675cc4ea95cd276"