I was watching a short video recently where the author was using TypeScript, except the only TS’ing thing about their code was the file extension. Otherwise it looked identical to the JavaScript I’ve come to love.
Since I finally joined the React train, I thought it might be time to take a more serious look at TS, so long as I can do it in tiny incremental steps, one toe at a time.
I had gotten the impression that I could use TypeScript in the same way that I can use the SCSS compiler with regular CSS and it will result in a working build, i.e. with only a filename change to my JavaScript (or near enough).
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
My goals[](#my-goals)
The only things I wanted out of this toe-dipping experiment was:
-
In node I want to use
import x from 'x'with zero-to-near-zero configuration (ideally zero…yes, I’d like my cake and I’d like to eat it) -
Type hints in my code (I’m using VS Code)
-
My code to continue to work without me having to add types to everything and importantly: not to have to refactor my code
The thing that I think makes my task slightly more difficult than "just use TypeScript", is that I have a working code base in the first place. So I intend to port my code.
Step 1: finding the minimum requirement[](#step-1-finding-the-minimum-requirement)
It took a while to find the bare minimum requirement to run my code. I was hoping for a video that explained "install this, and add that", but in the end I thought I found what I was looking for in a [TypeScript deep dive](https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html) ebook by [@basarat](https://twitter.com/basarat).
Essentially…apparently:
-
npm i -D typescript @types/node -
tsc --init -
Use
nodemon --watch 'src/*/.ts' --exec 'ts-node' src/index.tsin mynpm run devscripts
Not so bad so far. Now, apparently, I just need to rename my src/index.js to src/index.ts and it’ll work.
My first blocker[](#my-first-blocker)
[ts] Cannot redeclare block-scoped variable 'directiveResolvers'. [2451]Yeah…no idea. It’s not entirely clear without having to google off for the answer, and even then I wasn’t sure why I was seeing this error.
I could refactor my code to solve the problem (instead of declaring the directiveResolvers variable, I would export the value directly) - but I still didn’t know why.
So, new approach.
The migration approach[](#the-migration-approach)
Another [friendly twitter’er](https://twitter.com/matijagrcic/status/1087781402102452226) put me on to the [TypeScript migration guide](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) which was worth trying since I couldn’t get past the error above (not without changing my codebase).
This meant reverting my previous attempts (I’m using git so this was safe to do) and pasting in their minimum tsconfig.json file:
{
"compilerOptions": {
"outDir": "./dist",
"allowJs": true,
"lib": ["esnext"],
"target": "es5"
},
"include": ["./src/**/*"],
"exclude": ["node_modules", "__tests__"]
}Then I ran tsc in the directory that the tsconfig.json file sat in.
Due to my existing codebase, tsc started to throw a lot of errors, like, hundreds!
error TS2583: Cannot find name 'AsyncIterator'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.The suggestion in the error was to add "lib": ["es2015"] to the tsconfig.json - except that didn’t work at all. Through trial and error, I found that using esnext instead lets me run without this particular error. So now I had new errors to contend with…
My dependencies[](#my-dependencies)
Once I fixed the error above, tsc complained heavily about a lot of code that I didn’t recognise:
Thankfully enough of the filename was visible to consider that the compile process was going into the node_modules directory, and I’d imagine there was an exclude option in the config.
Except, adding
"exclude": ["node_modules"]…didn’t work - and still threw the same TypeScript errors. Which is where I’ve left it for the time being.
The usual frustrations[](#the-usual-frustrations)
I work alone and so I don’t have anyone I can easily turn to ask the obvious questions, like "what have I don’t wrong here". In the Migrating from JavaScript guide on the TypeScript web site, right after the basic setup, it ends with:
You should now have TypeScript working with your project
Which of course I don’t. Sadly there’s no suggested path forward if you fall into the category of "somehow failing".
So for the meantime, [I’ve turned to StackOverflow](https://stackoverflow.com/questions/54324127/migrate-from-js-errors-in-tsc-build) (which feels…creepy somehow), in the hope that I can get an answer to my current build failure and hope to continue this story of toe dipping.
Alas, so far, it feels like Object.freeze(toe) has turn gangrenous and fallen off…
I shall return, with new toes (and perhaps less puns) ✊
I should add, feel free to point me in the right direction, or right my wrongs in the comments below 👍
Published 23-Jan 2019 under #code. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/toe-in-typescript.md)
👍 2 likes
[](
Comments
Lock Thread
Login
Add Comment[M ↓ Markdown]()
[Upvotes]()[Newest]()[Oldest]()
Jakobud
0 points
5 years ago
Just wait until you get to the part when you find out that tons and tons of basic modules from npm don’t work with Typescript out off the box because they don’t some sort of "typings" definitions included and you have to instead use specially made typings definitions modules instead:
[https://github.com/Definite…;](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types)
That random npm module you are using, I hope there is a typings for it or else you are screwed.
But don’t worry, Typescript is awesome……
ztolley
0 points
5 years ago
Totally agree with how you feel. I’ve dipped my toe in so many times and every time it comes back to I hear React devs love Typescript and yet there is a lack of solid examples of simple React/Redux projects and those that exist are all so completely different because there is no way of doing it and the amount of extra boilerplate code is overwhelming,.
Raivo Laanemets
0 points
5 years ago
I recommend to try out Visual Code text editor. It has TypeScript support built in (enabled by default) and will visually highlight all type errors that you have in the code. This makes them much faster to fix.
The type checker going into node\_modules is likely from the missing "include" option. It should contain your source but not external stuff.
I recently converted a mid-size Open Source Node.js+SPA app (my rss reader) into TypeScript and Visual Code made conversion much easier and faster. Also added TSLint plugin and tslint rules (I disabled some which I did not like tho).
I ended up with two sets of TypeScript configurations, one for backend and one for frontend. I also have 3 TypeScript compilers: tsc for backend, webpack (babel, compiles and bundles) and jest (tests, compiles on-the-fly while running tests).
While I was able to configure all that, I had a bit negative experience with it. I also wanted typesafe Redux stuff and React components. This turned out to be a bit verbose. The line count of the codebase went from 400 to 2900 after rewrite.
[Commento](https://commento.io)