DEV Community

loading...
Cover image for A Fast & Dirty TypeScript Project:

A Fast & Dirty TypeScript Project:

skillitzimberg profile image Scott Bergler ・2 min read

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.

Discussion (0)

pic
Editor guide