Help you to develop the type of thinking TypeScript (a)

Preface: As a programmer, I believe you have mastered the JavaScript language, because of the very wide range of application fields, so each claim to be a programmer must master the language.
But JavaScript own shortcomings, I believe that every programmer is fully understood, there is a big security risk flaws make the project constraints, so we often say that JavaScript is not suitable for large-scale development projects.
So how to solve this problem?
Is there a better JavaScript language can make up for deficiencies?
This article next to the pain points JavaScript deployment, summarizes some of the issues caused by the type, we have a thorough understanding of the way to lead TypeScrip.

1.1 Excellent JavaScript
JavaScript is a good programming language?
 Each person may not be exactly the same point of view, but from the point of view of many, JavaScript is a programming language very good.
 Moreover, it can be said that the language will not be in place for a long period of time, and everyone will be more widely used in the field.
The famous Atwood's Law:
Jeff Atwood Stack Overflow one of the founders in 2007 made famous Atwood's law.
any application that can be written in JavaScript , will eventually be written in JavaScript.
Any application can use JavaScript to achieve  are eventually implemented using JavaScript.
 In fact, we have already seen, at least for now still no substitute for JavaScript in the browser, and also prepared a wide range of applications on the server side (Nodejs).
Excellent JavaScript is not weaknesses?
 In fact, the various historical factors, JavaScript language itself, there are many shortcomings;
 such as ES5 and the use of the var keyword before the issue of scope;
array type is not  such as JavaScript initial design of contiguous memory space;
 For example, JavaScript until today there is no mechanism to detect this type of join;
JavaScript is slowly getting better
 It is undeniable, JavaScript is slowly getting better, whether it is designed from the ground or the application level.
ES6,7,8 such as the introduction, each will make the language more modern, safer and more convenient.
 know today, however, JavaScript is still no progress on the type of detection (Why type detection is so important, I will talk to later).
1.2 types of problems caused
first of all you need to know, programming development, we have a consensus: An error occurred sooner the better
 be able to find errors when writing code, do not re-discover the advantages (IDE is in the code compile time the process of writing code to help us find errors).
 find errors during code compilation, you do not find (the type of detection can be very good to help us do that) during the code is running.
 be able to find errors in the development stage, we do not find errors during testing, to find errors during the test, do not find errors on the line.
Now we want to explore is how to find the error code in the code during compilation:
JavaScript can do it? No, we look at the following piece of code issues that may arise often.

function getLength(str) {
return str.length;
}

console.log ( "1 code being executed.");
console.log ( "2 start function.");
getLength ( "abc"); // correct call
getLength (); // wrong call (IDE and no error)

// After the above code error, all subsequent code is unable to continue normal execution of the
console.log ( "3 call end.");
Help you to develop the type of thinking TypeScript (a)
Operating results in the browser as follows:
Help you to develop the type of thinking TypeScript (a)
image02
This is a very common mistake that we:
 the reason for this is a big mistake because JavaScript is not our argument passed to any restrictions, can only wait until the error was found during the operation;
 and when this error occurs, it will affect the continued implementation of the follow-up code, that is, the entire project because a small mistake and in-depth crash;
Uncaught TypeError: the Read Property of can not 'length' of undefined
of course, you might be thinking: how could I make such a low-level mistakes?
 When we write a simple demo like ours above, such a mistake can easily be avoided, and when an error occurs, it is very easy to check out;
 But when we develop a large-scale project it? You will not be able to guarantee that such a problem? And if we are to call someone else's library, how do you know so that we pass in the end is what kind of parameters?
But if we can add a lot of restrictions to JavaScript in development can be good to avoid this problem:
Type  example, our getLength function str is a must pass, not the caller did not pass during compilation will error;
 so we had it must be a String type, passing other types of direct error;
 then you know a lot of mistakes problem was discovered during compilation, rather than wait until run time to go find and modify;
1.3 absence of the type of thinking
 We have simply realized that some of the problems brought about no type checking, JavaScript because from initial design did not consider the type of constraints, so the resulting loss of front-end developers about the type of thinking:
 front-end developers usually do not care or variable What kind of argument is, if when it is necessary to determine the type, we often need to use a variety of verification judgment;
 go to the front of the staff from the other direction, also because there is no type constraint, but always worried about their own code of insecurity, not enough robust;
 so we often say that JavaScript is not suitable for large-scale development projects, because when a huge project once up, this type of loose restraint will bring a lot of security risks, and more staff development is also not a good type of contract between them.
 For example, when we go to achieve a core class libraries, if no type constraint, others need to be passed in various parameters verified to ensure the robustness of our code;
 For example, we call the function to someone else, no other function any comment, we can only see the inside of this function is to understand the logic of what you need to pass parameters, return values is what type.
 In order to make up for deficiencies on JavaScript type constraints, increase the type of constraints, many companies launched their own programs:
 2014 Nian, Facebook launched the flow to check the type of JavaScript;
 In the same year, Microsoft Microsoft also introduced a TypeScript1.0 version;
 they are committed to providing the type checking to JavaScript;
 and now, no doubt TypeScript has been completely win:
Vue2.x use is the flow of time to do the type checking;
Vue3.x across the board has been turned TypeScript, 98.3% were using TypeScript reconstruction;
 and Angular very early on the use of TypeScript project was the reconstruction and the need to use TypeScript development;
 Facebook and even some of their own company's products are also using TypeScript;
 learning TypeScript not only can increase the type of constraint to our code, but we can develop front-end programmers have the type of thinking.
 Let today's hero TypeScript grand debut it!
