{"id":268,"date":"2024-06-11T17:50:00","date_gmt":"2024-06-11T17:50:00","guid":{"rendered":"https:\/\/andrearethy.com\/blog\/?p=268"},"modified":"2024-06-20T09:59:35","modified_gmt":"2024-06-20T09:59:35","slug":"how-to-set-up-your-first-typescript-project-with-tdd-and-ci-macos","status":"publish","type":"post","link":"https:\/\/andrearethy.com\/blog\/how-to-set-up-your-first-typescript-project-with-tdd-and-ci-macos\/","title":{"rendered":"How to set up your first TypeScript project with TDD and CI (MacOS)"},"content":{"rendered":"\n

Introduction<\/h3>\n\n\n\n

In last week’s article we looked into how to create a basic portfolio website with HTML, CSS and JavaScript<\/a>. Unsurprisingly this portfolio website was a front-end project, with no real backend. Today we will dive into the beginning of backend development with TypeScript and Node.<\/p>\n\n\n\n

TypeScript, a superset of JavaScript, provides static type checking that helps catching errors early in the development process helping you to write clean, maintainable code. When combined with Test-Driven Development (TDD) and Continuous Integration (CI), you can ensure that your code is reliable, scalable, and easier to refactor.<\/p>\n\n\n\n

This guide will walk you through setting up your first TypeScript project using TDD with Jest and CI with GitHub Actions on a MacOS system with Apple Silicon. We’ll cover everything from initializing your project to running your tests in a CI pipeline.<\/p>\n\n\n\n

If you run into EACCES permission errors I recommend reading this article about how to solve it<\/a>.<\/p>\n\n\n\n

Table of Contents<\/h3>\n\n\n\n
    \n
  1. Setting Up Your Development Environment<\/a><\/li>\n\n\n\n
  2. Initializing Your TypeScript Project<\/a><\/li>\n\n\n\n
  3. Setting Up TDD with Jest<\/a><\/li>\n\n\n\n
  4. Writing Your First Test<\/a><\/li>\n\n\n\n
  5. Setting Up Continuous Integration with GitHub Actions<\/a><\/li>\n\n\n\n
  6. Running Your CI Pipeline<\/a><\/li>\n\n\n\n
  7. Conclusion<\/a><\/li>\n\n\n\n
  8. Bonus: My Sample Project Setup<\/a><\/li>\n<\/ol>\n\n\n\n

    Setting Up Your Development Environment<\/h3>\n\n\n\n

    Before we start, make sure you have the following tools installed on your MacOS system:<\/p>\n\n\n\n