Learning TypeScript ep.1

TypeScript is an intuitive way to factor your code. When writing vanilla JavaScript won't always give you a hint where your syntax is bad, using TypeScript will highlight errors and give you more in-depth clues as to where your bugs will be. This system is useful to catch things early in development versus finding out during your production phase.

I'll be writing in VSCode using npm version 6, node.js version 10, and Ubuntu/WSL on windows 10. To begin, make sure you have NPM and node.js installed.

Check Versions

npm -v
//>6.14.4

node -v
//>v10.19.0

Install typescript globally

npm i -g typescript

You may have to set permissions if you get an error within your /usr/ directory.

whoami
//>tyler

// For linux this worked for me
sudo chown -R tyler: /usr/local/lib/node_modules

Create your practice directory

//create folder
mkdir ts-practice

cd /ts-practice/

touch index.ts
touch tsconfig.json

// Create your json file to allow dependencies in node_modules
npm init

When you run npm init you'll have to run through the settings so that a package.json is generated (most of the important stuff will have default values).

How it works

For these examples we'll be writing our code in the index.ts file. We will instruct the compiler after we've written what we want to compile. Lets start with my silly goose function, if we put this into our ts file and run tsc index.ts, which will start the compiler.

//index.ts
let matt = "Silly Goose"

function isGuyCool(person) {
    if (person == "Silly Goose") {
        console.log("Silly Goose detected!!")
    } else {
        console.log("Person is not silly...")
    }
}

What happened? For one, we created an index.js file with our "compiled" code output - but the code remained exactly the same? This is because any valid JavaScript can be written, TypeScript wont change your vanilla code necessarily. By default, TypeScript compiles to es3, which doesn't allow us to use things like async functions. Go ahead and throw this into your index.ts file and compile it with tsc index.ts in the terminal...

//index.ts
async function foo(){
    return "bar"
}

What shows up in your index.js? A whole load of stuff! This output isn't what we want. This is where the tsconfig.json comes in handy. We can configure our compiler to do a few things..

//tsconfig.json
{
    "compilerOptions" : {
        // The target is which "Flavor" of JS were using in the compiler.
        // esnext will allow us to compile async functions
        "target": "esnext",
        // watch will automatically compile our code when we save index.ts, removing the need to use tsc index.ts
        "watch": true,
        // Lib automatically includes typing functionality for certain environments like the DOM, es2017, ect...
        // Useful for object oriented JS code (classes and such) without compilation errors.
        "lib": ["dom", "es2017"]
    }
}

Next run tsc in terminal to start compiler watch service. Sweet! Now we can just write our code and save, our async function should output normal now. Now lets say we want to use DOM classes such as the URL class, with our TypeScript configured the way we have it, we can get VSCode's nifty autocomplete and intelisense features to work with our typescript.

// index.ts
const url = new URL()

If you hover over your new line of code, the tooltip will give you more relevant information about how to fix it before moving on. "An argument for "url" was not provided.". You'll also note that the code is underlined in red.

const url = new URL("www.google.com")

There, that's better. Another nifty tool is our ability to right click the new class, and go to "Type Definition" to see more information about the URL class.

Conclusion

TypeScript is a very neat tool, and because you can pick and chose when to use TypeScript features, it integrates seemlessly with your vanilla JavaScript. Its learn-as-you-go methodology makes it very simple to learn. This is all I can offer for now as I'm still trying to learn TypeScript myself, but I'll add more content on this topic in the future. Thanks for reading, now you're set up to play with TypeScript!