From 397daece423f0202cdfd01883aa7fb96304e9d15 Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Wed, 26 Sep 2018 14:58:36 +0700 Subject: [PATCH] with-typescript example updates (#5267) * [with-typescript] Updated `@zeit/next-typescript` and typescript typings * [with-typescript] Updated tsconfig to match new recommended config * [with-typescript] upgraded dependencies, implement type-checking * [with-typescript] add _document example, fixed tsconfig * [with-typescript] updated README * [with-typescript] updated example contents * [with-typescript] adopt the Layout component from Flow example --- examples/with-typescript/README.md | 4 ++- .../with-typescript/components/Layout.tsx | 29 +++++++++++++++++++ examples/with-typescript/package.json | 15 ++++++---- examples/with-typescript/pages/_document.tsx | 19 ++++++++++++ examples/with-typescript/pages/about.tsx | 10 ++++++- examples/with-typescript/pages/index.tsx | 14 ++++----- examples/with-typescript/tsconfig.json | 20 ++++--------- 7 files changed, 82 insertions(+), 29 deletions(-) create mode 100644 examples/with-typescript/components/Layout.tsx create mode 100644 examples/with-typescript/pages/_document.tsx diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md index 60dc4b31..d8e96687 100644 --- a/examples/with-typescript/README.md +++ b/examples/with-typescript/README.md @@ -37,4 +37,6 @@ yarn dev ## The idea behind the example -Use the [@zeit/next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) plugin to inject the Webpack config required to compile TypeScript to JavaScript. For information about using a TSConfig have a [look at the plugin page](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript/#readme). +Use the [@zeit/next-typescript](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript) plugin to inject [@babel/preset-typescript](https://github.com/babel/babel/tree/master/packages/babel-preset-typescript) into Next.js, allowing for fast TypeScript transpilation. It also implements a `tsconfig.json` as recommended by [the @zeit/next-typescript plugin page](https://github.com/zeit/next-plugins/tree/master/packages/next-typescript/#readme). + +A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this in your `test` scripts, say, for your CI process. diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx new file mode 100644 index 00000000..62be53a9 --- /dev/null +++ b/examples/with-typescript/components/Layout.tsx @@ -0,0 +1,29 @@ +import * as React from 'react' +import Link from 'next/link' +import Head from 'next/head' + +type Props = { + title?: string +} + +const Layout: React.SFC = ({ children, title = 'This is the default title' }) => ( +
+ + {title} + + + +
+ +
+ {children} +
+ I'm here to stay +
+
+) + +export default Layout \ No newline at end of file diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json index b50728f1..2810673e 100644 --- a/examples/with-typescript/package.json +++ b/examples/with-typescript/package.json @@ -4,17 +4,20 @@ "scripts": { "dev": "next", "build": "next build", - "start": "next start" + "start": "next start", + "type-check": "tsc" }, "dependencies": { - "@zeit/next-typescript": "1.1.0", + "@zeit/next-typescript": "^1.1.1", "next": "latest", - "react": "^16.2.0", - "react-dom": "^16.2.0" + "react": "^16.5.2", + "react-dom": "^16.5.2" }, "devDependencies": { - "@types/next": "latest", - "@types/react": "^16.0.36" + "@types/next": "^6.1.7", + "@types/react": "^16.4.14", + "@types/react-dom": "16.0.7", + "typescript": "3.0.3" }, "license": "ISC" } diff --git a/examples/with-typescript/pages/_document.tsx b/examples/with-typescript/pages/_document.tsx new file mode 100644 index 00000000..d640341c --- /dev/null +++ b/examples/with-typescript/pages/_document.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' + +// Document component is strongly typed with `@types/next` +export default class MyDocument extends Document { + render () { + return ( + + + Next.js TypeScript Example + + +
+ + + + ) + } +} \ No newline at end of file diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx index 5fd65c2b..39233aab 100644 --- a/examples/with-typescript/pages/about.tsx +++ b/examples/with-typescript/pages/about.tsx @@ -1 +1,9 @@ -export default () =>
About us
+import Link from 'next/link' +import Layout from '../components/Layout'; + +export default () => ( + +

This is the about page

+

Go home

+ +) \ No newline at end of file diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx index 76b7d201..427ced90 100644 --- a/examples/with-typescript/pages/index.tsx +++ b/examples/with-typescript/pages/index.tsx @@ -1,9 +1,9 @@ import Link from 'next/link' +import Layout from '../components/Layout'; -export default () => -
- Hello World.{' '} - - About - -
+export default () => ( + +

Hello Next.js 👋

+

About

+ +) diff --git a/examples/with-typescript/tsconfig.json b/examples/with-typescript/tsconfig.json index 41a1f0af..06b51be3 100644 --- a/examples/with-typescript/tsconfig.json +++ b/examples/with-typescript/tsconfig.json @@ -1,26 +1,18 @@ { - "compileOnSave": false, "compilerOptions": { "target": "esnext", "module": "esnext", "jsx": "preserve", - "allowJs": true, + "lib": ["dom", "es2017"], "moduleResolution": "node", + "allowJs": true, + "noEmit": true, "allowSyntheticDefaultImports": true, + "skipLibCheck": true, "noUnusedLocals": true, "noUnusedParameters": true, "removeComments": false, "preserveConstEnums": true, - "sourceMap": true, - "skipLibCheck": true, - "baseUrl": ".", - "typeRoots": [ - "./node_modules/@types" - ], - "lib": [ - "dom", - "es2015", - "es2016" - ] + "sourceMap": true } -} +} \ No newline at end of file