preface

In the last two years, Typescript has increasingly become standard for front-end projects, and there have even been stories about Typescript taking over the JS world. Most front-end developers have also been exposed to TS from the React, Vue, and Angular development ecosystems, and there have been a number of Typescript tutorials, most of which focus on Typescript’s type system. This article provides a brief overview of TS to help TS developers understand Typescript in a different way. After reading this article, we should know about Typescript:

  1. Typescript is designed for

  2. Two major features of Typescript

  3. What does Typescript do for us

  4. What else does Typescript bring us

  5. How does Typescript make building large applications better

  6. Suggestions for using Typescript

Typescript is designed for

Dynamic reconstructing the mine field.

In recent years, the volume and complexity of front-end applications have skyrocketed due to hardware capabilities and the rapid development of the front-end itself. However, in the development process of large applications, the dynamic language of JavaScript and the language characteristics of weak type, along with the increase of the number of members, the growth of code volume, the increase of business scene complexity, the absence of documents and unit tests and other situations, lead to the following problems:

  1. Type error, bug rate is high.

  2. Lack of documentation and difficulty for new members in understanding application logic.

  3. The dilemma of high maintenance cost and poor scalability.

In the process of software development, with the change of requirements and the increase of system scale, our projects inevitably tend to be complicated, which eventually leads to the slow progress in the middle and later stages of the project. How to effectively control the software complexity and its growth rate has become an increasingly prominent problem. Typescript comes into being in this context.

Typescript wikipedia entry

TypeScript stems from the shortcomings of Javascript in developing large applications at Microsoft and among customers. The challenge of dealing with complex JavaScript code made them need custom tools to simplify the component development process.

TypeScript developers are looking for a solution that doesn’t break existing standards compatibility and cross-platform support. Knowing that the ECMAScript standard provides support for future class-based programming, Typescript development is based on this solution. This forms a JavaScript compiler with a new set of syntax extensions, a superset based on this proposal that compiles TypeScript syntax into regular JavaScript.

TypeScript not only includes JavaScript syntax, but also provides static type checking and manipulating Prototype using object-oriented programming syntax that looks like class-based. Anders hejlsberg, lead architect of C# and founder of Delphi and Turbo Pascal, is involved in TypeScript development.

Two major features of Typescript

The Wikipedia introduction to Typescript mentions two key words: static type checking and object orientation.

The front end comes after a brief type-checking battle with Flow, Typescript, CoffeeScript, etc. With Typescript’s speed of development, cost of collaboration, and cost of maintenance, teams that have practiced Typescript in building large applications have almost overwhelmingly switched from JS to TS. Typical: Ant-Design, Angular, vue-Next switched from the original JS version to TS.

Interestingly, why doesn’t React use Typescript?

Static type checking

The type system of TS is shown below. There are plenty of tutorials on how to interpret the type system, so we won’t go into them here

object-oriented

In early 2018, we refactoring the React front end with Typescript, and soon we had a short honeymoon with TS, where low-level errors were much less common. But then we realized that if that’s what Typescript is all about, Typescript is a toy to us, an advanced toy.

As mentioned earlier, with the growth of code volume and business complexity, the absence of documentation and unit tests, and the emergence of staff turnover, functional understanding, module conflicts, and code that is difficult to maintain have not disappeared with the advent of static type checking.

Even as we develop patterns for container components, presentation components, separation of business logic from UI, and so on, we continue to run into bugs, new members struggle to understand, old members’ modules collide, and Typescript doesn’t seem as strong as it claims to be….

We started to wonder if Typescript was right for building large applications. On github we noticed that vscode’s source code is written with Typecript. Since Typescript can handle complex applications such as IDE editors, we look to vscode’s source code for a solution.

At first we were confused by this approach in vscode and were unfamiliar with a lot of implements, abstract, and private protect designs. After a lot of Goole-oriented programming, we’ve come to notice Typescript’s second feature, object-oriented: encapsulation, inheritance, polymorphism.

  • Encapsulation: Hides data and functional implementation details from external modification that could lead to misuse.

  • Inheritance: A subclass has all the attributes and methods of its parent class, enabling reuse of implementation code.

  • Polymorphism: The ability to have many different manifestations or forms of the same behavior.

Object orientation is described in one sentence: breaking up functionality into single-responsibility functionality, isolating functionality through encapsulation, and building large applications through composition.

Object orientation is a relatively large field, we will use an example in the following, briefly talk about the three characteristics of object orientation

What does Typescript bring us

Low-level error locating

Rollbar counted the Top10 types of errors in front-end projects in 2018:

Seven of these are typeerrors, which is a send-off problem for Typescript.

