[This is the fifth day of my participation in the Gengwen Challenge. For details, see: Gengwen Challenge]

The development of preparation

Environment set up

TypeScript does not run in a browser. You need to install TypeScript with Node.js, which comes with NPM and NPX.

  • To check whether node.js is successfully installed, run the following command:
$ node -v
Copy the code

The results are as follows:

  • View the version of NPM
$ npm -v
Copy the code

The results are as follows:

The development tools

As the saying goes, “if you want to do a good job, you must sharpen your tools first.” As a developer to choose a suitable development tools is not also wise, can choose according to their own preferences and habits; For example: Subline Text, Atom, Vim, WebStorm, VSCode, I like VSCode, so the following code demo is in VSCode;

  • Based on the traditional syntax highlighting and auto-completion functions, the intelligent completion based on variable type, function definition and the introduction of modules is extended.
  • Support for running and debugging applications directly on the editor;
  • Git Comands are built-in, which can greatly improve the efficiency of collaborative development using Git and other SCM management tools.
  • Based on Electron development, with super scalability and customization.

Install the TypeScript

Because VS Code only integrates with the TypeScript language service and does not include the TypeScript translator, we also need to install TypeScript separately. To make it easy to quickly complete a small example of getting started, we recommend installing TypeScript globally using NPM using a command-line tool.

To do this: Use the “Ctrl + ‘” shortcut to open the VS Code built-in command line tool and enter the following Code:

$ npm i -g typescript
Copy the code

After the installation is complete, you can run the following command to view the version:

$ tsc -v
Copy the code

Here are the results:

Environment ready almost, the following is to write a starter program;

  • To initialize thetslintConfiguration;
$TSC --init // Note that there is no space between the two dashes and init
Copy the code
  • Create a newhello.tsTo write a filehello worldThe program
// hello.ts
console.log('hello world');
Copy the code
  • To run the program
// First compile the TS code into JS code$ tsc hello.ts// Execute the js code$ node hello.js
Copy the code

Since we are constantly changing files and adding content during development, it is not an option to repeat this command (ha ha ha, not lazy programmers are not good programmers). So we need to further optimize our project, so that it can listen to the file changes and start, so that we don’t have to manually restart the compile and run every time, which is a productivity free!

Set up the project

  • Initialize the project

Select a project directory, create a new project folder, and run the following command to initialize the NPM environment: This will generate a package.json file in the project root directory.

$ npm init -y
Copy the code
  • To install dependencies, open the terminal, point to the current project directory, and run the following command:
$ npm i -D typescript tslint @types/node ts-node
Copy the code
  • Initialize thetsconfig.jsonconfigurationTypeScriptIn this file, you define which files to compile, which files to compile into which directory, and which version to useJavaScriptRun; When the command runs successfully, one is generated in the root directory of the projecttsconfig.jsonThe file.
$ tsc --init
Copy the code

The configuration items of the tsconfig.json file are described as follows:

options instructions
include TSC looks for TypeScript files in that folder
lib TSC assumes that those apis are in the environment where the code is running
module Which module system does TSC compile the code into (CommonJs, ES2015, etc.)
outDir TSC will generateJavaScriptThe code is in that folder
strict As strict as possible when checking for invalid code, this option enforces that all code is correctly typed
target Which version of the code TSC compiles toJavaScript(ES3, ES5, ES2015, etc.)

Configuration Item Specification

Configuration tslint

Specify stylic conventions for code (such as using tabs or space indentation)

$ npx tslint --init
Copy the code

When this command is successfully executed, the tsLint. json file will be generated in the project’s further directory, with the following contents:

{
    "defaultSeverity": "error"."extends": ["tslint:recommended"]."jsRules": {},
    "rules": {},
    "rulesDirectory": []}Copy the code

Integrate EditorConfig configuration

EditorConfig helps maintain a consistent coding style for multiple developers working on the same project on different IDE editors.

Add the.editorConfig file to the project root directory and configure the following:

# Editor configuration, see http://editorconfig.org

# represents the top-level EditorConfig configuration file
root = true

# : applies to all files
[*]

Set the file character set to UTF-8
charset = utf-8

# indented style (TAB | space)
indent_style = space

# Indent size
indent_size = 4

# control line type (lf | cr | CRLF)
end_of_line = lf

# Removes any whitespace characters at the beginning of a line
trim_trailing_whitespace = true

# Always inserts a new line at the end of the file
insert_final_newline = true

The following rules apply to the # MD file
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Copy the code

To use EditorConfig for VSCode, go to the plug-in market and download the plug-in EditorConfig for VSCode. WebStorm does not need to be installed and can be configured using EditorConfig.

Integrate Prettier configuration

Prettier is a powerful code formatting tool that supports JavaScript, TypeScript, CSS, SCSS, Less, JSX, Angular, Vue, GraphQL, JSON, Markdown, etc. It can handle almost any file format available to the front end, and is the most popular code formatting tool at the moment.

  • Install the Prettier
$ npm i prettier -D
Copy the code

  • Creating an Prettier configuration file Prettier supports configuration files in various formats, such as.json,.yml,.yaml, and.js. Create the. Prettierrc file in the root directory of the project.

  • Configuration. Prettierrc In this project, we perform the following simple configurations. For more information about prettier-options, go to the official website of prettier-options.

{
    "useTabs": false."tabWidth": 4."printWidth": 100."singleQuote": true."trailingComma": "none"."bracketSpacing": true."semi": false
}
Copy the code

After Prettier is installed and configured, you can use the Prettier command to format the Prettier code

  • Format all files (.for all files)
$ npx prettier --write .
Copy the code

If the VSCode editor uses Prettier, you need to download the prettier-code formatter plug-in. WebStorm does not need to be installed and can be configured using EditorConfig.

After the configuration, the project directory is shown as the following figure:

Typescript-basic ├─ SRC │ ├─ holly.ts ├─.editorConfig ├─.gitignore ├─.prettierrc ├─ package.json ├─ package.json ├─ readme.md ├─ tsconfig.json ├─ tslint.jsonCopy the code
  • Configure startup command:

Add the configuration to the scripts in package.json

/ /...
"scripts": {
    // ...
    "dev": "npx ts-node ./src/index.ts"
},
// ...
Copy the code

Take hello.ts as an example, NPX ts-node./ SRC /hello.ts

Above is the environment construction and the corresponding specification configuration, the follow-up can be directly on the top of the “building blocks”. Source portal