Article directory
1. Introduction to TypeScript
1. What is TypeScript?
TypeScript is a strongly typed version of JavaScript. Then the types and unique syntax are removed at compile time and pure JavaScript code is generated. Since JavaScript is still ultimately run in the browser, TypeScript does not rely on browser support and does not cause compatibility issues.
TypeScript is a superset of JavaScript, which means it supports all JavaScript syntax. And on top of this, some extensions are added to JavaScript, such as class/interface/module, etc. This will greatly improve the readability of the code.
If the types are different from JavaScript, the biggest advantage of a strongly typed language like TypeScript is static type checking, which can predict the occurrence of some low-level errors during the code development stage.
- A language similar to JavaScript that adds types on top of JavaScript and enhances some of JavaScript's grammatical functions
- Follow the EcmaScript 6 standard specification
- Developed by Microsoft
- Angular 2 framework written in TypeScript
- It is backed by two major companies, Microsoft and Google.
- TypeScript can be compiled into JavaScript to run in environments that support JavaScript
- The relationship between TypeScript and JavaScript is like the relationship between less and css
1.2 Static typing and dynamic typing
Static: No need to run, the result can be determined based on the program code.
Dynamic: The result cannot be determined until it is run.
Type: A description of the properties of a piece of data. For example, what is its structure and what operations it can perform.
Static typing: Data has types, and only data has types.
Dynamic type: Data has a type, and the variables and expressions that store the data also have types, and the types are fixed at compile time.
The following figure is a comparison of static languages and dynamic languages:
As can be seen from the table, dynamic languages and static languages have their own advantages and disadvantages. TypeScript provides strong type support for static languages and is compatible with the weakly typed syntax of dynamic languages. Users can choose freely according to project needs.
This kind of combination of dynamic and static features has not been seen in other languages.
1.3 Why TypeScript
-
Starting from Angular 2, TypeScript is officially recommended as the preferred language for developing Angular applications.
-
Follow EcmaScript 6
-
Powerful IDE support
- type checking
- Strict grammar tips
-
Refactoring
-
Good readability
1.4 TypeScript usage scenarios
-
Large team development
-
Angular official language
-
other…
Here is a quote from a developer on Zhihu regarding the use and promotion of TypeScript:
typescript绝对是好东西，不过推广是有难度的： 1、TS是微软制造，最好的开发工具是VS，想想有些人就激动了（什么vi流，sublime流，macbook流，虽然也能写ts，但你无法跟他们说用vs写有多么好）； 2、即使你告诉他们TS有多好，但是几十人的团队里总有一半以上的人不想学新的东西（当然我没有权利说不学新东西的人应该全部滚动，因为互联网打工的是大爷，想跳槽随便找工作）； 3、JSer很多没有学习OOP开发经验（特别是从设计／页面重构转过来的）； 4、很多人接触TS前根本没学过JS，经常有人问“使用TS如何写元素拖拽”这样的问题（那是DOM API好伐，不过你跟初学者很难解释明白）；
1.5 TypeScript isn’t just for developing Angular apps
https://www.typescriptlang.org/samples/index.html
- React
- Angular
- Node.js
- View.js
- …
Anyone who can write JavaScript can use TypeScript.
1.6 Prerequisite knowledge
- EcmaScript 6
- TypeScript concepts and relationships
- Have some experience in JavaScript development
- Experience in Java, C#, C++, C and other statically typed languages is preferred
2. How to learn TypeScript
- Official documents shall prevail
- Read other people's code
- Since TypeScript is compatible with EcmaScript 6, you do not need to fully learn TypeScript before using it during development.
- One suggestion is to learn it when you have time and use it once you know it.
- Although it is compatible with EcmaScript 6, it is recommended that since TypeScript is used, you should make your TypeScript code more TypeScript, so that you can unleash the power of TypeScript.
2.1 Related links
3. Start
3.1 Set up a TypeScript development environment
-
What is a compiler?
-
less compiler:
less -
EcmaScript 6 compiler:
babel -
TypeScript compiler:
typescript -
In a word: Convert TypeScript to JavaScript and the browser will run
-
Online test compilation environment compiler
- https://www.typescriptlang.org/play/index.html
-
Local development and compilation environment
npm i -g typescript # 查看版本号 tsc --version # 查看使用帮助 tsc --help
3.2 Editor selection
- Visual Studio Code
- Sublime
- Webstorm
- …
3.3 Hello World
New greeter.ts and write the following:
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
Install the compiler:
npm i -g typescript
Compile:
tsc greeter.ts
Modify the code in the greeter.ts file and add a type declaration for the parameter person of the greeter function :string:
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
Recompile and execute.
Let's go ahead and modify it:
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
Recompile and you will see the following error:
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
4. Classes and Interfaces
4.1 Interface
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = {
firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
4.2 Class
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);