TypeScript example proposal #845

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

Added a very basic example using TypeScript.
Livereload seems to work.

To test it just run

npm install  
npm run dev

Using concurrently to run both next and TypeScript compiler with one command.

Fixes #96

giladgray

this is a great minimal example! just a few suggestions for a simpler setup.

giladgray · 2017-01-20T12:47:06Z

examples/with-typescript/typings.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react": "registry:npm/react#15.0.1+20170104200836"


i would suggest using @types/react directly in NPM instead of relying on typings.
it's the way of the future, and you wouldn't need postinstall task.

Thanks, didn't know!

If you make this change I'll merge!

it's there! Is it what you mean right?

giladgray · 2017-01-20T12:48:02Z

examples/with-typescript/package.json

@@ -0,0 +1,17 @@
+{
+  "scripts": {
+    "dev": "$(npm bin)/concurrently \"tsc --watch\" \"next \"",


shouldn't need to add $(npm bin)/ in package.json scripts--NPM configures PATH automatically for you when running npm scripts.

should be safe to just say "concurrently 'tsc --watch' 'next'"

giladgray · 2017-01-20T12:49:10Z

examples/with-typescript/package.json

+  "dependencies": {
+    "next": "^1.2.3",
+    "react": "^15.4.2",
+    "typescript": "^2.1.5",


i'd argue that typescript is a devDependency

jagreehal · 2017-01-20T16:44:51Z

Hey @giacomorebonato I'm trying a similar experiment see https://github.com/jagreehal/next-typescript . You're going to have the problem of the page refreshing twice until Next v2.1

OskarKlintrot · 2017-01-20T19:11:28Z

This wont be able to handle static content either if you want to separate the build and source. I will try to create a simple example using tscomp for the build process, which hopefully will be really neat!

giacomorebonato · 2017-01-20T19:32:26Z

Looking forward to it @OskarKlintrot

timneutkens

Cool, though I wonder if we can use webpack here 🤔

giacomorebonato · 2017-01-20T22:51:42Z

A setup like this works pretty well with tests without webpack.
However it is a good topic.

giacomorebonato · 2017-01-20T23:00:27Z

As a Typescript enthusiast I feel freedom in just using the native compiler, without clashing on other JS build processes.

rauchg · 2017-01-20T23:40:18Z

examples/with-typescript/package.json

+  },
+  "dependencies": {
+    "next": "^1.2.3",
+    "react": "^15.4.2"


A concern is that this will get out of sync with next's react

I have remove React dependency. I thought it was a peer one.

rauchg · 2017-01-21T02:41:46Z

examples/with-typescript/package.json

+    "dev": "concurrently 'tsc --watch' 'next'"
+  },
+  "dependencies": {
+    "next": "^1.2.3"


This doesn't seem to depend on a specific version of next. Can you use latest here?

rauchg · 2017-01-22T18:15:07Z

examples/with-typescript/package.json

+  },
+  "devDependencies": {
+    "@types/react": "^15.0.1",
+    "babel-preset-react": "^6.22.0",


Why the babel preset? Is that a TypeScript requirement?

I thought I was getting an error without it... but I have tried again and it's not needed.
Removed.

OskarKlintrot · 2017-01-22T19:34:31Z

Now I have an example of using tscomp with next here. It's based on @jagreehal example. However, css modules and images are not working, so this is more or less the same example as @jagreehal's but with an overkill build process in place (tscomp is built on top of create-react-app but also work for server apps). I do would love to just use the native compiler @giacomorebonato but as long as it's not working for static assets without building the js to the same dir as the ts then it is a bit limited. To me personally it would be a deal breaker to have the src and build in the same place. I will keep looking into setting up tscomp to work with the static assets as well.

jagreehal · 2017-01-22T21:42:20Z

@OskarKlintrot nice I'll take a look. I've also been thinking about adding a babel-loader!ts-loader here https://github.com/zeit/next.js/blob/master/server/build/webpack.js

giacomorebonato · 2017-01-22T21:46:33Z

In VSCode it's possible to hide the .js files and see only the .ts ones.
I like this solution, because it allows to use next.js simple as it is.

giladgray

this seems like an ideal minimal typescript example: it provides a clean solution for the single problem of typescript compilation. it does not presume to handle more than it needs to, such as testing (solved by dozens of other tools; i suggest ts-jest) or static assets (supported by next itself).

OskarKlintrot · 2017-01-23T06:50:14Z

examples/with-typescript/tsconfig.json

+        "module": "commonjs",
+        "target": "es6",
+        "noImplicitAny": false,
+        "sourceMap": false,


Why not using source maps?

You are right, they are useful. Will change this

might be best to make this file as simple as possible, the bare minimum to compile successfully. let other folks choose their compiler flags as necessary.

just set jsx, module, and target.

Makes sense!

(and maybe change es6 to es2015 while your at it ;-) )

OskarKlintrot · 2017-01-23T14:19:53Z

Just did a PR to @giacomorebonato fork :)

giacomorebonato · 2017-01-23T17:50:53Z

hi @OskarKlintrot I have seen you PR.
I don't see .gitignore in the other examples.
I am willing to convert one component to a functional one, but I will keep the other extending React.Component, since this is not a boilerplate but just a small example. ;)

