Check out a free preview of the full Deno First Look course

The "Your First Program" Lesson is part of the full, Deno First Look course featured in this preview video. Here's what you'd learn in this lesson:

Burke live codes a "Hello World" project using TypeScript and JavaScript and walks through the file structure that Deno pulls from the local machine. Deno will execute TypeScript and JavaScript, though most examples involving Deno are written in TypeScript.

Preview
Close

Transcript from the "Your First Program" Lesson

[00:00:00]
>> Great, so we've got Deno installed, and you have the extension for VS Code, and now we're ready to write our first program in Deno, so let's do that. You can switch over to the year first program branch. I'm just gonna stay on the one that I'm on because again, it just mostly just resets the project.

[00:00:21]
But let's write I mean, I know it's old and tired but let's do it anyway, console log you knew it was coming, console log hello world. There we go, all right, so this is our first Dino program. Now one of the things that you'll note here, is that the console line is underlined with a squiggly.

[00:00:50]
And you'll there's an error that says, this cannot be compiled under isolated modules, because bla, okay, this is a Dino thing. So Dino has got this TypeScript configuration under the covers that it's using, and it's enforcing this In this isolated modules, all right, what's it saying there? What it's saying is that your code has to be a module, in order for you to execute it, you can still run this, with this little squiggly arrow, it will still run.

[00:01:19]
So, to do that, we're just gonna Dino run app.ts right, and then you can see it says checking file, right? And then hello world, by the way, if you do wanna get rid of this squiggly, you can just do this. If you can just you can just do export, and then brackets like this, and then that that makes Visual Studio Code think that it's module and, and you're good to go.

[00:01:44]
If that squiggly line bothers you, let's talk about what happened here when we did this. So we ran it, it checked the file, and then it printed it out, notice that if we run this again, it does the check again. Because made a change, but if we do it a third time, there's no check, okay, so what is happening?

[00:02:06]
I wanna dive into, and take a look at what it's doing, when it's checking these files. The checking process in Dino, what it's doing is because TypeScript is a first class citizen in Dino. It doesn't mean that it's a first class citizen in V8, where the JavaScript is executed.

[00:02:27]
It still has to be JavaScript before V8 can run it, which means that Dino has to convert the file to JavaScript, before it can be executed. And so when it does this, it creates a build of your project on your system, so actually. You know earlier on we did the build ourselves, where we transpile the files, we put them in a dist directory, Dino is actually doing that, still doing that.

[00:02:52]
It's just it's doing it for you, and hides it from you, but we wanna take a look at what that looks like. And, so in order to do that we need to go to the Dino cash to take a look at what's in the Dino cash. You can get info, about your system by running Dino info, and that will tell you where the caches for Dino on your system here.

[00:03:14]
So for me, that's this home birth calling cache Dino Gen, is where the TypeScript compiler caches I've created a shortcut cut for this just Dino cash. On my own machine, which just takes me directly there, so if we look inside this directory, there's a depth and agenne directory, okay?

[00:03:34]
Now we don't have any dependencies, those will go into depth folders we'll look at later, but let's move into this Gen directory here. So I'm gonna go into the gen, and then there's a file, so let's move into the file, and then inside of that, sorry, files a command.

[00:03:48]
So I have to CD into hold on, let's see here, sorry, let's go into the gen, let's CD into file. And then there's a now what it's doing is it's mimicking my home, start a folder structure on my machine. Okay, so where I am is I'm in home, right, if you can look in that then my account, if we look in that then Dev.

[00:04:10]
If we look inside of that, then we'll see another folder that has my name on it, this is the same folder structure, that I have on my own machine. So Dino is just, replicating mind machines folder structure inside of this file folder. And if we look inside of this boom, there's my Dino exercises project, so let's move into that.

[00:04:30]
Oops, one too many, S's and then inside of that, and now we're starting to see some interesting stuff. So, if we look at our project here, where's my mouse, just to refresh ourselves on what it actually looks like we have an app.ts. So let's move into the exercise folder, and you can see, in fact let's just open this up, and take a look at it.

[00:04:56]
What we have here, inside of this gen folder is a couple of different things, so we have this app.ts.js, and this file contains look, our code, right? There's a couple of other files in here. One of them is this build info file, which contains a lot of different information about metadata, about my project here.

[00:05:19]
And if we scroll down to the bottom, you'll see there's an actual Ts config that's actually like embedded in the bottom of this file. And then over here, this file here, there's a hash, and what this is doing is Dino's using all of this to identify files on your system, and link them together.

[00:05:39]
But just know, what I'm trying to show you here, is that when you actually run something in Dino, a TypeScript, this is what happens under the covers. And we'll come back and take a look at this later. But this is where Dino is putting all of these files, and working all of its magic is inside of this gene folder.

[00:05:57]
All right, so that's your first project, you should feel pretty good about that, well, let's run some TypeScript here, which is a little bit more fun. So let's do constant message, which is that we did this before, it's a string and we'll say it's a type, a hello world.

[00:06:21]
Okay, set the value there, and then instead of logging out the string, let's just log out the message. All right, I'm still in the wrong, terminal directory, let's move back there we go, so Dino run apt at Ts, there we go. All right so it checks it, just like we did before, and then it gives us hello world.

[00:06:48]
You can skip the checking, so you can do Dino run, no check app.ts and it will just execute the file, it won't actually check it. Right, so like if we were to do this, this is not valid TypeScript. So if we run this like, we did Dino run app.ts, it's gonna the TypeScript compiler is gonna fail.

[00:07:13]
Right here, but if we do the no check like this, it's just gonna try to execute it and then it's gonna fail. So, just know that you can bypass the TypeScript compiler which you need you may need to do from time to time with the no check flag.

[00:07:28]
Executing JavaScripts, you can do that. Let's just come over here, and add a plain app.js file where we can just do the same thing, just console.log Hello World. And Deno is fine with this, it doesn't care if you use JavaScript or TypeScript, it's fine with either one. Of course, there's not a check step, because there's no translation, that needs to happen.

[00:07:58]
So, if you prefer writing JavaScript, you're more than welcome to do that. However, you will find that all of Dino's examples are written in TypeScript, and virtually all of the libraries. The other libraries are written in TypeScript, it's just a TypeScript world out there, when you get into Dino

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now