Creating a TypeScript project_Vue.js 3 Cookbook-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

Creating a TypeScript project

TypeScript is a typed superset of JavaScript that, when compiled, gives us plain JavaScript code. It seems like a new language, but in the end, it's still JavaScript.

What is the advantage of using TypeScript? The main advantage is the typed syntax, which helps with static checking and code refactoring. You can still use all the JavaScript libraries and program with the latest ECMAScript features out of the box.

When compiled, TypeScript will deliver a pure JavaScript file that can run on any browser, Node.js, or any JavaScript engine that is capable of executing ECMAScript 3 or newer versions.

Getting ready

To start our project, we will need to create an npm project. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm init -y

You also need to install TypeScript, so open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install typescript --only=dev

How to do it...

With our environment ready, we will need to start our TypeScript project. Let's create a .ts file and compile it:

To start our TypeScript project, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> tsc --init

This will create a tsconfig.json file inside our folder. This is a compiler settings file. Here, you can define the target, which JavaScript libraries will be available on the development, the target ECMAScript version, the module generation, and much more.

When developing for the web, don't forget to add the Document Object Model ( DOM) to the libraries on the compilerOption property inside the tsconfig.json file so that you can have access to the window and document object when developing.

Now, we need to create our index.ts file. Let's create some simple code inside the index.ts file that will log a math calculation in your terminal:

function sum(a: number, b: number): number {
    return a + b;
}

const firstNumber: number = 10;

const secondNumber: number = 20;

console.log(sum(firstNumber, secondNumber));

This function receives two parameters, a and b, which both have their type set to number, and the function is expected to return a number. We made two variables, firstNumber and secondNumber, which in this case are both set to a number type—10 and 20 respectively—so, it's valid to pass to the function. If we had set it to any other type such as a string, Boolean, float, or an array, the compiler would have thrown an error about the static type checking on the variable and the function execution.

Now, we need to compile this code to a JavaScript file. Open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> tsc ./index.ts

After the compilation, we can see the final file in index.js. If we look inside the file, the final code will be similar to this:

function sum(a, b) {
    return a + b;
}
var firstNumber = 10;
var secondNumber = 20;
console.log(sum(firstNumber, secondNumber));

You may be wondering: where are my types? As ECMAScript is a dynamic language, the types of TypeScript exist only at the superset level, and won't be passed down to the JavaScript file.

Your final JavaScript will be in the form of a transpiled file, with the configurations defined in the tsconfig.json file.

How it works...

When we create our TypeScript project, a file named tsconfig.json is created inside our folder. This file coordinates all the rules on the compiler and the static type checking during the development process. All developments are based on the rules defined in this file. Each environment depends on specific rules and libraries that need to be imported.

When developing, we can assign types directly to constants, variables, function parameters, returns, and much more. These types of definitions can prevent basic type errors and code refactoring.

After the development is done and we compile the project, the final product will be a pure JavaScript file. This file won't have any type of checking, due to the dynamic type of JavaScript.

This JavaScript file gets transpiled to the target model and defined on the configuration file, so we can execute it without any problems.