// good
const valid = parseFloat('3.141');
console.log(valid); // 3.141

// bad
const useless = parseFloat(3.141);
console.log(useless); // 3.141

// dangerous
const dangerous = [] + [];
console.log(dangerous); // ""

Setup TypeScript

npm init -y
npm i typescript
npx tsc --init --checkJs --noEmit --rootDir src

Run TypeScript

npx tsc

package.json

{
  "scripts": {
    "build": "tsc"
  }
}

npm run build

TypeScript Compile Time Errors

// good
const valid = parseFloat('3.141');
console.log(valid); // 3.141

// bad
const useless = parseFloat(3.141); // ❌ TS Error: string expected
console.log(useless); // 3.141

// dangerous
const dangerous = [] + []; // ❌ TS Error: operation not supported
console.log(dangerous); // ""

Enjoy free content straight from your inbox 💌

Transcript

00:00

Learning JavaScript can be hard, but one thing that makes it extra hard as a beginner is that while you are writing JavaScript for the first time, it's easy to make silly mistakes, but you get no helpful errors from the JavaScript runtime. Consider the very simple example of the built-in JavaScript pass float function. This function takes an input string and if that number can be passed into a floating point, that is the number value that it returns. And of course, it works perfectly fine with this particular string. Now this function is really designed to be used with strings and you shouldn't be allowed to pass in a number. However,

00:33

if we do make the mistake of passing in a number, it actually works fine without any errors. Now, you might think that this is perfectly fine and I don't necessarily disagree with you except for the fact that this is a completely useless function call because there is no need for pass float in this particular case, and I'd rather get an error and not have just code lying around for funs within my code base. But there is a thing that is worse than useless code and that is invalid code. Now since we haven't looked at arrays yet, here is a very simple example where we have an array that contains two numbers.

01:08

Arrays are sort of the lists of JavaScript, and you might think that if you want to join to arrays, you could just use the plus operator. So if you have an array containing 24 and an array containing 48, if you combine, then hopefully you should get an array that contains 24 and 48. However, if you were to run this code instead of getting a valid result or an error, we get this strange stringed concatenation of the values of the different arrays. This is where adding TypeScript to your project, even if purely for the purposes of linting, can greatly improve your developer experience.

01:41

It's like a professional developer looking through your code and pointing out silly mistakes. TypeScript is available from N P M and to get started, we are going to first have to initialize our project for N P M by running N P M in it and passing in the flag minus y to just accept all of the defaults. This creates a package to Jason file. The next step is to install TypeScript from N P M, which we can do quite easily by running N P M I TypeScript. This brings down TypeScript from N P M and dumps it into the node module folder for local use.

02:14

The TypeScript N P M package comes with a binary called T SS C, which stands for TypeScript compiler. We can use it to initialize a new package rotation, find working N P X T S C, passing in the command line flags minus minus in it to create a new TSS config minus minus check js, which is an option to enable type checking for JavaScript files minus minus, no emit because we don't need TypeScript to cross pile our code. We are just using it for type checking and then minus minus root D i r, which is a good option to make sure that all of our source code is well contained within the S R C folder. Once we execute this command,

02:51

a new TSS config file is created for us, where TSS config of course, stands for type strip configuration and it is automatically picked up By by VS code, and it has started to validate our JS files already. We can see the two errors that are showing up, which are obviously silly mistakes. Either they're useless or downright dangerous. In addition to visuals studio, your code TypeScript is a core part of other modern JavaScript IDs as well. But even without an I D E, we can use transcript to validate our code quite easily from the command line to execute the compiler. For checking purposes,

03:24

we actually just execute N P X T S C and you can see the same errors that we saw in the problems panel. Now of course, if you are going to be running this command again and again, it's a good idea to jump into our package, do json, add a new nice named script target, for example, build, and then use that to invoke D ss e. This way we can use a feature of N P M called N P M run scripts to execute D S E. So for this build script, we would run N P M Run Build organizing your scripts within package do. JSON is a good practice to follow to help others discover how you expect them to use your project. TypeScript also allows you to use TSS files,

04:01

which opens up the JavaScript language to additional syntax, which can be used to validate our source code even further. But for this course on pure JavaScript, we will leave TypeScript running in the background as a part of our I D E seamlessly. Doing is powerful and intelligent printing. I also have a course on TypeScript, which you can watch after you've completed this one. As always, thank you for joining me and I will see you in the next one.