II. Encounter TypeScript
2.1. What is TypeScript
though we already know TypeScript is doing, and also know what it solves the problem, but we still need to understand fully what is TypeScript in the end?
Let's look at the definition of TypeScript own and on GitHub official:

GitHub saying: TypeScript IS A superset of JavaScript that compiles to Clean JavaScript the Output.
The typescript official website: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Translate: TypeScript is to have the type of JavaScript superset, it can be compiled into an ordinary, clean, complete JavaScript code.

How to understand the above words?
 We can TypeScript understood as an enhanced version of JavaScript.
JavaScript owned properties, TypeScript are all supported, and it followed the standard ECMAScript, so ES6, ES7, ES8 and other new syntax standard that is supported;
 and the language level, not only increasing the type constraints, but also including some syntax extensions, such as enumerated type (enum), tuple type (tuple) and so on;
TypeScript while achieving new features, and always kept synchronized ES standard and even lead;
 and TypeScript will eventually be compiled into JavaScript code, so you do not need to worry about its compatibility issues, at compile time nor need the help of tools such as Babel;
therefore, we can TypeScript understood as a God filled with JavaScript, not only allow JavaScript more secure, but it brings a lot of nice special effects equipment;
2.2 characteristics of TypeScript.
official TypeScript paragraphs have described the characteristics, I feel very much in place (although some official, look), we share together:
began in JavaScript, attributed JavaScript

the typescript from several millions of JavaScript today open Those who are familiar with the syntax and semantics start. Using existing JavaScript code, including popular JavaScript libraries, and call TypeScript code from a JavaScript code.


TypeScript can compile a pure, simple JavaScript code, and can run on any browser, Node.js environment and any support for ECMAScript 3 (or later) in the JavaScript engine.

the typescript is a powerful tool for building large projects

type of JavaScript allows developers to use and efficient development tools and common operations in the development of JavaScript applications such as static checking and code refactoring.


type is optional, type inference for some type of comment you make the static verification of the code are very different. Type lets you define the interface and existing JavaScript libraries insight into the behavior between the software components.

advanced JavaScript

the typescript to provide the latest and evolving JavaScript features, including those ECMAScript and future proposals from 2015 features, such as asynchronous features and Decorators, to help build robust components.


these characteristics when developing high-trusted applications are available, but will be compiled into a neat ECMAScript3 (or later) of JavaScript.

It is because of these characteristics, TypeScript has now been applied in many places:
 including our previously mentioned Vue3 and Angular have used TypeScript reconstructed;
Help you to develop the type of thinking TypeScript (a)image03

vue3 source

Help you to develop the type of thinking TypeScript (a)image04

angular Source

包括Vue3以后的开发模式必然会和TypeScript更加切合,大家也更多的需要使用TypeScript来编写代码;
包括目前已经变成最流行的编辑器VSCode也是使用TypeScript来完成的

Help you to develop the type of thinking TypeScript (a)image05

包括在React中已经使用的ant-design的UI库,也大量使用TypeScript来编写:

Help you to develop the type of thinking TypeScript (a)image06

ant-design源码
包括小程序开发,也是支持TypeScript的

Help you to develop the type of thinking TypeScript (a)image07

小程序开发
2.3. 体验TypeScript
本来想在这个位置放上一个体验TypeScript的程序,但是涉及到过多TypeScript的安装流程和vscode的配置信息。
所以,我打算在下一篇中专门讲解这部分的内容,包括使用webpack搭建一个可以自动测试TypeScript代码的环境。
So,稍安勿躁,这一个章节我们就和TypeScript有一个简单的邂逅就好,后面再进行深入了解。
三. 前端学不动系列
3.1. 前端开发者的难
在之前的Flutter文章中,我说到一个话题,大前端是一群最能或者说最需要折腾的开发者:
客户端开发者:从Android到iOS,或者从iOS到Android,到RN,甚至现在越来越多的客户端开发者接触前端相关知识(Vue、React、Angular、小程序);
前端开发者:从jQuery到AngularJS,到三大框架并行:Vue、React、Angular,还有小程序,甚至现在也要接触客户端开发(比如RN、Flutter);
目前又面临着不仅仅学习ES的特性,还要学习TypeScript;
Vue3马上也会到来,又必须学习Vue3新特性;
大前端开发就是,不像服务器一样可能几年甚至几十年还是那一套的东西。前端新技术会层出不穷。
Help you to develop the type of thinking TypeScript (a)image08
但是每一样技术的出现都会让惊喜,因为他必然是解决了之前技术的某一个痛点的,而TypeScript真是解决了JavaScript存在的很多设计缺陷,尤其是关于类型检测的。
And long-term perspective developer of view, help us learn TypeScript front-end programmer training type of thinking, this way of thinking is particularly important for large-scale projects completed.
I will update TypeScript of a series of articles, to bring everyone together to learn TypeScript, and training we can form a type of thinking.
3.2 lifting of doubt in his heart
back to our opening some of the doubts raised:
What TypeScript in the end is? Why is everyone talking about how good TypeScript how, in the end was good? Angular, Vue3 successive use TypeScript been restructured Does that mean we have to grasp TypeScript, why should they choose TypeScript? I need to learn what kind of foundation or learn TypeScript it?
The above is my share, and some dry-sharing plan, will all be back in the Platform Update for concern me take you Advanced Daguai!

Want to feel something more to say school friends, want to get more skills upgrading Cheats, please add micro letter: 19950277730, here I am ready to answer for you. There are many free videos and learning materials such as iOS, data structures and algorithms, programming skills.
From the beginning of the next, let us put TypeScript build a good environment, and then start formal learning it now!

Guess you like

Origin blog.51cto.com/13007966/2452433