Learning TypeScript: Part One

What follows is a stream-of-consciousness replay of me messing around with TypeScript. It’s from the point of view of a vaguely competent JavaScript hacker. I’m including the warts and brain-farts in the hopes they’re either interesting or useful.

---

> Google “getting started with TypeScript”, click to TypeScript in Five Minutes.

OK, cool, so types are specified for the parameters and output of a function by adding a trailing colon and type name, like this.

[code language=”javascript”]
function isBigString(someParameter: string): boolean {
return (someParameter.length > 4 );
}
[/code]
They also have a concept of “Interfaces”, where you can specify the shape of an object, like this.

[code language=”javascript”]
interface Person {
firstName: string;
lastName: string;
}
[/code]
It seems kinda weird that they use css-style notation (declarations end with semicolons) rather than JavaScript object notation, but whatevs. Easy, peasy.

> Install Visual Studio Code, the suggested IDE for TypeScript, also made by Microsoft.

Hey, this is pretty snazzy. Works really well with TypeScript, which… well duh.

Wait, how do you open a project in VSC from command line?

[code language=”bash”]> vsc .[/code]
No, that’s not it.

[code language=”bash”]> vs .[/code]
Nope, not that either.

> Google “open visual studio code from command line”. Find this setup page.

OK, have to open the command pallete and install the shell command.

[code language=”bash”]> code .[/code]
That’s the ticket.

OK, let’s go deeper than the five-minute tutorial. Looks like typescriptlang.org has a bunch of Quickstart guides. I’ll try the React guide.

They’re using create-react-app so I have to install that first.

[code language=”bash”]> npm install -g create-react-app[/code]
then

[code language=”bash”]
> create-react-app my-app –scripts-version=react-scripts-ts[/code]
Alright, now it’s doing a bunch of stuff. Probably installing a million dependencies.

[code language=”bash”]> ls node_modules[/code]
Confirmed, that’s one million modules. Somewhere a neckbeard is crying. OK, whatevs.

[code language=”bash”]> npm start[/code]
And there it goes.

[code language=”bash”]
Compiled successfully!

You can now view my-app in the browser.

Local: http://localhost:3000/
On Your Network: http://10.5.96.6:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.
[/code]
Hey, that’s really cool! It automatically makes the site available on my local network.

> Go to http://10.5.96.6:3000 in my iPhone

Yup, there it is. Well hell, that makes mobile testing easy.

[code language=”bash”]> npm test[/code]
What the heck?

[code language=”bash”]Determining test suites to run…
–watch is not supported without git/hg, please use –watchAll
npm ERR! Test failed. See above for more details.
[/code]
> google “watch is not supported without git/hg”, read this issue on github.

Ugh, do I need to change the “watch” command to “watchAll”? Where do I even do that?

> read more

Oh! It’s just complaining because I don’t have git initialized in this project. That could be more clear.

[code language=”bash”]> git init
> npm test[/code]
Back in business.

