Article directory
1. Introduction to TypeScript
1. What is TypeScript?
TypeScript is a free and open source programming language developed by Microsoft. It's a superset of JavaScript, and essentially adds optional static typing and class-based object-oriented programming to the language.
- is JavaScript with a type system added, suitable for projects of any size.
- It is a statically typed, weakly typed language.
- Fully compatible with JavaScript, and does not modify the characteristics of the JavaScript runtime.
- It can be compiled to JavaScript, and then run in any environment that can run JavaScript, such as browsers and Node.js.
- With many compilation options, the strictness of type checking can be determined through configuration files.
- It can coexist with JavaScript, which means that JavaScript projects can gradually migrate to TypeScript.
- Enhanced the functions of the editor (IDE), providing code completion, interface prompts, jumping to definitions, code refactoring and other capabilities.
- With an active community, most commonly used third-party libraries provide type declarations, and are open source and free
The diagram below shows the relationship between TypeScript and JavaScript, ES5, ES2015, and ES2016:
It means: JavaScript and ES have it, and TypeScript has it!
2. The difference between TypeScript and JavaScript
3. Disadvantages of JavaScript
First of all JavaScript is a very flexible programming language:
It has no type constraints, and a variable may be initialized as a string and then assigned a number.
Due to the existence of implicit type conversion, the type of some variables is difficult to determine before running.
Prototype-based object-oriented programming enables properties or methods on a prototype to be modified at runtime.
TypeScript's type system, to a large extent, makes up for the shortcomings of JavaScript
4. Why use TypeScript
Generally speaking, in large-scale projects, the post-maintenance cost is much more than the early-stage development cost, so team standardization is particularly important, including coding specifications, method call specifications, etc., and TS can constrain team development through code, so that It is conducive to later maintenance and expansion, so as to achieve efficient development
Two most important features - type system, applicable to any scale.
Advantages: powerful IDE support, support type detection, allow to specify types for variables, syntax detection, syntax hints
Disadvantages: There is a certain learning cost, and you need to understand the knowledge points that the front end may not be very familiar with, such as interfaces, generics, classes, and enumeration types.
Interfaces: can be used to describe the shape of ``object Shape`
Generics: When defining a function, interface or class, the specific type is not specified in advance, but a characteristic of the specified type when used
Classes: Defines the abstract characteristics of a thing, including properties and methods
Two, TypeScript development environment construction
1. Download Node.js
-
Node.js official website: Node.js (nodejs.org)
-
Version number LTS: stable version (general development download this)
-
Version number Current: latest version
2. Install Node.js
Find the downloaded directory, open Node.js for brainless installation, and go to the next step
How do you know the installation was successful?
The first method: win + R to open the run dialog box, enter cmd to open the command prompt window, enter node -v and press Enter to display the installation version number, if the following results are successful!
The second method: win search for powerShell, open PowerShell is the same, enter node -v and press Enter to display the version number, that is success!
3. Use npm to install TypeScript globally
Npm is a node package manager, through which you can install various applications and software under node, and you can use npm directly after downloading node.js
-
enter the command line
-
Type: npm i -g typescript
-
If the above information is displayed, if there is no error, it means that typescript has been installed.
-
How to check if it is installed? Enter the tsc command and press Enter. If there are a bunch of things, it means that the installation is successful, otherwise it will show that this command was not found.
4. Create a ts file
Create a new file with a suffix of .ts in any folder, open the file with Notepad or any text editor, and enter console.log(' hello TS!'); But what if the web page does not recognize the ts file
? Use the typescript compiler we just downloaded to convert the ts file into a js file.
How to convert it? Use the tsc command to compile the ts file
5. Use tsc to compile the ts file
Enter cmd in the folder where it is located. The advantage of entering cmd here is that the path where the command line is located is exactly the path of the current file, so you don’t need to use the command to enter!
Enter the command: tsc to compile the file name, press Enter to execute, although the command prompt window has not changed, but at this moment you will find that there is an additional js file in the folder!
