Add Typescript example (#1319)

gatsbyjs · Jun 30, 2017 · b3975a5 · b3975a5
1 parent 08bddd9
commit b3975a5
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 0 deletions.
diff --git a/examples/using-typescript/.gitignore b/examples/using-typescript/.gitignore
@@ -0,0 +1,139 @@
+
+# Created by https://www.gitignore.io/api/osx,vim,node,windows,visualstudiocode
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Vim ###
+# swap
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.gitignore.io/api/osx,vim,node,windows,visualstudiocode
+
+### Gatsby ###
+public
+.cache
diff --git a/examples/using-typescript/README.md b/examples/using-typescript/README.md
@@ -0,0 +1,5 @@
+# using-typescript
+
+https://using-typescript.gatsbyjs.org
+
+Demonstrates using Typescript to build Gatsby sites.
diff --git a/examples/using-typescript/gatsby-config.js b/examples/using-typescript/gatsby-config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  siteMetadata: {
+    siteName: `Using Typescript Example`,
+  },
+  plugins: [
+    // Add typescript stack into webpack
+    `gatsby-plugin-typescript`,
+  ],
+}
diff --git a/examples/using-typescript/package.json b/examples/using-typescript/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "using-typescript",
+  "version": "1.0.0",
+  "description": "Gatsby example site demonstrating how to use Typescript with Gatsby",
+  "author": "fabien0102 <fabien0102@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@types/react": "15.0.21",
+    "@types/react-dom": "0.14.23",
+    "gatsby": "next",
+    "gatsby-link": "next",
+    "gatsby-plugin-typescript": "next"
+  }
+}
diff --git a/examples/using-typescript/src/html.tsx b/examples/using-typescript/src/html.tsx
@@ -0,0 +1,61 @@
+/* tslint:disable no-var-requires */
+/* tslint:disable no-console */
+
+import * as React from "react";
+import Helmet from "react-helmet";
+
+// Load production style
+let styles: string;
+if (process.env.NODE_ENV === `production`) {
+  try {
+    styles = require("!raw-loader!../public/styles.css");
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+interface HtmlProps {
+  body: any;
+  postBodyComponents: any;
+  headComponents: any;
+}
+
+// Use `module.exports` to be compliante with `webpack-require` import method
+module.exports = React.createClass<HtmlProps, void>({
+  render() {
+    const head = Helmet.rewind();
+
+    const css = (process.env.NODE_ENV === `production`) ?
+      <style
+        id="gatsby-inlined-css"
+        dangerouslySetInnerHTML={{ __html: styles }}
+      />
+      : null;
+
+    return (
+      <html lang="en">
+        <head>
+          {this.props.headComponents}
+          <title>My website</title>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+          />
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
+          {head.link.toComponent()}
+          {css}
+        </head>
+        <body>
+          <div
+            id="___gatsby"
+            dangerouslySetInnerHTML={{ __html: this.props.body }}
+          />
+          {this.props.postBodyComponents}
+        </body>
+      </html>
+    );
+  },
+});
diff --git a/examples/using-typescript/src/pages/404.tsx b/examples/using-typescript/src/pages/404.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+export default () =>
+  <div>
+    <h1>You are here!</h1>
+    <h2>But nothing found for you #404</h2>
+  </div>
diff --git a/examples/using-typescript/src/pages/index.tsx b/examples/using-typescript/src/pages/index.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export default (props: IndexPageProps) =>
+  <div>
+    <h1>Hello Typescript world!</h1>
+    <p>This site is named <strong>{props.data.site.siteMetadata.siteName}</strong></p>
+  </div>;
+
+export const pageQuery = graphql`
+  query IndexQuery{
+    site {
+      siteMetadata {
+        siteName
+      }
+    }
+  }
+`
diff --git a/examples/using-typescript/tsconfig.json b/examples/using-typescript/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "esnext",
+        "jsx": "react",
+        "lib": ["dom", "es2015", "es2017"]
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}
diff --git a/examples/using-typescript/tslint.json b/examples/using-typescript/tslint.json
@@ -0,0 +1,21 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": {
+        "interface-name": [ "never-prefix" ],
+        "member-access": [
+            false
+        ],
+        "ordered-imports": [
+            false
+        ],
+        "no-console": [
+            false
+        ],
+        "no-var-requires": false
+    },
+    "rulesDirectory": []
+}