[code language=”bash”]
PASS src/App.test.tsx
✓ renders without crashing (19ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.327s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
[/code]
Oh, I like this. Really well done.

> Go back to the React walkthrough and create Hello.tsx using sample code.

Hmm… why does the file start with this comment?

[code language=”javascript”]
// src/components/Hello.tsx
[/code]
I don’t get it. Is that necessary? There must be some meaning here. Does that somehow help the compiled (ahem transpiled) code map to the source code? Oh wait, it’s probably just so I know where the file should go. I’m an idiot.

> Continue the tutorial, implementing the new component and adding CSS.

Hmm… plain old CSS. What am I a caveman? What transpiled-to-css languages are the cool kids using nowadays?

> Googles around to see what people are using.

Looks like Sass is still the go-to. Anyway, that was a pointless diversion. I hate myself.

> Continue the tutorial, wherein we start writing tests with Jest.

Looks like I’m supposed to install a bunch of stuff now.

[code language=”bash”]
> npm install -D enzyme @types/enzyme react-addons-test-utils
[/code]
Uh oh, first chink in the armor, Ted.

[code language=”bash”]
➜ test3 git:(master) ✗ npm install -D enzyme @types/enzyme react-addons-test-utils
npm WARN deprecated nomnom@1.6.2: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.

+ @types/enzyme@3.1.11
+ react-addons-test-utils@15.6.2
+ enzyme@3.3.0
added 28 packages from 33 contributors and audited 30811 packages in 16.696s
found 0 vulnerabilities
[/code]
What the hell is nomnom? And why would I contact support@npmjs.com about it? I’m fairly certain they would tell me to f*** right off if I said “uh… could you help me with nomnom?” The docs are inscrutable. “It noms your args and gives them back to you in a hash.” Gee thanks. Maybe it’s clear to regular people and I’m just stupid. Or maybe nom just sucks. Well it’s only deprecated, let’s skip that warning for now.

> Google “ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself”, find this github issue for npm.

Umm… so… that’s a lot of words. What do I need exactly? Am I supposed to install ajv@^6.0.0? The issue is opened on npm itself, not on ajv. That seems bad. What is ajv anyway? Oh, JSON schema validator? Alright then.

> read this stackoverflow article about the issue.

OK, so that says I’m supposed to update my installation of npm and install ajv@6directly.

> take a flyer, update npm and install ajv directly

[code language=”bash”]
> npm install -D ajv@6
[/code]
Now I’ll try that other command again, see if I get the same errors.

[code language=”bash”]
➜ test3 git:(master) ✗ npm install -D enzyme @types/enzyme react-addons-test-utils
npm WARN deprecated nomnom@1.6.2: Package no longer supported. Contact support@npmjs.com for more info.
npm WARN react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.

+ @types/enzyme@3.1.11
+ enzyme@3.3.0
+ react-addons-test-utils@15.6.2
updated 3 packages and audited 30817 packages in 10.298s
found 0 vulnerabilities
[/code]
Success! I got past that error about ajv.

> googles “react-addons-test-utils@15.6.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.”

Ok, reading several different threads and github issues (the humanity!), but eventually find this one, which explains

There is no bug here. react-addons-test-utils doesn’t exist in React 16. Use react-dom/test-utilsinstead.

Bloody hell… ok, so the TypeScript/React tutorial is based on an older version of React. Let’s see if the tutorial has any issues or pull requests addressing this. Ah yes, there are several. Some with different solutions. This one looks the best. It’s approved, but for some reason it’s not merged. Why can’t they keep things up-to-date? But my github is full of stuff I’ll never touch or keep up to date myself, so who am I to judge? Well, let’s look at the code.

OK, I need to install a different set of test helpers, and I need a test-setup file. Hmm… I wonder if I even needed that ajv thing if I’m updating this other stuff. Well, lemme uninstall react-addons-test-utils and that ajv thing first.

[code language=”bash”]
> npm uninstall react-addons-test-utils
> npm uninstall ajv@6
> npm install -D enzyme @types/enzyme enzyme-adapter-react-16 @types/enzyme-adapter-react-16 react-test-renderer[/code]
OK, this is looking groovy. Now I’ll add the test helper file as mentioned in the pull request.

Wait… now my test-runner (which I’ve kept running this whole time) is failing.

[code language=”bash”]
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme’s top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested. For example:

import Adapter from ‘enzyme-adapter-react-15’;

To find out more about this, see http://airbnb.io/enzyything frme/docs/installation/index.html
[/code]
What? Why is it complaining about enzyme-adapter-react-15? That doesn’t make sense, I installed everything for react-16. Suck a butt.

> goes down a long rabbit hole of google searches and whatnot with no success.

Why does everything have to be so dang hard? Ugh, why can’t they keep the stupid tutorial up-to-date? This is such a pain. I HAVE EVERYTHING!

> Realize I never restarted the test-runner, so it never picked up my test setup file. Restart the test-runner.

Oh yeah, I’m an idiot. It’s happy again.

[code language=”bash”]
PASS src/components/Hello.test.tsx
PASS src/App.test.tsx

Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 5.571s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
[/code]

Wrapup

So… this all probably took me about 10–15 minutes to do in realtime and about 2–3 hours to document in this post (I’m a developer, so multiply everything by 3), but at this point I’m at a good stopping point. I’ve got it all running, learned a few things. Out of respect for the reader, let’s call this Part One and I’ll pick it up for Part Two in the next post.