FizzBuzz in TypeScript 3.0

Josh Sherman
4 min read
Software Development TypeScript Career

FizzBuzz, the engineering smoke test that quickly reveals if somebody is drastically under qualified in their development abilities.

Even if you’re unfamiliar with the exercise, most are able to make short work of it. It only leverages a small handful of programming concepts that even the most novice developer should be comfortable with.

That said, I’ve never actually been given this particular coding challenge when applying for jobs. Most of the time I’ve been given small real world tasks that are somewhat indicative of the work I’d be doing on a daily basis.

And then sometimes I’ve been asked to build a linked list in Ruby…

…for a PHP role.

With that, I do like the challenge because it’s simple enough for me to implement in different languages that I am playing with and learning.

Most recently, I have been dabbling with TypeScript thought it would be fun to write a FizzBuzz in it as best as I can with my very limited experience with the syntax.

Also, TypeScript 3.0 was dropped recently, another good reason to mess around with it as my experience thus far had been with TypeScript 2.9.

Not the first time I’ve hopped on a language just before a major version was released. Looking at you PHP 3.0.

Another contributing factor to wanting to do this coding challenge in TypeScript is that a buddy of mine that’s recently started using it said that FizzBuzz would take hours.

I know he was exaggerating, but still, CHALLENGE ACCEPTED!

Before I get into the actual code, it’s probably worth mentioning what the code should be doing for a FizzBuzz. A successfully written FizzBuzz should do the following:

Depending on who’s issuing the challenge, they may expect the values to be comma separated. For the sake of this post, I’m just dumping the values out with console.log() each being on a new line.

Also, before we dig into the code, be sure you have typescript installed so you can actually run this:

# via npm
npm install typescript -g
# via yarn
yarn global add typescript

You could also install typescript to your project instead of globally (which is how I prefer to do things).

With typescript installed you will have access to tsc which we will use to compile our TypeScript file into good ol’ JavaScript.

All right, let’s jump into the FizzBuzz code:

fizzbuzz.ts

let divBy3: boolean;
let divBy5: boolean;
let i: number;
let output: string;

for (i = 1; i <= 100; i += 1) {
  output = '';
  divBy3 = !(i % 3);
  divBy5 = !(i % 5);

  if (divBy3) output += 'Fizz';
  if (divBy5) output += 'Buzz';

  // Converts to a string because output is defined as such
  if (!(divBy3 || divBy5)) output = i.toString();

  console.log(output);
}

Not much too it, just a simple loop, a few sanity checks and a small bit of output. The key thing to note is that the variable definitions all have their type declared.

Because this isn’t valid JavaScript, running node fizzbuzz.ts is going to crap out and complain about the unexpected colon on the very first line.

Never fear! We can use tsc to compile the TypeScript to JavaScript:

tsc fizzbuzz.ts

Then run the compiled JavaScript file with node:

node fizzbuzz.js

Which will dump out our results which should look something like this:

1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
...

Took me longer to write this post than it did the actual FizzBuzz code. Definitely didn’t take hours, but I’m sure I could have went significantly deeper in regard to utilizing classes and interfaces versus just the code logic.

To help matters a bit, partly because I’m new to TypeScript and partly because it’s good to have something automated checking your code, I used tslint.

Linting is always a good thing to do to help keep your code consistent with your coding style guide but also becomes a learning tool when working with a language or syntax you may not be familiar with.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.

Currently Reading

Parasie Eve

Previous Reads

Buy Me a Coffee Become a Sponsor

Related Articles