OskarKlintrot · 2017-01-23T19:35:00Z

It's bad practice to version control build files, that's the reason behind gitignore. Ignoring *.js will probably not be a good idea in the other examples... Using stateless functions is [the preferred way of doing it in react]( https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) so why do something different in the example? Den mån 23 jan. 2017 18:51Giacomo Rebonato <[email protected]> skrev:

…

hi @OskarKlintrot <https://github.com/OskarKlintrot> I have seen you PR. I don't see .gitignore in the other examples. I am willing to convert one component to a functional one, but I will keep the other extending React.Component, since this is not a boilerplate but just a small example. ;) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#845 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGeDh-vmFTvWe4XfqNPbVyajxXNO2WBnks5rVOiBgaJpZM4LpQ6r> .

giacomorebonato · 2017-01-23T20:46:20Z

ah ignoring .js it is a good idea sorry if I read the PR too fast.
I will accept it and update this.
The reason why I used a stateful component is because it is used also in next.js readme for showing getInitialProps usage, but I can change it too.

giacomorebonato · 2017-01-23T20:53:33Z

@OskarKlintrot I just added another commit. In the gitignore I have considered only the .js files since .next and node_modules are excluded by top level .gitignore.

OskarKlintrot · 2017-01-24T06:14:49Z

You really kill all joy and motivation of helping out code wise when you take my changes but ignore my commits (PR), thous taking away all the credits for what I have actually done and leaving me out as a contributor.

rauchg · 2017-01-24T06:19:02Z

Maybe it was a tooling issue! Would love to have you both as contributors to have the best possible TypeScript example 😇

OskarKlintrot · 2017-01-24T06:25:56Z

Thank you @rauchg, really appreciating it!

I still see stuff to improve on (this example won't run on Windows, at least not on PS, for example), maybe I can calm myself down a bit and do a new PR later today.

Changing subject, this commit history is really growing out of proportion, 13 commits and counting! The commits are longer than the code! 🙀

giacomorebonato · 2017-01-24T09:34:18Z

@OskarKlintrot sorry... I didn't want to disrespect you. I was just hoping to have this merged soon and it was a rookie mistake.

I reverted and merged your PR, if you have other improvements you are welcome ;)

Removed typings Moved TypeScript to dev dependencies removed unused typings changed react typings version removed react dependency set next dependency version to latest removed not needed babel preset enabled sourcemaps simplified tsconfig modified component to be a functional one

giacomorebonato · 2017-01-24T09:47:30Z

I was trying to squash the commits... and I did a mess, trying to repair.

OskarKlintrot · 2017-01-24T10:17:22Z

The commit history looks much better! I can make a new PR in a couple of minutes!

giacomorebonato · 2017-01-24T10:29:36Z

merged!

timneutkens · 2017-01-24T11:41:36Z

examples/with-typescript/package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "concurrently \"tsc --watch\" \"next\""


Does next need to be quoted? Since it doesn't have any options. 🤔

I just tried it and no, it's not needed. Is it a deal breaker we should fix or should we prioritize a cleaner commit history?

@OskarKlintrot You could rebase this into the other "cleanup" commit 🥇

True! It's my commit but on @giacomorebonato fork that I don't have push access to, can @giacomorebonato rebase it or do I have to do it and make a new PR to that fork? This is a bit outside my comfort zone with git.

I will try to make the change and then rebase.

giacomorebonato · 2017-01-25T14:54:15Z

I have noticed problems when using next/head with this configuration.
The head tags are taken, but a warning is thrown up with a message about trying to render an empty component.

timneutkens · 2017-01-27T16:12:03Z

What a huge PR has this gotten into 😅, I'll check that error @giacomorebonato

timneutkens · 2017-01-27T17:51:54Z

Also, there is no README.md 😥

giacomorebonato · 2017-02-01T09:43:31Z

Hi @timneutkens I just came back from holidays. I will update this PR soon with a README.md too!

timneutkens · 2017-02-08T21:16:08Z

examples/with-typescript/README.md

+Output JS files are aside the related TypeScript ones.  
+
+## To fix  
+It tsconfig.json the options `jsx="react"` compiles JSX syntax into nested React.createElement calls.  


Typo:

In tsconfig.json the option "jsx": "react" compiles JSX syntax into nested React.createElement calls.

timneutkens

