DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for A Fast & Dirty TypeScript Project:
Scott Bergler
Scott Bergler

Posted on

A Fast & Dirty TypeScript Project:

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.

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: