mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Fix tsx workaround, bootstrap next.d.ts, add tslint deps (#2885)
This commit is contained in:
parent
7ee66def32
commit
45e26f22b3
2
examples/with-typescript/.gitignore
vendored
2
examples/with-typescript/.gitignore
vendored
|
@ -1 +1 @@
|
|||
**/*.js
|
||||
*.js
|
||||
|
|
|
@ -1,23 +1,14 @@
|
|||
[![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)
|
||||
|
||||
# TypeScript Next.js example
|
||||
|
||||
This is a really simple project that show the usage of Next.js with TypeScript.
|
||||
|
||||
## How to use it?
|
||||
|
||||
```
|
||||
npm install # to install dependencies
|
||||
npm run dev # to compile TypeScript files and to run next.js
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Output JS files are aside the related TypeScript ones.
|
||||
|
||||
## To fix
|
||||
In tsconfig.json the options `jsx="react"` compiles JSX syntax into nested React.createElement calls.
|
||||
This solution doesn't work well with some Next.js features like `next/head` or `next/link`.
|
||||
The workaround is to create JS files that just return the mentioned module and require them from TSX files.
|
||||
Like
|
||||
|
||||
```js
|
||||
import Link from 'next/link'
|
||||
|
||||
export default Link
|
||||
```
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
import * as React from 'react'
|
||||
|
||||
export default () =>
|
||||
<div>
|
||||
<p>This is my component</p>
|
||||
</div>
|
10
examples/with-typescript/next.d.ts
vendored
Normal file
10
examples/with-typescript/next.d.ts
vendored
Normal file
|
@ -0,0 +1,10 @@
|
|||
declare module 'next/link' {
|
||||
import { Url } from 'url'
|
||||
|
||||
export default class Link extends React.Component<
|
||||
{
|
||||
href: string | Url;
|
||||
},
|
||||
{}
|
||||
> {}
|
||||
}
|
|
@ -2,16 +2,21 @@
|
|||
"name": "with-typescript",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"tsc --watch\" next"
|
||||
"dev": "concurrently \"tsc --pretty --watch\" \"next\"",
|
||||
"prebuild": "tsc",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0"
|
||||
"react": "16.1.0",
|
||||
"react-dom": "16.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^16.0.9",
|
||||
"concurrently": "^3.1.0",
|
||||
"typescript": "^2.1.5"
|
||||
"@types/node": "8.0.51",
|
||||
"@types/react": "16.0.22",
|
||||
"concurrently": "^3.5.0",
|
||||
"tslint": "5.8.0",
|
||||
"typescript": "2.6.1"
|
||||
}
|
||||
}
|
||||
|
|
1
examples/with-typescript/pages/about.tsx
Normal file
1
examples/with-typescript/pages/about.tsx
Normal file
|
@ -0,0 +1 @@
|
|||
export default () => <div>About us</div>
|
|
@ -1,8 +1,9 @@
|
|||
import * as React from 'react'
|
||||
import MyComponent from '../components/MyComponent'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default () =>
|
||||
export default () =>
|
||||
<div>
|
||||
<h1>Hello world</h1>
|
||||
<MyComponent />
|
||||
Hello World.{' '}
|
||||
<Link href="/about">
|
||||
<a>About</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es2015",
|
||||
"jsx": "react",
|
||||
"allowJs": true
|
||||
}
|
||||
"compilerOptions": {
|
||||
"jsx": "react-native",
|
||||
"module": "commonjs",
|
||||
"strict": true,
|
||||
"target": "es2017"
|
||||
}
|
||||
}
|
||||
|
|
10
examples/with-typescript/tslint.json
Normal file
10
examples/with-typescript/tslint.json
Normal file
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"defaultSeverity": "error",
|
||||
"extends": ["tslint:recommended"],
|
||||
"jsRules": {},
|
||||
"rules": {
|
||||
"quotemark": [true, "single", "jsx-double"],
|
||||
"semicolon": [true, "never"]
|
||||
},
|
||||
"rulesDirectory": []
|
||||
}
|
Loading…
Reference in a new issue