MacBooks, Typescript, ZSH, Oh my!

Photo by Tara Evans on Unsplash

I was setting up a typescript project for learning purposes, and noticed that ZSH was complaining that the tsc command was not found.

🌎 I tried installing globally with yarn, but no dice.

Most of what I was finding online was saying to install globally with npm but in an effort not to mix yarn and npm I was stubbornly avoiding npm.

I figured my .zshrc must be missing some PATH directory or something that my .bashrc file has, which I figured I’d look into it later.

Also, npx tsc worked, but tsc did not. So, okay fine that works but it still bugged me that plain ol’ tsc didn’t work.

brew

Eventually after some googling I came across this StackOverflow answer that mentioned installing typescript with brew. I had installed typescript in the project, but I hadn’t considered installing it with brew given that I had tried installing with yarn globally.

Sure enough, after running brew install typescript I am now able to run tsc from anywhere.

And this makes sense since brew manages all the files and symlinks for the things that it installs. I generally just think of brew as the package manager for Mac OS things, and not necessarily for Node or JavaScript-library things.

I also was still not sure why installing globally with yarn did not work. I imagined yarn would do something similar in order to make things accessible from anywhere, but then again if it puts things in a folder that’s not in the PATH then it ain’t gonna work.

npm

Then I wondered if installing globally with npm would work as the more highly-voted answers on that same StackOverflow post suggested. So I figured I’d try it 🤷‍♂

First, I needed to uninstall the typescript I had installed with brew.

➜  nightwatch-ts git:(master) ✗ brew uninstall typescript
Uninstalling /usr/local/Cellar/typescript/3.9.3... (180 files, 51.7MB)
➜  nightwatch-ts git:(master) ✗ tsc                                                                                 
zsh: command not found: tsc

Then I needed to install globally with npm…

➜  nightwatch-ts git:(master) ✗ npm i typescript -g
/Users/joel/npm/bin/tsc -> /Users/joel/npm/lib/node_modules/typescript/bin/tsc
/Users/joel/npm/bin/tsserver -> /Users/joel/npm/lib/node_modules/typescript/bin/tsserver
+ typescript@3.9.3
added 1 package from 1 contributor in 2.37s
➜  nightwatch-ts git:(master) ✗ tsc --version
Version 3.9.3

Unbelievable 😤

yarn

So then I’m like, “yarn, what gives?”

I google the yarn docs. Maybe I installed typescript incorrectly the first time (probably lol).

Welp, I’m not sure what I did the first time but I definitely did not do it the way the documentation suggests. I probably did a yarn add typescript -g something-or-other. Serves me right.

So I uninstalled the globally-installed typescript that I had just installed with npm.

➜  nightwatch-ts git:(master) ✗ npm uninstall typescript -g
removed 1 package in 0.132s

Then tried with yarn (but this time the way the documentation suggests).

➜  nightwatch-ts git:(master) ✗ yarn global add typescript
yarn global v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "typescript@3.9.3" with binaries:
      - tsc
      - tsserver
✨  Done in 3.55s.

Moment of truth!

➜  nightwatch-ts git:(master) ✗ tsc --version
Version 3.9.3

Unbelievable 🤦‍♂

This was probably the longest possible route to get here, but heyyyy we made it! 😅

At the end of the day, there are three ways to install typescript globally that make the tsc command available from anywhere:

1. brew install typescript
2. npm i typescript -g
3. yarn global add typescript

Also interesting is npm and yarn both have commands to find where each puts global things.

For npm:

➜  nightwatch-ts git:(master) ✗ npm config get prefix
/Users/joel/npm

For yarn:

➜  nightwatch-ts git:(master) ✗ yarn global bin
/Users/joel/npm/bin

Hmmmmmmm… 🤔 INTERESTING!

What’s in there? 👀

If I cd into that ~/npm folder, and list the contents with ls I only see four folders:

• bin
• etc
• lib
• share

And then if I list the contents of ~/npm/bin I can see all the globally-installed commands like jest and create-react-app, one of which is tsc.

So it looks like both npm and yarn install things in 👏 the 👏 same 👏 place 👏 (when installing globally).

🐰 🕳

Anyway, putting this here in case anyone else runs into this and wants to cut to the chase 🍻

Links

• https://classic.yarnpkg.com/en/docs/cli/global/
• https://docs.npmjs.com/misc/config#prefix
• https://stackoverflow.com/questions/39404922/tsc-command-not-found-in-compiling-typescript