Type checking during development
Unanswered
Horned oak gall posted this in #help-forum
Horned oak gallOP
Is it possible to get type checking during
I understand type checking happens in
npm run dev
?I understand type checking happens in
npm run build
but it is too late and not ideal.24 Replies
@adam.birds hi, you might know this lol
You wouldn't want it during development, you would barely get any development done as it would crash the dev server all the time. (So I don't know for sure, but even if it was an option I wouldn't ever recommend or want it) Its best setup your linters and run regularly or set them as a pre-commit hook so you know before you push (just presuming you build in CI).
You should be able to just run
You should be able to just run
npm run lint
as that does come auto configured with nextjs.Here is a guide on how to add a pre-commit hook. It covers setting bioth prettier and eslint as a pre-commit hook usinghusky and lint-staged
https://chatgpt.com/share/67b66caf-e5cc-8011-a351-ef29de42dd01
https://chatgpt.com/share/67b66caf-e5cc-8011-a351-ef29de42dd01
Horned oak gallOP
Linting and type checking are two different things though
And I do appreicate the early feedback on type checking during dev
@Horned oak gall Linting and type checking are two different things though
ESLInt is what warns about the type checking though generally isn't it.
A linter can definitely catch some compile time errors and make you fix them otherwise it’ll be complaining all the time
Typescript is sort of a linter after all, it it wasn’t for Next.js internal scripts that run before building it wouldn’t matter and you’d be shipping type errors
Horned oak gallOP
I understand that ESLint can catch errors but I don't think it is type checking.
For example, linting cannot give me this type check error.
For example, linting cannot give me this type check error.
Type error: Object literal may only specify known properties, and 'items' does not exist in type 'ReactGridLayoutProps'.
14 | const DEFAULT_PROPS: RglProps = {
15 | className: "layout",
> 16 | items: 15,
| ^
17 | rowHeight: 5,
18 | onLayoutChange: function () {},
19 | cols: 12,
Ahh so my mistake ESLint isn't what does the type checking during the build (just assumed it was, i don't tend to get many type errors), it apparently runs
tsc --noEmit
during the build so you could add "type-check": "tsc --noEmit"
to the scripts
section of package.json
and then run npm run type-check
and again also set it as a pre commit hook.@Horned oak gall I understand that ESLint can catch errors but I don't think it is type checking.
For example, linting cannot give me this type check error.
Type error: Object literal may only specify known properties, and 'items' does not exist in type 'ReactGridLayoutProps'.
14 | const DEFAULT_PROPS: RglProps = {
15 | className: "layout",
> 16 | items: 15,
| ^
17 | rowHeight: 5,
18 | onLayoutChange: function () {},
19 | cols: 12,
Do you not get warned about this directly in VSCode though as VSCode does warn me about any typing errors as they happen.
Horned oak gallOP
I don't use VScode
@Horned oak gall I don't use VScode
what do you use?
Horned oak gallOP
Vim
Direct in the terminal? Thats old school, respect.
In that case, this is defintely your best option: https://nextjs-forum.com/post/1341969483312664606#message-1341973195024109589
Horned oak gallOP
Thanks. I just found the [Discussion](https://github.com/vercel/next.js/discussions/33634)
Just read that, and an important thing to note is that even if you run tsc, unless you have navigated to that page during dev, or run build the tyoes won't exist in .next/types so it could still fail, so if you make any changes you will have to either build or navigate to those pages before running again:
https://github.com/vercel/next.js/discussions/33634#discussioncomment-10130492
https://github.com/vercel/next.js/discussions/33634#discussioncomment-10130492
Horned oak gallOP
That is pretty annoying 🤔
you can just run
tsc --noEmit --watch
it won't compile anything, just give you type errors
pair this command with something like concurrently but you will need hacky ways because concurrently restarts the whole process
you can run this command in different terminal session all together
@Yi Lon Ma you can run this command in different terminal session all together
Horned oak gallOP
I did try the idea presented [here](https://github.com/vercel/next.js/discussions/33634#discussioncomment-7270667) but it is really messy, the output from
So in the end, I have two tabs opened for
next run dev
and tsc
are all mixed together.So in the end, I have two tabs opened for
next run dev
and tsc
, better than nothing.