TypeScript Fundamentals TypeScript Fundamentals

Challenge 1: Color Functions

Check out a free preview of the full TypeScript Fundamentals course:
The "Challenge 1: Color Functions" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students convert color values from different color systems.

Get Unlimited Access Now

Transcript from the "Challenge 1: Color Functions" Lesson

>> Mike North: Let's look at our first exercise here, we're just gonna do a little warmup. This is an exercise I give to just JavaScript programmers a lot. And we're gonna do it with these primitive type annotations, and we might get a chance to use a shape as a type annotation as well.

[00:00:21] So, if you start up your project, if you check your code out, install al of those dependencies, follow the instructions in the read me. You'll see that in the exercises folder there is a sub folder called color functions. And the sub folders have exercises, right, those are each individual projects that we're gonna do throughout the day.

[00:00:43] And you'll see that in this color-utils.ts file we're gonna need to create two functions, rgbToHex and hexToRgb. rgbToHex should take three 8 bit color channels, those are numbers having a value of between 0 and 255, corresponding to red, green and blue. And it should return the corresponding hex string.

[00:01:06] So if you have used any CSS colors before, this is the kind of hex string we're looking for. hexToRgb should basically do the conversion in the other direction it takes as an argument either a 3 or 6-digit hex string. And it returns an object with the properties R, G and B, corresponding to the red, green, and blue color channels.

[00:01:28] Both of these functions should be named exports from the color-utils.ts module. If you have a question about what a named export means, raise your hand, I'm happy to explain. If you're watching this video course, this is probably one of the things you should look at some of like Kyle Simpson's JavaScript videos for.

[00:01:51] But we wanna be able to bring these functions individually by name into other files, named exports are what we use in TypeScript, this is the advised best practice. I'm gonna give you some hints because the point here is to work with TypeScript and not worry about the actual color or conversion stuff.

[00:02:10] So converting a string to an integer, of course you can use parseInt for that, converting an integer into its hexadecimal representation. You will call on that number, you'll call two string and pass it an argument of 16. So you're saying give me the string representation of this number in base 16, right?

[00:02:33] So that would give you for 124 it will give you 7c. And then the third example here is in the other direction it take 7c and give me the decimal version of this. So like the 124 in this case, that's sort of from 0 to 255, 7c, that would be from 00 through FF, two different ways of representing that color.

[00:02:57] You should be able to run npm test color-functions, and you should see a bunch of failing tests waiting for you. Your job is to fill in those functions that are missing and make those failing tests pass. And I'm just gonna give you since this is the first exercise I wanna give you a little kick off here.

[00:03:17] So we'll go into our exercises folder, we'll go into color functions, source, color utils. And you're gonna start with something that looks like this.
>> Mike North: And your job is to fill in those functions using type annotations to make sure that only the right stuff can be passed. The way we'd run the test is mpm test color functions.

>> Mike North: You should see,
>> Mike North: A bunch of failing tests. So let's take 20 minutes, make sure we're all set up, and that the project's working for everyone, and make sure you can get all these test to pass. Whenever we're talking about passing tests, you also wanna make sure, particularly if you're using Visual Studio code, that you see no problems down here.

[00:04:16] So when TypeScript complains about, like you're passing the wrong type into this function and so on, that's separate from a test failure but we also wanna make sure that part of our goal is to make sure the type system is not complaining to us about anything. So you can check this little indication down here, this area for problems and there's also a problems tab here, or if I were to say, go tocopy.ts.

[00:04:44] And replace what I had in there with something like this, let x = 15;
>> Mike North: You can see it's saying type a5 is not assignable to number. So this is why I suggest use Visual Studio Code or something that has rich TypeScript support I don't know of anything better than Visual Studio code for developing in TypeScript today.

[00:05:06] So let's take 20 minutes and we'll see you then for the solution. I'm gonna show you a way that we can run little snippets of TypeScript code and see what the output will be cuz this is a new programming language. And we're using to being able to go into a browser, or into Node or something, and just write a couple of lines of code and see what the output might be.

[00:05:28] So there are two ways of doing that, the first way I'm gonna show you, I'm gonna go to TypeScript,
>> Mike North: typescriptlang.org, this is the main TypeScript webpage. And what they've got here is a playground. And what you can do is on the left you can write some TypeScript, and on the right, it'll show you what the resultant JavaScript would be.

[00:05:53] And if you open up your console, you can actually see the output of that TypeScript. All right, so if we go to console clear that, if we go like, let x = hello.
>> Mike North: Console log x and we click run, well.
>> Mike North: It's gonna pop it up in a new window, but if we inspect there, we can see there's our hello, so that's one way to do it.

[00:06:25] This is the way to do it if you're on an iPad or something, or if you're sharing with someone that doesn't have stuff installed. I'll show you a great way to do it inside Visual Studio Code, so I have an extension here called Code Runner. This is great for just running little bits of code like you are basically going to say run this file.

[00:06:49] So if you we were working in color functions, we can put something at the bottom that were gonna just test the things out and just run this file. So I've got cold runner there and I'm going to see that tab open.
>> Mike North: I actually keep a little scratch file just in a root of my project and I get ignore it, I call mine two copy.

[00:07:12] You can call yours the same actually cuz it's in the get ignore two copy anything it's gonna be ignore, it won't check it in. But I could do something like this like let x = 15 console log x and what that extension is added is this little play button on the top right of my screen.

[00:07:35] I can hit that and we can see, whoop, I got an error, what's going on? There it goes, I must have like saved it half way through or something, here's our 15 that was just logged out. So you can do this not just with this one file obviously, but we could have gone to that exercise we were using, we were writing with the.

[00:07:59] You could have used the file that you were working on and basically run your own set of tests or attempted to use your functions and seen the output directly. And then this gives you a way to not have to just look at the test pass-fail situation, but you can kind of see what's going on in the middle.