Just by changing your files' extension from .js to .ts, most editors will offer better support for autocompletion, IntelliSense, more features, and safety. TypeScript won't even compile if it detects an error that it knows about, syntactic errors being the most common.
Go ahead and create a new folder in your working directory. Using your favorite terminal. "cd" into that directory and run npm init. Answer all the questions if you want or just press Enter on your keyboard to accept the defaults. Once done, a package.json file will be created. Now it's time to install TypeScript. Run "npm install typescript" and wait for the installation to complete. The next step is to add a new script to your scripts section or just delete the existing one. Your package.json should look something like this:
Now if you run
npm run tsc, you should see something like the image below:
run tsc, at the top we can see a small section with some examples. You'll notice that you can run the tsc command with the name of the
.ts file you want to compile. Let's go ahead and
hello.ts. After less than a second it displays:
[email protected] tsc tsc
Now if you look closely in your project you can see that a new file has been created. It's called
hello.js. When we open the file we can see that it displays
console.log("Hello World!"). And running that file using
hello.js, will display "Hello World!". No big deal! Now let's do something more interesting. We'll create a function that adds two numbers together, and we'll specify the types of the parameters and the return value of it. Create a new file called
add.ts and add this code into it:
Depending on the IDE that you are using, I'm using VS Code, you will see the parameters underlined with dots. If you hover over any of them you will see a popup saying:
What this means is that TypeScript will default to the
any type in instances when it can't figure out on its own what the type of variable or parameter is. TypeScript is smart enough to figure out the types for primitive types such as string, number, function, and object. But it will start guessing again when your data structure starts to have nested values. That's because it can't know by itself what data you will throw at it upfront unless you tell it. And when you tell it, you will help it to help you back. With that said, if you were to give default values to a and b, then TypeScript would stop complaining. For example:
That's really useless but I hope you get the point.
That's a lot more theory, but let's run our code as-is.
add.js in the same directory, and its content is as so:
Still no big deal! Running this code with
add.js, will as expected display 3. So you may be wondering, how do I provide the types myself? Well to add types you need to add a colon
: after a variable, parameter, or function name and specify the types. The TypeScript types can be any of these:
Today we'll use some of the primitive ones in a few examples. Let's type
b as numbers so TypeScript can know what to expect like so:
Once we do that, we'll be good to go. But we can still return any other type from that function.
And TypeScript won't even complain. More often than not you would want to return the sum of the two numbers instead of a string, right? Then we can get TypeScript to help us here as well. We can type the function:
If we try to return another type of value other than a number, TypeScript will now complain saying "Type
string is not assignable to type
number. It knows that it has to return a number and not a string, so it protects us from doing something unexpected. We can just return the sum of a and b as usual and it will work. Let's try to compile this function and see what we get. Run npm run tsc add.ts and open the compiled
add.js file. What do you see? You should see something like this:
Let's try to mess with the parameters' value types and see what we get. When calling add, let's feed it with two strings instead of numbers. What did you see? Yes, TypeScript is complaining again. But this time, where we call the function on the first parameter saying:
"Argument of type 'string' is not assignable to parameter of type 'number'.
If you try to compile this code as-is it will fail. Let's try a few more examples. Create a new file called
examples.ts and paste the following code in it:
Play with it and see what you get.
Okay, this is all good, but how do we configure it? To configure it, you need to use a
tsconfig.json file in the root of your directory. It is a JSON file that TypeScript will read and configure itself depending on the values of that file. For example, if you use the arrow function instead of the function keyword to declare a function, TypeScript will by default convert it to the function keyword version, but using
tsconfig.json you can specify the target to be es6 instead and TypeScript will leave it as-is. Of course, you have to make sure that the platform(s) that will run your code has (have) support for that version. Head over to the docs for more info on how to work with