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)