Install TypeScript

This article is the first in a series of TypeScript Tutorials.

1. Know the TypeScript
2. Install the TypeScript

preface

The previous article gave you a basic understanding of TypeScript and its value. In this section, however, we’ll learn how to build a TypeScript development environment.

TypeScript officially provides a Playground. Conveniently, you can type TypeScript code on the left, and the compiled JavaScript code is automatically displayed on the right.

In fact, you can skip the rest of this tutorial and write TypeScript code in Playground for later tutorials. Come back to this section when you’re more or less familiar with TypeScript syntax.

Install TypeScript globally

Use the following command to install the TypeScript command-line tool:

npm install -g typescript
Copy the code

From the installation results, we can see that the above commands install two commands in the global environment: TSC and tsServer. Among them, TSServer is mainly used to provide semantic support for editors and ides, etc., which is not commonly used.

The TSC command is commonly used. TSC stands for typescript compiler, the typescript compiler used to compile TS code into JS code. How to use it is simple:

tsc index.ts
Copy the code

As a convention, files written in TypeScript should have the.ts suffix. When writing React in TypeScript, use the.tsx suffix instead of.jsx.

Example

First, we create a new TS file, main.ts. Enter the following code:

// Create a sayHi function with one parameter person
// person must be a string
function sayHi(person: string) {
    return `Hi, ${ person }`
}

sayHi('Hopsken')
Copy the code

Compile using the TSC command, which generates compiled JS files in the current directory.

tsc main.ts
Copy the code

Compiled JS code:

function sayHi(person) {
    return "Hi, " + person;
}
sayHi("Hopsken");
Copy the code

As you can see, the type annotations in the original TypeScript have been removed and the resulting file does not contain any type determination code.

In addition, the observant students may have noticed that the original TS code uses ES6 template string syntax, but in the generated JS, the compiler automatically converts it to ES5 syntax. This is another benefit of TypeScript, which allows us to use new JavaScript features with confidence.

So what if there is an error in the TS source code? For example, a number is passed in where a string should be. We made the following modifications in the above procedure:

sayHi(42)
Copy the code

Compile again,

As you can see, the compiler automatically reports errors and prompts for them.

Note that even though the compiler reports an error, it still generates a “problematic” JS file!

tsconfig.json

In general, each TypeScript should have a tsconfig.json file indicating that it is a TypeScript project. The tsconfig.json file lets you configure the parameters used by TypeScript compilation.

If you call the TSC command without specifying an input file, the compiler will start in the current directory and work its way up the tsconfig.json file.

With the –project(-p) argument, you can ask the compiler to use the tsconfig.json file in the specified directory (or file path).

Use the following command to initialize a tsconfig.json file.

tsc --init
Copy the code

The following describes several common configuration items. For a complete list, see here.

{"compilerOptions": {// Specify the ECMAScript version used by the output JS code. The options are ES3, ES5, ES2015, ES2016, ES2017, ES2018 and ESNEXT. Select this parameter based on compatibility requirements. "Target ": "es5", // Specifies the modularity scheme used by the output JS code. The options are none, CommonJS, AMD, System, UMD, ES2015, or ESNext. "Module ": "commonjs", // Specifies the library to use during compilation, depending on the case. "Lib ": [], // Whether to compile JS files. "AllowJs ": true, // Whether to report errors in JS source code. "CheckJs ": true, // enable JSX syntax, optional values are perserve, react-native, react. "JSX ": "preserve", // whether to generate the relevant '.d.ts' declaration file. "Declaration ": true, // Generates sourceMap file "sourceMap": true, // consolidates output JS code into a single file // "outFile": ". / ", / / specifies the output directory outDir ":". / ", / / the specified source root directory "rootDir" : ". / ", / / whether the introduction of tslib "importHelpers" : True, // When the target version is 'ES5' or 'ES3', to provide full deconstruction, 'for-iterable' support for "downlevelIteration": True, // Enable all strict type checking, different from STRICT mode of JS. "Strict ": true, // When using any type, you must explicitly declare // "noImplicitAny": true, // strictly check null type // "strictNullChecks": StrictFunctionTypes: true, // strictFunctionTypes: true, // strictFunctionTypes: true, // strictBindCallApply: True, / / strict inspection class attribute initialization / / "strictPropertyInitialization" : true, / / when this has implied any type times wrong / / "noImplicitThis" : True, // always use strict mode (referring to strict mode in JS) // "alwaysStrict": ExperimentalDecorators: true, /* Experimental option */ / Experimental support for decorators in ES7 "experimentalDecorators": true,}}Copy the code

Next up

Starting in the next installment, we’ll formally introduce TypeScript’s basic syntax. In the next section, we’ll learn about basic types and type inference in TypeScript.

P.S. about the editor

Currently, major editors support TypeScript. However, I do recommend Visual Studio Code.

It is a free, open source, cross-terminal editor. Developed by MicroSoft, this is a modern, lightweight editor unlike the bloated Visual Studio series of ides.

Most importantly, VSCode is written in TypeScript itself, with built-in TypeScript support. Whether it’s code completion, interface hints, defining jumps, code refactoring, etc., it’s easy to handle.

Get TypeScript support from other editors or ides:

• Atom
• Sublime Text
• WebStorm
• Vim
• Emacs
• Eclipse
• Visual Studio 2015
• Visual Studio 2013