How to Setup Node.js with TypeScript in 2023
Вставка
- Опубліковано 28 лис 2022
- Learn how to setup Node.js with TypeScript while supporting native ES modules. Use the new NodeNext option to easily interop between CommonJS and ES modules in the same project.
Full Lesson and Source Code fireship.io/lessons/typescrip...
Thanks for this! Setting up a new Node project in 2023 is:
1 hour setting up the build environment
1 hour setting up linting
1 hour getting webpack to work
1 more hour optimizing everything
3 hours researching Deno / Bun / Vite, then deciding it's not worth it
1 hour wondering if you're better off with plain JS
1 hour remembering what you wanted to build
That’s exactly why I skip half of that stuff
How is vite not worth it? 90% of use cases is just install boom works
Ask c++ Devs
Just do bun init
about what ?@@-rate6326
This guy is always reminding me why I
1. Hate the JS ecosystem with a passion
2. Admire the JS developers that maintain their sanity and build stuff with it
Requiring the .js extension from TS was the most stupid TS idea in long time.
@@Caborrrl well, it's technically the spec.
The TS system is very "what the spec is".
Having unsuffixed imports is not valid js.
@@Caborrrl there's a compiler option "esModuleInterop" that fixes it
@@filipmajetic1174 No. The esModulelnterop is not for that or anything related to that. Wtf?
@@shapelessed Just realized my handle is the weird generated one. But I've been there with another stack, same pain.
Why we need to target .js files when they extensions are .ts ? It is so confusing.
You don't. Jeff just doesn't know about the esModuleInterop option on TypeScript.
When you compile you run the .js file and you target the other .js files, typescript won't change your import to ts so you declare it with .js that's why...
@@18.j Wrong
@@stxnw How does TS handle this then?
@@stxnw when I dont specify the files extension, "esModuleInterop" set to true gives me:
Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'
When using .ts files, The vscode hints say:
"An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled.ts(5097)"
When I enable it, all errors are gone, but the typescript compiler throws:
"error TS5023: Unknown compiler option 'allowImportingTsExtensions'."
So weird.
A thousand thank-yous for this! I wish this video were linked in the TypeScript official getting started docs. As an infrequent JavaScript developer starting to dig into the TypeScript ecosystem, the legacy module situation is a huge stumbling block to get past. Love your straightforward presentation.
I feel like it might be a good idea to cover the ts-node package next time which is nice during development
@@vaaski that's basically react my friend
@@vaaski tsx is for react components; we don't need that additional weight here if you're just trying to write some non-frontend code.
@@alanbixby I tend to lean into ts-node, but now it's sounding like a nightmare yet again lol; I'll have to look into esbuild kit I guess lol; yet another tool :RIP:
They used to say to never use ts-node for production, then you could; all the answers are an answer in one point in time and then never again down the road as they become the "wrong answer" lol
I'm just glad to have node 18 here and the older versions dying off 🎉
It's all still a pain though.
@@lsudo No, we're not talking about react or jsx/tsx. Tsx is an npm package, does the same thing as ts-node but it's newer.
@@lsudo tsx is a CLI program, short for typescript execute. it uses esbuild to transpile all imports to js in memory on demand really fast. it also supports jsx/tsx the language extension, which is a bit confusing at first.
OMG I literally sat there with this exact issue an hour ago and couldn’t resolve it and this appears in my subscriptions - THANK YOU!!
Amazing tutorial, It's definitely a good tutorial for beginners, keep up the good work!
you don't know how much you helped me.. thanks mate
Thank you! This could not come at a better time. For the life of me I could not get TypeScript working with my GraphQL setup but your review of the tsconfig files cleared up my confusion. My main issue was needing to add the .js file extensions to the imports.
me tooooo
Million likes for this video! I spent the entire day debugging until I stumbled upon your video. Turns out, the issue was that I was importing a common JS package without specifying {"type":"module"} in the package.json. Thank you so much! ❤❤❤❤❤
I spent 3 hours on fixing this. Thank you so much.
Kudos for the concise & resourceful video 🙌
The video I never knew I needed, thanks Jeff :)
The module field is pretty much abandoned. It's only really used by bundlers. The correct way to tell node how to import your code is to use the "files" and “exports” fields. Not trying to sound like a stackoverflow comment, just wanted to share a thing I picked up after diving into all this stuff recently. Excited to watch the rest, I love your content!
Exactly what I needed . Perfect video!
Every year for advent of code, I spend a majority of my time configuring my baseline JS/TS environment rather than working on the coding problems, which is fun because I get to see how much things have changed just like this video hits on 😆
Edit: I'm excited to see this full course and how it evolves ;D 🎉
Change to Deno. You'll get TS, top-level async, ESM, external modules, linting/formatting with 0 config
@@zettca No. I can't use Deno at work. I wouldn't learn Zig right now for the same reason. Not worth it. I need to know the node ecosystem.
@@codeman99-dev we're talking about AoC, not work.
@@zettca Yes. It is a great opportunity to catch up and learn what is new. It is hard to do that if you jump ship.
@@zettca Just curious, what is AoC?
Love it! Looking forward to watching your full course. But please do it for experienced developers too
Yess!!!! I was hoping to see this video one day on your channel :)
Excellent tutorial!
Great content as always
life saver video
You're a magician for sure!!
This is amazing. Thank you :)
top notch video, can't wait for the 2024 guide
Did the 2024 guide drop yet? bro left us hanging..
@@nithinrajendran3091 sadly not.. we'll have to wait a few more months
i was here for the module thing, thanks
Thank you so much!
Deno NPM compatibility is nearly there! We're so close. Most libraries just work OOTB already. I am running from node with the speed of light my man, at least for my personal projects
An hour looking for a minimal typescript setup with clear explanations. I should have known to come here immediately.
Great use of
I always find myself having a mini heart attack when watching your videos because you'll occasionally hear a baby crying in the background and I ALWAYS think it's my baby. I'm literally home alone right now and still paused the video to listen out for him crying :')
It's truly a peculiar experience see how this channel's owner is gradually descending into madness by the hand of web technologies mostly.
I just can't look away... keep the hard work
Awesome video! Any chance there is a pt. 2 coming with jest, eslint, prettier, and husky?
Excellent!
I'm still confused as to why we need to specify file extention when we import. Couldn't node/TS resolve it itself based on the actual file it is importing?
I kind of remember Ryan Dahl spoke about this being needlessly complex to implement and (not so sure if I remember this right) hogs resources. If he were given a chance to do Node all over again he would not do it.
I just use tsc-alias to fix the import file extension after compiling. It's easier and cleaner. And handles the path aliasing. I would recommend using nodenext for moduleresolution, but for the module option to use esnext or commonjs
Good timing on that video, since advent of code is around the corner ❤
For those that want nodemon to watch over file changes:
add
"ts-node": {
"esm": true
}
to tsconfig.json
And if your shell complains like mine did use ( npx nodemon src/index.ts ) this should work
Also add ts-node globally with ( npm i -g ts-node ) really not sure if this is needed but I did it anyway
You saved me, thank you!
OR us tsup --watch
Thank You
looking forward to that typescript course
hahaha funny, I just wrote a post about swc setup on backend project as well too on my blog a few days ago😅. Nice timing.
Looking forward to part two if this video in a month when all of this changed again :D
That's exactly why I created typescript-project-generator. It will handle all the configs for using TS with Node.js. Give it a try :)
Bruh how did you know I was setting up a project to with both esm and cjs you really are a wizard 👀
Thank you, i was struggling with the tsconfig trying to get the top level await feature working
Deno now supports npm (atleast that is what their propaganda says) so now may be a good time to switch
Why ? I just want to know what will you gain ?
@@brucewayne2480 Built-in Typescript support, better speed, cleaner directories. I don‘t actually know, I am not a backend developer
@@Zwiebelgian it's not a lot of work to setup a typescript project , cleaner directories I'm not seeing any problem, speed not sure , I've not seen any benchmarking
@@Zwiebelgian yeah, it also has better apis under the Deno. namespace and a std library. You also get less config files, lots of built in stuff like linter so you don’t have to do that yourself, more secure, faster http server, better browser compatibility, the apis mostly use promises (and sync versions) instead of callbacks, you can run code directly from a url, even Ts code and so on
The npm support doesn’t work on all packages perfectly just yet but soon:tm:
For me personally the sandboxing capabilities are nice
thank you
Lol i needed that exactly 2 days ago xD
I need to work with pure javascript to get CommonJS working, because of dynamically use the code and re-import it on runtime is such a blessing as well a curse. But for my project and personal works, it's perfectly fine.
That sounds horrific
Just yesterday I was dealing with something similar with Fastify and Typescript. I wanted to be using ESM, and went through the whole troubleshooting process to figure out the right tsconfig settings, but due to the way a lot of Fastify packages were exporting their types it broke being able to import the default export from it. I don't know the specifics, but it was just super annoying that this glorified linter was causing such an obnoxious bug for code that worked fine without it.
However, Typescript in Deno is a beautiful experience. Largely I think because you don't have to worry about commonJS. Makes me wonder if as Deno gets more popular, the TS Node people will move over to it
Except deno breaks your code in ways you can't imagine because of their weird engine
You should make a movie about package managers, only few people know about PNPM for example, but for now it's the fastest and most space efficient solution!
And messy. The amount of time I have spent resolving fcked up symlinks is countless
Time travel is real! Jeff is one month ahead of us!😂❤
Could you go over some scenarios for building and publishing. For instance, I'm creating a base server implementation (basically an express wrapper with auth middleware) and I would like to publish it to a local npm registry (Verdaccio).
It publishes everything, not just the dist folder, and I'm not sure how to handle dependencies.
I have some issues with importing the server package as well, needing to do a second deconstruction of the default export for the dependency.
A good up to date minimal setup for building and publishing would be really cool! Something with build to dist, publish from dist and importing the package somewhere (maybe even with import instead of require)
the moth really cheered me up i cant lie
Super
I had to do this last week haha
Thanks a shit ton for this! I wasted so much time fixing the imports with .ts ext.
evey once in a while i come back and watch this video
Is there an easy way to emit non-js files from src? For instance images or csv.
I hate using 10 different packages to copy the files after compiling or making a complicated build system for a very simple project.
was hoping you would cover how to run the equivalent of nodemon when a change is made to the typescript source code.
Great video.
This reminded me of the reason I don't like web dev... too many moving parts just to get a simple webpage to run.
Madness....... ?
THIS IS JavaScript ecosystem 🔥🔥🔥🔥🔥🔥
Importing a js file in typescript that doesn't exist on the file system is really confusing and simply weird. It's way better to use a tool like tsc-alias to fix the imports as a compilation step instead of having to change every import of every source file in every project.
Yeah I don’t like it
Is there a way to resolve this that works both during compile time and in VSCode?
I like the video, I hated the topic, but it was good content
1) ts-node + nodemon could be very helpful
2) npm i tsconfig@ for certain node version could be helpful, just extends it
no. ts-node is trash
@@stxnw why? And what can replace it?
@@VideoBunt swc-node
ts-node is horrible. Do not use it please
@@VideoBunt tsup (esbuild) in watch mode
You forgot about strict mode in tsconfig.json!
Please make a video on pr-commit hooks
"noEmit": true,
"allowImportingTsExtensions": true,
adding these two will allow you to import ts files as .ts files only.
0:45 javascript at its peak
Great video as always. From 3.09 secs to 3.28 secs, your voice sounded different. Is it me or has anyone noticed it? R u well bro. Please stay safe and sound. Looking forward to your next video.
I have a cold. Nothing serious
I was thinking the same
Thanks for a great tutorial and a perfect argument why not to use JS/TS ; )
Very good guide, amazingly frustrating topic.
Great, I only needed 3 minutes to give up on frontend dev.
Can you make a tutorial on how to host a node app on IIS?
Can you make a video on the T3 Stack from Theo?
which icon pack you are using for icons in side nav ?
For developing nodejs backend, I generally use babel with watch mode and nodemon to have very fast server restart on file save. I'll check this out but I'll probably still prefer sticking with a faster transpiler than tsc
why use babel when u have vite or even the newer tool, rome
@@double-agent-ly Vite for backend? Hmm
For developing frontend I use Vite for very fast hot reload on file save.
Babel is not fast
@@shubitoxXSure faster than tsc, because it just ignores the types, it doesn't type validate the AST like tsc does..
I went through this a couple of months ago. But there might be some starter templates. At least there should be one.
As someone in 2023, I can confirm this is how you setup Node.js with TypeScript
@@minorikoaki No, other way around
No no no, don't use tsc, and don't use ts-node.
@@LarsRyeJeppesen Sorry, in 2023, we still use tsc for some reason... I don't make the rules
The ritual of harakiri is easier than this.
Maybe quick guide here on how to set eslint?
Don't forget to add the "--enable-source-maps" flag when running your compiled code with node, otherwise the sourcemaps will be ignored.
I just started learning coding (JS) and i found these channels of yours, I usually just watch to see what will I learn in the future but damn this one looks complicated, you do this everytime to build a project??
That's the neat part: it's even worse. Depending on the frameworks, libraries that you use you might need to use a completely different tool chain. Or maybe you need to include a frontend framework - much luck without the init of that framework.
But! If you just use a "plain" server side express app this setup should be fine every time
How about a demo on how to make a basic PWA?
Cool
tsc? What about Turbo, EsBuild etc? Why use npm when we have pnpm?
2023? Getting a little ahead of ourselves aren't we?
tsc --init works most of the time aswell
Nah, this is one of the reasons why I use Nest.js - TypeScript by default, no hassle, no cry - just awesome architecture, typescript and more time for playing Witcher 3 after the work is done.
Or simply install nest or another boilerplate starter
Lately I found myself better setting vite-node rather than trying to set all that experimental flags to run my code with modern day devfeatures
Hello, I am using node JS and I am trying to use ECMA script with both js and TS files. I have set in my package.json "type: module", but when it fails to build with the output: "unknown file extension TS"
but if you import module with '.js' postfix - don't you then the ability for type checking by typescript, cause imported code is treated as js code?
The moment when you insert a voice over from another recording session x)
I have trouble deciding if the best thing about your videos are the software parts of the meme parts...
Do Babel next.
I think you should add the watch option for watching new changes instead of compiling everything manualy
This is going to be complex plus .js for ts ????
Every time someone is sharing their project setup I recall that scene from American Psycho.
Do the course in strict:true mode pls.
get well bro
I just noticed that you still use NPM... any thoughts on PNPM?