8000 Fix tsx workaround, bootstrap next.d.ts, add tslint deps (#2885) · JavaScriptExpert/next.js@45e26f2 · GitHub
[go: up one dir, main page]
Skip to content

Commit 45e26f2

Browse files
brikoutimneutkens
brikou
authored and
timneutkens
committed
Fix tsx workaround, bootstrap next.d.ts, add tslint deps (vercel#2885)
1 parent 7ee66de commit 45e26f2

File tree

9 files changed

+50
-38
lines changed

9 files changed

+50
-38
lines changed

‎examples/with-typescript/.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
**/*.js
1+
*.js

‎examples/with-typescript/README.md

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-typescript)
2+
23
# TypeScript Next.js example
4+
35
This is a really simple project that show the usage of Next.js with TypeScript.
46

57
## How to use it?
8+
69
```
7-
npm install # to install dependencies
8-
npm run dev # to compile TypeScript files and to run next.js
10+
npm install
11+
npm run dev
912
```
1013

1114
Output JS files are aside the related TypeScript ones.
12-
13-
## To fix
14-
In tsconfig.json the options `jsx="react"` compiles JSX syntax into nested React.createElement calls.
15-
This solution doesn't work well with some Next.js features like `next/head` or `next/link`.
16-
The workaround is to create JS files that just return the mentioned module and require them from TSX files.
17-
Like
18-
19-
```js
20-
import Link from 'next/link'
21-
22-
export default Link
23-
```

‎examples/with-typescript/components/MyComponent.tsx

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/with-typescript/next.d.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
declare module 'next/link' {
2+
import { Url } from 'url'
3+
4+
export default class Link extends React.Component<
5+
{
6+
href: string | Url;
7+
},
8+
{}
9+
> {}
10+
}

‎examples/with-typescript/package.json

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,21 @@
22
"name": "with-typescript",
33
"version": "1.0.0",
44
"scripts": {
5-
"dev": "concurrently \"tsc --watch\" next"
5+
"dev": "concurrently \"tsc --pretty --watch\" \"next\"",
6+
"prebuild": "tsc",
7+
"build": "next build",
8+
"start": "next start"
69
},
710
"dependencies": {
811
"next": "latest",
9-
"react": "^16.0.0",
10-
"react-dom": "^16.0.0"
12+
"react": "16.1.0",
13+
"react-dom": "16.1.0"
1114
},
1215
"devDependencies": {
13-
"@types/react": "^16.0.9",
14-
"concurrently": "^3.1.0",
15-
"typescript": "^2.1.5"
16+
"@types/node": "8.0.51",
17+
"@types/react": "16.0.22",
18+
"concurrently": "^3.5.0",
19+
"tslint": "5.8.0",
20+
"typescript": "2.6.1"
1621
}
1722
}

‎examples/with-typescript/pages/about.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default () => <div>About us</div>

‎examples/with-typescript/pages/index.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import * as React from 'react'
2-
import MyComponent from '../components/MyComponent'
1+
import Link from 'next/link'
32

4-
export default () =>
3+
export default () =>
54
<div>
6-
<h1>Hello world</h1>
7-
<MyComponent />
5+
Hello World.{' '}
6+
<Link href="/about">
7+
<a>About</a>
8+
</Link>
89
</div>

‎examples/with-typescript/tsconfig.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"compilerOptions": {
3-
"module": "commonjs",
4-
"target": "es2015",
5-
"jsx": "react",
6-
"allowJs": true
7-
}
2+
"compilerOptions": {
3+
"jsx": "react-native",
4+
"module": "commonjs",
5+
"strict": true,
6+
"target": "es2017"
7+
}
88
}

‎examples/with-typescript/tslint.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"defaultSeverity": "error",
3+
"extends": ["tslint:recommended"],
4+
"jsRules": {},
5+
"rules": {
6+
"quotemark": [true, "single", "jsx-double"],
7+
"semicolon": [true, "never"]
8+
},
9+
"rulesDirectory": []
10+
}

0 commit comments

Comments
 (0)
0