Add typescript example #96

giladgray · 2016-10-26T17:41:21Z

this looks awesome but I also really like TypeScript.
is there any way to integrate typescript into the workflow?

mmmeff · 2016-10-26T18:37:05Z

Custom webpack config would make this happen: #40

rossipedia · 2016-10-29T07:09:06Z

You don't need a custom webpack config (althouh it would be nice). There's nothing preventing you from using typescript as-is. For example:

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

As I don't think next.js has any typings (yet), you might need a next.d.ts file in the typings folder to define some things. For example:

next.d.ts:

declare module 'next/head' {
    import * as React from 'react';

    export default class Head extends React.Component<any, any> {}
}

declare module 'next/link' {
    import * as React from 'react';

    export default class Link extends React.Component<any, any> {}
}

That should get you rolling. You can use the same approach for other next specific modules.

To make the workflow a little smoother you can run node_modules/.bin/tsc --watch (or just tsc --watch if you have TypeScript installed globally) along with next, so that changes to your .tsx files get compiled automatically and cause next.js to reload.

giladgray · 2016-10-29T07:58:53Z

wow @rossipedia i have been doing literally this exact thing locally, and it works!

it occurred to me moments after i opened this issue that it should be quite possible to layer tsc -p . on top of next, and of course it's that easy.

typings are proving a little more insidious than that because the library injects props.url into pages and treats getInitialProps slightly differently. so i'm still trying to figure out how to correctly type those.

rauchg · 2016-10-29T11:43:34Z

When we add custom babel / webpack config, I would love to have a TypeScript example and a Flow example. @rossipedia thanks a lot for the temporary workaround. If you'd be up for documenting the temporary solution in the Wiki, I think a lot of people would appreciate it!

giacomorebonato · 2016-10-29T20:48:20Z

If you are using VSCode it is also possible to hide derived JS file.

rossipedia · 2016-10-29T23:14:23Z

@rauchg I'm traveling this weekend, but if nobody else gets to it I'd be happy to add a page to the wiki, I can whip it up during my flight tomorrow

skhavari · 2016-11-02T20:09:30Z

trying to get running with typescript - things were going great until I decided to configure the page header...

import Head from "next/head";
...
render() {
        return (
            <div>
                <Head>
                    <title>Yo!</title>
                </Head>
                <div>unicorn</div>
            </div>
        );
    }

React.createElement starts complaining that the element shouldn't be null. It appears that the default export from "next/head" is null:

anyone else seeing this in a typescript project?

giacomorebonato · 2016-11-05T13:10:06Z

Have you tried

const Head = require('next/head')

?

skhavari · 2016-11-05T19:13:45Z

Of course

On Nov 5, 2016, 6:10 AM -0700, Giacomo Rebonato notifications@github.com, wrote:

Have you tried

const Head = require('next/head')

?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub (#96 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/AEJIOpmnMfMDjoRYN9vMy5QR940DTmxJks5q7IAygaJpZM4KhdeG).

giacomorebonato · 2016-11-07T17:31:41Z

Ok, if you write it like this, it will work

const Head = require('next/head').default

BLamy · 2016-11-09T01:34:51Z

I found it pretty easy to just edit the gulpfile to also compile .ts files.

https://github.com/zeit/next.js/blob/master/gulpfile.js#L123

Why not compile .ts files with typescript and .js files with babel by default?

giacomorebonato · 2016-11-10T10:36:04Z

With Webpack you mean?
I like TypeScript and I will be happy enough when we can customise the Webpack configuration.

almilo · 2016-12-11T12:16:18Z

@skhavari your issue is a known module interop issue and adding '.default' is not needed.
Try telling TypeScript to emit 'es6' code (which webpack will pick up) and use 'node' modules resolution:

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "filesGlob": [
    "pages/**/*.tsx"
  ]
}

I also add 'tsc' in my scripts like so:

...
    "dev": "tsc && next",
    "build": "tsc && next build",
    "start": "tsc && next start"
...

gozes · 2017-01-17T08:15:20Z

@rossipedia I think the same can be achieve by having your own gulp file that compiles ts files and move them to the page dir where next picks them up and reloads them right?

rossipedia · 2017-01-17T18:38:39Z

@gozes I don't see why not. I've rarely used gulp, but from what I know of it that seems like a fairly standard use case.

jagreehal · 2017-01-17T22:58:26Z

So here's my attempt https://github.com/jagreehal/next-typescript

It works fine apart from the page reloading twice as I don't think there is a way to configure files NOT to be watched by the hot-reloader.

If additional ignore entries could be added here via next.config.js then a solution like this might work.

timneutkens · 2017-01-18T07:26:07Z

@jagreehal That's really cool 💯 I'll have a look into adding the ignore config option in next.config.js.

OskarKlintrot · 2017-01-18T08:15:15Z

I made a PR to @jagreehal example to separate the ts and js. Now the ts is in src but is there a way to point next to a different folder than the root? Then the output folder for tsc could be dist instead which would make the folder structure look much cleaner!