Looks good 👍

giacomorebonato · 2017-02-09T11:44:51Z

Thanks! I hope to investigate more and to help!

karthikiyengar · 2017-02-28T13:11:31Z

Hi @giacomorebonato - How do you get sourcemaps to work reliably here? Runtime errors point to the transpiled JS code instead of the ts source files. Is there any workaround? I've tried enabling sourceMaps in tsconfig.

giladgray · 2017-02-28T18:40:26Z

@karthikiyengar i'm no expert in next's webpack setup, but typically you need to add source-map-loader to load source maps from externally compiled files. have you tried mucking with next.config.js?

giacomorebonato · 2017-03-01T09:32:26Z

Latest release of TypeScript compiles JSX files to JS. I want to try to edit the boilerplate in a way that we rely only on webpack for compilation and this should help also for the sourcemaps.

bestwestern · 2017-04-02T20:00:12Z

I have mad a pull request where tsx compiles directly to: JS #1600

jagreehal · 2017-04-02T21:09:50Z

I wrote a game for a talk on Typed JavaScript and used TypeScript and Next - https://github.com/jagreehal/typescript-react-redux-jest-card-game Hopefully this helps.

…

On Sun, Apr 2, 2017 at 9:00 PM, Rune Jeppesen ***@***.***> wrote: I have mad a pull request where tsx compiles directly to: JS #1600 <#1600> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#845 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADd22k6xwJr5daUTgO3UVEYbMZk8lyJAks5rr_5QgaJpZM4LpQ6r> .

TypeScript example proposal

d965735

giacomorebonato mentioned this pull request Jan 20, 2017

Add typescript example #96

Closed

giladgray suggested changes Jan 20, 2017

View reviewed changes

timneutkens reviewed Jan 20, 2017

View reviewed changes

rauchg reviewed Jan 20, 2017

View reviewed changes

rauchg reviewed Jan 21, 2017

View reviewed changes

rauchg reviewed Jan 22, 2017

View reviewed changes

giladgray approved these changes Jan 22, 2017

View reviewed changes

OskarKlintrot reviewed Jan 23, 2017

View reviewed changes

Ignore build

0b98335

Making npm script Windows-friendly

0e6d2db

timneutkens reviewed Jan 24, 2017

View reviewed changes

Clean up

6c3b2f0

Added readme

e86e2af

timneutkens reviewed Feb 8, 2017

View reviewed changes

fixed typo

5ee005a

timneutkens approved these changes Feb 9, 2017

View reviewed changes

timneutkens merged commit b00f0c2 into vercel:master Feb 9, 2017

OskarKlintrot mentioned this pull request Apr 3, 2017

Updated typescript example to newest Typescript and e #1600

Closed

lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019

TypeScript example proposal #845

TypeScript example proposal #845

Conversation

giacomorebonato commented Jan 20, 2017 • edited by timneutkens Loading

giladgray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jagreehal commented Jan 20, 2017

OskarKlintrot commented Jan 20, 2017

giacomorebonato commented Jan 20, 2017

timneutkens left a comment

Choose a reason for hiding this comment

giacomorebonato commented Jan 20, 2017

giacomorebonato commented Jan 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OskarKlintrot commented Jan 22, 2017

jagreehal commented Jan 22, 2017

giacomorebonato commented Jan 22, 2017

giladgray left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OskarKlintrot commented Jan 23, 2017

giacomorebonato commented Jan 23, 2017

OskarKlintrot commented Jan 23, 2017 via email

giacomorebonato commented Jan 23, 2017

giacomorebonato commented Jan 23, 2017

OskarKlintrot commented Jan 24, 2017

rauchg commented Jan 24, 2017

OskarKlintrot commented Jan 24, 2017

giacomorebonato commented Jan 24, 2017 • edited Loading

giacomorebonato commented Jan 24, 2017

OskarKlintrot commented Jan 24, 2017

giacomorebonato commented Jan 24, 2017

Choose a reason for hiding this comment

OskarKlintrot Jan 24, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giacomorebonato commented Jan 25, 2017

timneutkens commented Jan 27, 2017

timneutkens commented Jan 27, 2017

giacomorebonato commented Feb 1, 2017

Choose a reason for hiding this comment

timneutkens left a comment

Choose a reason for hiding this comment

giacomorebonato commented Feb 9, 2017

karthikiyengar commented Feb 28, 2017

giladgray commented Feb 28, 2017

giacomorebonato commented Mar 1, 2017

bestwestern commented Apr 2, 2017

jagreehal commented Apr 2, 2017 via email

giacomorebonato commented Jan 20, 2017 •

edited by timneutkens

Loading

giacomorebonato commented Jan 24, 2017 •

edited

Loading

OskarKlintrot Jan 24, 2017 •

edited

Loading