FizzBuzz in TypeScript 3.0

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:

  • Loop through numbers 1 to 100 (generally speaking on the upper limit)
  • Print the word “Fizz” if the number is divisible by 3
  • Print the word “Buzz” if the number is divisible by 5
  • Subsequently print “FizzBuzz” if the number is divisible by 3 and 5
  • Otherwise, just print out the current number

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.

Josh Sherman - The Man, The Myth, The Avatar

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.


If you found this article helpful, please consider buying me a coffee.