[Example] with-typescript-types (#13746)

todortotev · web-flow · commit dbe5973fae7d · 2020-06-04T16:25:28.000Z
Closes [7882](#7882). Created as requested by @timneutkens I'm unsure if that's exactly what you wanted, so let me know what you want me to change and I'll do it asap.
diff --git a/examples/with-typescript-types/README.md b/examples/with-typescript-types/README.md
@@ -0,0 +1,13 @@
+This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript.
+
+This example shows how to properly export and import typescript types without getting the
+
+```js
+Attempted import error: 'TypeA' is not exported from './package-1'.
+```
+
+error as raised in [vercel/next.js#7882](https://github.com/vercel/next.js/issues/7882).
+
+## Useful links
+
+[Add import type and export type support to TypeScript](https://github.com/babel/babel/pull/11171)
diff --git a/examples/with-typescript-types/next-env.d.ts b/examples/with-typescript-types/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/examples/with-typescript-types/package.json b/examples/with-typescript-types/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "with-typescript-types",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "type-check": "tsc"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@types/node": "^12.12.21",
+    "@types/react": "^16.9.16",
+    "@types/react-dom": "^16.9.4",
+    "typescript": "3.7.3"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-typescript-types/pages/_document.jsx b/examples/with-typescript-types/pages/_document.jsx
@@ -0,0 +1,17 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <html>
+        <Head>
+          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-typescript-types/pages/index.tsx b/examples/with-typescript-types/pages/index.tsx
@@ -0,0 +1,15 @@
+import type { TypeA } from '../types'
+
+const Example: TypeA = {
+  name: 'next',
+}
+
+export default function Home() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <h1>
+        <p>{Example.name}</p>
+      </h1>
+    </div>
+  )
+}
diff --git a/examples/with-typescript-types/tsconfig.json b/examples/with-typescript-types/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "exclude": ["node_modules"],
+  "include": ["**/*.ts", "**/*.tsx"]
+}
diff --git a/examples/with-typescript-types/types/index.ts b/examples/with-typescript-types/types/index.ts
@@ -0,0 +1 @@
+export type { TypeA } from './package-1'
diff --git a/examples/with-typescript-types/types/package-1.ts b/examples/with-typescript-types/types/package-1.ts
@@ -0,0 +1,3 @@
+export type TypeA = {
+  name: string
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/// <reference types="next" />`
	`2`	`+/// <reference types="next/types/global" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export type { TypeA } from './package-1'`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export type TypeA = {`
	`2`	`+ name: string`
	`3`	`+}`