JavaScript tank war game code re-compiled using TypeScript _ basic knowledge

This article mainly introduces the JavaScript tank war game code re-compiled using TypeScript. It is mainly a small Summary Practice for my recent study of TypeScript and is recommended to my friends. I hope everyone will like it. Source code download

I have uploaded the source code to CSDN and no resource points are required: http://download.csdn.net/detail/zgynh#/8565873.

The source code is developed using VS 2013 + TypeScript 1.4. When it is enabled, it is displayed as follows:

JsTankGame 1.0: old tank Games Written in JS.

JsTankGame 2.0: a new game directly translated using TS.

JsTankGame: a new game that is restructured based on 2.0.

Reconstruction steps

Because the old JS game is built by MS Ajax Client Library, and adopts the OOD method to design, coupled with TypeScript can be compatible with all JS Code. Therefore, the use of TypeScript for porting is also relatively simple, mainly to replace the type design code: Class, inheritance, interface and so on.

After completing the above work, you will get the 2.0 version written in TS. Some of the advantages of strong language are realized in the process. Of course, some of TS is not perfect at present (I will talk about it later ).

After a strong version of 2.0 is obtained, it does not end. In order to experience the benefits of strong types for refactoring, I decided to refactor the code structure above this version.

With strong-type code, I can easily analyze each type and method and where it is used. In this way, I can quickly know the dependency between types. I don't know. I was shocked. The previous code written at 1.1 points was originally thought that the type was well designed and the coupling between them should not be very high. However, after the picture is finished, it is almost far away from the imagination. This is the result of Directly Writing code without drawing. See the following two figures:

It can be seen that the relationship between different sprite types is chaotic, and bidirectional dependencies can be seen everywhere. (In fact, because SpriteManager is drawn to another graph, it does not show more complex and chaotic relationships .)

Based on this, I drew a new relationship graph and reconstructed all the code based on this relationship. In this way, the latest version 3.0 is obtained.

The Type diagram of the new version is as follows:

Layering:

Genie:

Manager:

At the code level, the code that is coupled with each other is transplanted to the upper-layer manager. At the same time, define events for the genie to remove the direct coupling between the genie and the Manager.

Advantages and disadvantages of TS first experience

Advantage: Lambda solves the this pointer very well. Chrome and IE can directly debug TypeScript! Errors that cannot be found due to weak types are also found. Because of the renaming, the original code has not been modified. (Row 98 of SpriteManager. js)

Disadvantage: development environment-the code annotation function is not yet integrated and can only be copied manually. Development Environment-currently, Code Snippets is not supported. Development Environment-Keyword code generation is not supported: if, while, swith, matching brackets, etc. Development Environment-Region is not supported ). Syntax-event definition is not supported. Syntax-currently, overload methods cannot be defined for classes. See the SpriteBase. IsCollided method.

Others:

The compiled JS Code is redundant. The Command Space is particularly obvious. No prompt is displayed for rewriting the base class method. The property accessor/setter of the base class cannot be rewritten. You cannot tell which methods are virtual. The read-only attribute cannot be defined in the interface. There are also bugs. (SpriteManager. ts line 93 ). If you define a numeric field, the default value is NaN instead of 0.

Summary

In general, after trial, I feel that TS to the current version 1.4 can be used for formal development of large-scale JS projects. But there are still many things to improve!

Add Chrome and IE debugging TS:

The above is all the content of this article, hoping to help you master typescript.