A Fast & Dirty TypeScript Project

Between work and my own personal development projects I’m usually switching back and forth between many languages, frameworks, tools, and code bases. Sometimes I forget how to do what seems like should be the simplest, most basic things. I decided to write this short article because I was frustrated with myself and the situation I found myself in. I thought writing this down might help me remember that I know how to do this and maybe help other beginners who have similar needs/problems.

At work we ran into a problem and need to pivot to incorporate a challenging (for me at least) new API. I don’t want to go through all the hoops to set that up in the context of the app. I just want to play with the API in a setting that I have complete control over (not Glitch, Stackblitz, Codepen, et al — I’m sure they are perfectly viable, but for some reason they never work for me and I’d rather know all the cogs I have in place and why they’re there, plus it’s good for me to keep practicing building from the ground up).

I just need a small console app to check out the new API. Our project uses TypeScript for Firebase cloud functions and Axios for working with third party APIs.

Here are the steps I took:
1) Create a new project directory in my development directory. In my case ‘axios_tests’. mkdir axios_tests
2) cd axios_tests
3) npm init to create the package.json file
4) npm install typescript to add TypeScript to the package.json dependencies. Technically this should have been npm install typescript --save-dev to save it to the dev-dependencies but this ‘project’ is never going to be in production — fast & dirty.
5) npm install axios and do the same for Axios
6) tsc --init to create a standard tsconfig.json file
7) Because I’m going to be using Promises and console.log() I found out that I needed to add the es2015 & dom to the tsconfig.json compilerOptions. Other than that addition these are the default settings.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
            "es2015",
            "dom"
    ],
    "strict": true,
    "esModuleInterop": true,
}

8) create an index.ts file
9) To make sure Axios is working I used this in index.ts (Thank you, Flavio Copes!)

import * as axios from "axios";
(async () => {
  console.log(await axios.default({
    url: 'https://dog.ceo/api/breeds/list/all'
  }))
})();

10) tsc index.ts to compile the TypeScript to JavaScript
11) node index.js to run the JavaScript file

And I got back a big list of dogs in the console . . .

Now I’m set up to start building out just the code I need to work with the new API without first having to figure out how to wire everything up in the larger project which will include writing/refactoring and deploying cloud functions, possibly adding a new Firebase collection, and likely some UI changes.

I hope this helps someone other than me. Please let me know if you have questions, better ideas for doing this sort of thing, or see problems.