Day02: Hello TypeScript! Setting Up the Environment + A Quick Test

Installing Node.js and Checking

Before installing the TypeScript execution environment, let's check if Node.js is installed. If not, you can download it from the official Node.js website. It is recommended to use the LTS version on the left, as it is relatively stable. If you want to manage different versions of Node and npm, you can also use nvm for installation.

When you install Node.js, npm will be installed automatically. After successful installation, you can enter the following commands to check the version and see if it was installed successfully.

node -v
npm -v

If both commands return a version number (e.g., v14.1), it means the installation was successful.

Installing TypeScript

To install TypeScript globally, allowing you to run the tsc command from anywhere, use the following command:

npm install -g typescript

Again, check if the installation was successful:

tsc -v

If a version number appears (e.g., Version 4.3.5), it means the installation was successful.

Additionally, TypeScript can be installed using npm (and yarn), and there is also a Visual Studio Extension available. Refer to the official website for more information.

Creating Your First TypeScript File

Create a file named hello.ts in your folder. TypeScript files end with .ts, and if you are writing TypeScript for React, they end with .tsx.

Next, in hello.ts, let's try using TypeScript's type annotation feature to specify the parameter type. Add : string to the person parameter to define that the data type of person must be a string:

function sayHello(person: string) {
  return "Hello, " + person;
}

let user = "iris";
console.log(sayHello(user));

Then, run the following command in the terminal:

tsc hello.ts

You will see the compiled hello.js:

function sayHello(person) {
  return 'Hello, ' + person
}
var user = 'iris'
console.log(sayHello(user))

Now you've created your first TypeScript file!

To test it, run the following command in the terminal:

node hello.js

You should see Hello, iris printed in the terminal, indicating success!

TypeScript Will Tell You When You Make a Mistake, JavaScript Won't

Next, let's intentionally input a different type and see what happens. We'll try changing the parameter passed to sayHello to an array type [0, 1, 2]:

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));

What will happen? TypeScript will report an error, telling you that this parameter only accepts the string type and does not accept a number array.

Let's experiment further by running the following command in the terminal:

tsc hello.ts

Even if the terminal reports an error, we can see that TypeScript still compiles and generates hello.js. Now let's run:

node hello.js

It prints Hello, 1,2,3, which is not what we expected. TypeScript informs us during development that the type is not string, making it easier for us to debug, while JavaScript does not.

⚠ TypeScript only performs static checks. If it finds an error, it will report it during compilation. Note that TypeScript will still generate a JavaScript file even if there are errors. To prevent the generation of JavaScript files when errors occur, you can configure noEmitOnError in tsconfig.json (which we will introduce later).

In this article, we explored the benefits of using TypeScript. However, did you notice that every time we write, we have to manually run tsc xx.ts and node xx.js? It's super tedious! So, I found a great method online, and I'll share it in the next article!

References

https://www.typescripttutorial.net/typescript-tutorial/nodejs-typescript/