preface
In the last two years, TypeScript has become the norm for front-end projects, and there have been rumors that TypeScript is about to take over the JS world. Most front-end developers have also been exposed to TS through React, Vue, and the Angular development ecosystem, and there have been a number of tutorials on TypeScript, most of which focus on the TypeScript type system. This article will provide a brief overview of TS, aiming to give TS developers a different perspective on TypeScript. After reading this article, here’s what you should know about TypeScript:
- The original design of TypeScript
- Two features of TypeScript
- What does TypeScript give us
- What else does TypeScript give us
- How does TypeScript make it easier to build large applications
- Tips for using TypeScript
- Common TypeScript vs. React issues
The original design of TypeScript
JavaScript joke: Dynamic fun, reconstruction of a landmine field.
In recent years, the volume and complexity of front-end applications has skyrocketed due to hardware capabilities, the rapid evolution of the front-end itself, and other factors. However, in the development process of large-scale applications, the features of JavaScript dynamic language and weakly typed language, along with the increase in the number of members, the growth of code volume, the increase in the complexity of business scenarios, and the absence of documents and unit tests, lead to the following problems:
- There are many type errors and the bug rate is high.
- Lack of documentation and difficulty for new members to understand application logic.
- Difficulties 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 project will inevitably become more complex, which eventually leads to the situation of slow progress in the middle and late stage of the project. How to effectively control software complexity and its growth rate has become an increasingly prominent problem. TypeScript was born out of this situation.
TypeScript Wikipedia entry
TypeScript stems from the shortcomings encountered by JavaScript in developing large applications in Microsoft and its customers. The challenge of dealing with complex JavaScript code led to the need for custom tools to simplify the component development process.
The TypeScript developers sought a solution that did not break existing standards compatibility and cross-platform support. TypeScript development was based on this approach, knowing that the ECMAScript standard provided support for future class-based programming. This results in 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 contains JavaScript syntax, but also provides static type checking and manipulation of Prototype using what looks like a class-based object-oriented programming syntax. Anders Hejlsberg, chief architect of C# and founder of Delphi and Turbo Pascal, was involved in the development of TypeScript.
Two features of TypeScript
The Wikipedia description of TypeScript mentions two key words: static type checking and object-oriented.
The front end comes after a brief type-checking battle between Flow, TypeScript, CoffeeScript, and others. Teams that have practiced TypeScript building large applications have switched almost one-sided from JS to TS because of its high performance in development speed, collaboration costs, and maintenance costs. Typical: Ant-Design, Angular, and Vue-Next switched from the original JS version to the TS version.
Interestingly, why doesn’t React use TypeScript?
Static type checking
The type system in TS is shown below. There are already many tutorials on how to explain the type system, but we won’t go into them here
object-oriented
In early 2018, we refaceted the React front end with TypeScript, and we soon entered a brief honeymoon with TS, with a significant reduction in low-level errors. But then we realized that if that’s what TypeScript is all about, TypeScript is just a toy for us, an advanced toy.
As mentioned earlier, with the growth of code size and business complexity, lack of documentation and unit tests, staff turnover, functional understanding, module conflict, and hard-to-maintain code issues have not disappeared with the emergence of static type checking.
Even as the pattern of container components, presentation components, separation of business logic from UI, etc., has been seeping out, we’ve been experiencing a lot of bugs, new members having trouble understanding it, older members having conflicting modules, and we’ve come to feel that TypeScript isn’t as strong as it claims to be….
TypeScript claims to be good for building large applications, and we’re starting to wonder if that’s true. On GitHub we noticed that the source code for VS Code was written using Typecript. Since TypeScript can handle such complex applications as IDE editors, we expect to find a solution in the source code of VS Code.
At first, we were very confused about this writing method in VSCode, and felt strange to a large number of implements, abstract, and private protect designs. After a lot of goole-oriented programming, we’ve come to notice the second feature of TypeScript: object orientation: encapsulation, inheritance, and polymorphism.
- Encapsulation: Hide data and functional implementation details to prevent external modification and misuse.
- Inheritance: A subclass owns all the properties and methods of the parent class, thus enabling the reuse of the implementation code.
- Polymorphism: The ability to take many different forms or forms of the same action.
To describe object orientation in one sentence: break down functions into single-duty functions, isolate functions through encapsulation, and build large applications through composition.
Object orientation is a big field, and we will briefly discuss the three main features of object orientation through an example in the following section
What does TypeScript do for us
Lookup and location of low-level errors
Rollbar’s 2018 list of the Top10 error types in front-end projects:
Seven of these are typeerrors, which in TypeScript is a grading problem.
The ability to read code is enhanced
There are some handy code reading tips in VS Code
- Hover: Read the interface and display comments
- Go to the source code F12 where the symbol definition is defined, Ctrl + Click.
- Peep Definition Alt + F12: Bring up a peep window that displays the definition of the symbol.
- Go to Reference Shift + F12: Show all references for similar characters.
Intelligent prompts are automatically completed
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: https://www.typescriptlang.or…
Enhanced refactoring capabilities
- Extract function
- Extract variable
The above content can be summarized as:
- Static checking for type errors
- Improved code readability
- Speed of writing
- Improved maintainability
What else does TypeScript give us?
Static type analysis in TypeScript is currently very popular. As for TypeScript’s object-oriented nature, front-end developers are generally not impressed. 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 has not precipitated a complete system of design patterns, design principles and modeling. Using TypeScript’s features allows us to borrow from 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 – timing diagram
UML fills part of the design document and usage document in the form of graphical notation.
Design patterns and design principles
Before the emergence of TypeScript, some object-oriented design patterns could also be simulated in JavaScript. However, due to the lack of interfaces, access qualifiers and abstract classes, encapsulation and polymorphism in Object-Oriented has always been a difficult concept to understand and simulate in JavaScript. TypeScript is a missing link.
While TypeScript has gained popularity in recent years, functional programming has also gained popularity with the likes of Redux. We are not here to argue about the merits of the two programming modes. What we need is to make the application build strong and maintainable. While working with TypeScript, we decided to break out of the box and experiment with object-oriented, which was unfamiliar to the front end. Since object orientation is such a big field, we won’t cover object orientation in detail here. Those who are interested can learn more about object orientation through the design patterns link at the bottom.
TypeScript is better for building large applications
If you ask Java, C# developers, what is the point of static type checking?
The standard answer is “Static typing is better for building large applications”.
A comparison of the progress of TypeScript and JavaScript in developing large applications is shown below:
In our previous TypeScript design intention, we mentioned three common problems that we face in the middle and late stages of large JavaScript projects:
-
There are many type errors and the bug rate is high.
-
Lack of documentation and difficulty for new members to understand application logic.
-
Difficulties of high maintenance cost and poor scalability.
How does TypeScript solve these problems?
First, static type checking allows for early build failures. Once a type mismatch occurs while writing code, it can be detected both before and during the compile phase.
Second, static typing is code friendly. For large applications, with many methods and complex calling relationships, it is impossible for every function to be carefully documented, so static typing is a very important hint and constraint.
Third, UML modeling language, to make up for part of the design documents and documentation, the same set of design patterns, making it easy to understand the function.
Fourthly, with the help of oriented design idea, hide the implementation details and strengthen the cohesion of functions. The control interface exposes granularity to reduce coupling between functions for easy extensibility.
Fifth, static type with IDE reconstruction function, maintenance difficulty coefficient linear decline.
Combining Tyepscript and React with object-oriented OOP and functional programming FP, we summarize the following experience:
- At the level of application design, OOP has a complete set of design system, which can deal with the challenges of module scalability and business complexity.
- At the detailed implementation level, do not OOP for OOP’s sake, OOP is not a panacea.
- FP has unique advantages when dealing with data streams.
Tips for using TypeScript
Our strong recommendation is that TypeScript is a language that contains two parts: static type checking and object-oriented content. If you’ve experimented with the type system and are already familiar with JavaScript’s features, you might want to take a look at object orientation to get a better handle on TypeScript.
Two tips before getting into object orientation:
- Design principles and design patterns are programming paradigms that cross languages and frameworks.
- Strongly typed language brings a new habit of thinking.
conclusion
From what has been said above, we should know:
- TypeScript was designed to deal with the complexity of JavaScript in large applications.
- Two of TypeScript’s main features are static type checking and object-oriented.
- As a strongly typed language, TypeScript has not only a static type system, but also a complete set of technical systems to 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 while embracing functional programming.
Recommended reading
- Why model?
- What is UML Modeling?
- Design patterns
- General principles and methods for reducing software complexity