The ability to read code is enhanced

Vscode has some handy code reading tips

  • Hover: Read interface while displaying comments

  • Go to define Ctrl + click, go to symbol definition source F12.

  • Peep Definition Alt + F12: Brings up a peep window that displays the symbol definition.

  • Go to Reference Shift + F12: Displays all references for similar characters.

Intelligent prompt Automatic completion

IDE very early has the function of automatic completion, in which the s type, able to write a type library, for IDE recognition, the most representative is: www.typescriptlang.org/dt/search?s…

Enhanced refactoring capabilities

  • Extract function

  • Extract variable

The above contents can be summarized as follows:

  • Static checking for type errors

  • Improved code readability

  • The speed of writing

  • Increased maintainability

What else does Typescript bring us?

Typescript’s static type analysis is now pervasive. In contrast, Typescript’s object-oriented nature is generally not appreciated by front-end developers. Compared with the development time of the back end, the rapid development time of the front end is too short, so that the whole front end does not precipitate a complete system of design patterns, design principles and modeling. ** By virtue of Typescript’s features, we can take advantage of other areas.

UML modeling

UML mainly uses graphical symbols to represent the design of software projects. Using UML can help project teams communicate and validate the design of functions.

Class diagram:

Sequence diagram:

User Management – Sequence diagram

UML, in the form of graphical symbols, fills part of the design document and usage document.

Design patterns and design principles

Prior to Typescript, some object-oriented design patterns could be modeled in JavaScript. However, due to the lack of interfaces, access-qualified modifiers, and abstract classes, object-oriented encapsulation and polymorphism have always been difficult concepts to understand and simulate in JavaScript. Typescript fills in the missing link.

In recent years, while Typescript has become popular, functional programming has also gained popularity with Redux and others. We are not here to argue over the superiority of two programming models. What we need is to make the application build strong and maintainable. In working with Typescript, we decided to break the boundaries and try object orientation with which the front end was unfamiliar. Since object orientation is a relatively large field, we will not cover it in detail here, but those who are interested can take a look at object orientation through the design patterns link at the bottom.

Typescript is better for building large applications

If you ask a Java/C# developer, what is the point of static type checking?

The standard answer is “static typing is better for building large applications.”

Compare Typescript to JavaScript’s progress in developing large applications, as shown below:

In the original Typescript design, we mentioned three common problems we face in the middle and late stages of large JavaScript projects:

  1. Type error, bug rate is high.

  2. Lack of documentation and difficulty for new members in understanding application logic.

  3. The dilemma of high maintenance cost and poor scalability.

How does Typescript address these issues?

First, static type checking allows early build failures. Once a type mismatch occurs while code is being written, it can be detected both before and during compilation.

Second, static typing is friendly to reading code. For large applications, where methods are numerous and invocation relationships are complex, it is impossible for someone to meticulously document every function, so static typing is an important reminder and constraint.

Thirdly, UML modeling language makes up part of the design documents and specification documents, the same set of design patterns, making it easy to understand the function.

Fourth, with the help of oriented design ideas, hidden implementation details, strengthen the cohesion of the function. Control interface exposure granularity, to reduce the coupling degree between functions, to achieve the effect of easy expansion.

Fifth, the static type with IDE reconstruction function, maintenance difficulty coefficient straight down.

Combining Tyepscript and React with object-oriented OOP and functional programming FP, we summarized the experience as follows:

  1. OOP has a complete design system in application design, which can meet the challenges of module scalability and business complexity.

  2. At the implementation level of detail, don’t do OOP for OOP’s sake. OOP is not a panacea.

  3. FP has a unique advantage when dealing with data flow.

Suggestions for working with Typescript

Our strong recommendation is that Typescript is a language with two parts: static type checking and object-oriented. If you’ve already experimented with type systems and are already familiar with JavaScript’s various features, learn about object orientation and maybe get a better handle on Typescript.

Two tips before getting into object orientation:

  1. Design principles and design patterns are a programming paradigm, which is cross-language and cross-framework.

  2. The characteristics of strongly typed language bring a new habit of thinking.

conclusion

From what has been mentioned above, we should know that:

  • Typescript is designed to deal with the complexity of JavaScript in large applications.

  • Typescript has two major features: static type checking and object orientation.

  • As a strongly typed language, Typescript not only has a static typing system, but also brings with it a complete set of technologies that control the complexity of functionality.

  • If you are a mid-to-advanced front-end, it is recommended that you try to learn object-oriented programming across the border while embracing functional programming.

Recommended reading

  • Why model?

  • What is UML modeling?

  • Design patterns

  • General principles and methods for reducing software complexity