jagreehal · 2017-01-18T21:56:36Z

@timneutkens thanks. Let me know if I can help adding config option in next.config.js.

timneutkens · 2017-01-18T23:28:46Z

@jagreehal #823

giacomorebonato · 2017-01-20T12:41:40Z

I have created a PR with a TypeScript example that works with just running npm run dev.
Any suggestions is appreciated.

#845

giladgray · 2017-01-20T12:50:16Z

@giacomorebonato awesome stuff! left you some review comments 🍰

pbuda · 2017-03-24T13:26:14Z

Any suggestion on how to use TS with custom server? I wanted to use Express and have some trouble. Basically doing import next from "next" fails with server.ts(2,18): error TS2307: Cannot find module 'next'. so I guess I'm missing some typings, right?

--edit--
OK, got it working by specifying next version 2.0.0-beta

OskarKlintrot · 2017-04-03T06:12:20Z

With TS 2.1 and above (if I remember correct) you no longer need the typings, if it's in node_modules it can always be imported as any.

Update: Sorry for replying to such an old post, I didn't see the notification mail until now. Google Inbox grouped it together with another notification mail and I didn't notice the date.

gozes mentioned this issue Jan 11, 2017

Definition Request: nextjs/react-next DefinitelyTyped/DefinitelyTyped#13925

Closed

timneutkens changed the title ~~can i use typescript?~~ Add typescript example Jan 15, 2017

timneutkens added Nice to have labels Jan 15, 2017

timneutkens mentioned this issue Jan 17, 2017

Adding Typescript loader in next.config.js #607

Closed

timneutkens assigned timneutkens and unassigned timneutkens Jan 18, 2017

timneutkens mentioned this issue Jan 18, 2017

Add support for custom hot reload config #823

Closed

timneutkens removed their assignment Jan 26, 2017

timneutkens mentioned this issue Feb 9, 2017

TypeScript example proposal #845

Merged

timneutkens closed this as completed in #845 Feb 9, 2017

timneutkens mentioned this issue May 10, 2017

Add custom webpack dev middleware config #1931

Merged

lock bot locked as resolved and limited conversation to collaborators May 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add typescript example #96

Add typescript example #96

giladgray commented Oct 26, 2016 •

edited

Loading

mmmeff commented Oct 26, 2016

rossipedia commented Oct 29, 2016 •

edited

Loading

giladgray commented Oct 29, 2016 •

edited

Loading

rauchg commented Oct 29, 2016

giacomorebonato commented Oct 29, 2016

rossipedia commented Oct 29, 2016

skhavari commented Nov 2, 2016

giacomorebonato commented Nov 5, 2016

skhavari commented Nov 5, 2016

giacomorebonato commented Nov 7, 2016

BLamy commented Nov 9, 2016

giacomorebonato commented Nov 10, 2016

almilo commented Dec 11, 2016

gozes commented Jan 17, 2017

rossipedia commented Jan 17, 2017

jagreehal commented Jan 17, 2017

timneutkens commented Jan 18, 2017

OskarKlintrot commented Jan 18, 2017

jagreehal commented Jan 18, 2017

timneutkens commented Jan 18, 2017

giacomorebonato commented Jan 20, 2017

giladgray commented Jan 20, 2017

pbuda commented Mar 24, 2017 •

edited

Loading

OskarKlintrot commented Apr 3, 2017 •

edited

Loading

Add typescript example #96

Add typescript example #96

Comments

giladgray commented Oct 26, 2016 • edited Loading

mmmeff commented Oct 26, 2016

rossipedia commented Oct 29, 2016 • edited Loading

giladgray commented Oct 29, 2016 • edited Loading

rauchg commented Oct 29, 2016

giacomorebonato commented Oct 29, 2016

rossipedia commented Oct 29, 2016

skhavari commented Nov 2, 2016

giacomorebonato commented Nov 5, 2016

skhavari commented Nov 5, 2016

giacomorebonato commented Nov 7, 2016

BLamy commented Nov 9, 2016

giacomorebonato commented Nov 10, 2016

almilo commented Dec 11, 2016

gozes commented Jan 17, 2017

rossipedia commented Jan 17, 2017

jagreehal commented Jan 17, 2017

timneutkens commented Jan 18, 2017

OskarKlintrot commented Jan 18, 2017

jagreehal commented Jan 18, 2017

timneutkens commented Jan 18, 2017

giacomorebonato commented Jan 20, 2017

giladgray commented Jan 20, 2017

pbuda commented Mar 24, 2017 • edited Loading

OskarKlintrot commented Apr 3, 2017 • edited Loading

giladgray commented Oct 26, 2016 •

edited

Loading

rossipedia commented Oct 29, 2016 •

edited

Loading

giladgray commented Oct 29, 2016 •

edited

Loading

pbuda commented Mar 24, 2017 •

edited

Loading

OskarKlintrot commented Apr 3, 2017 •

edited

Loading