How to use Angular and ESLint in a new project

Quick Start with Angular and ESLint

In order to create a brand new Angular CLI workspace which uses ESLint instead of TSLint and Codelyzer, simply run the following commands:

# Install the Angular CLI and @angular-eslint/schematics globally however you want (e.g. npm, yarn, volta etc)

npm i -g @angular/cli @angular-devkit/{core,schematics} @angular-eslint/schematics

# Create a new Angular CLI workspace using the @angular-eslint/schematics collection (instead of the default)

ng new --collection=@angular-eslint/schematics

After you follow the interactive prompts the Angular CLI gives you, you have now created a TSLint and Codelyzer free workspace with ng lint all set up and ready to lint your source code and HTML templates using ESLint! 🚀

Read on to find out more about how and why they work.

read more

TypeScript: Null and Undefined Types

Trying to perform operations on undefined or null values is one of the most common causes of runtime errors in JavaScript code.

Sometimes the variables in our programs intentionally “hold” undefined or null - JavaScript is a very flexible language, and we can have legitimate reasons to want to use these values to express things in our code. Other times, we may inadvertently be interacting with the values undefined and null because we did not account for all the possible code paths, or we did not understand a third party or platform API well enough.

How can we protect ourselves, and therefore also our users, from undefined and null values appearing where we don’t want them?

TypeScript to the rescue!

read more

TypeScript: Classes vs Interfaces

We have had classes available to us natively in JavaScript for a little while now, and they have been around in TypeScript for even longer. In TypeScript, however, we also have the concept of an interface, and the question often arises when adding type annotations to certain parts of our code:

“Should I be using an interface or a class for this type annotation?”

This article is going to focus on how interfaces compare to classes in TypeScript, so that we can answer that very question!

read more

TypeScript: The Missing Introduction

The purpose of this article is to offer an introduction to how we can think about TypeScript, and its role in supercharging our JavaScript development.

We will also try and come up with our own reasonable definitions for a lot of the buzzwords surrounding types and compilation.

There is huge amount of great stuff in the TypeScript project that we won’t be able to cover within the scope of this blog post. Please read the official documentation to learn more.

Background

TypeScript is an amazingly powerful tool, and really quite easy to get started with.

It can, however, come across as more complex than it is, because it may simultaneously be introducing us to a whole host of technical concepts related to our JavaScript programs that we may not have considered before.

Whenever we stray into the area of talking about types, compilers, etc. things can get really confusing, really fast.

This article is designed as a “what you need to know” guide for a lot of these potentially confusing concepts, so that by the time you dive into the “Getting Started” style tutorials, you are feeling confident with the various themes and terminology that surround the topic.

read more

Hello, World!

In true software development tradition, I’d like to say “Hello, World!” and welcome to my blog.

I would like this post to not only serve as a very brief introduction to me, and what I hope to achieve with my writing, but also to act as a milestone to look back on in years to come.

read more