A Fast & Dirty TypeScript Project: 
Tags: typescript, axios
Published: 2019-12-04 13:44:07

---
title: A Fast & Dirty TypeScript Project: 
published: true
description: A quick project set up
tags: TypeScript, Axios
cover_image: https://images.unsplash.com/photo-1502101872923-d48509bff386?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80
---
# 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](https://glitch.com/), [Stackblitz](https://stackblitz.com/), [Codepen](https://codepen.io/), 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](https://flaviocopes.com/)!)
```
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.