"Seven months of my TypeScript language"

Source: Internet
Author: User

quickly use romanysoft LAB Technology to implement HTML development Mac OS apps and sell them to the Apple App Store.   "HTML development mac OS App video tutorial"
    • Tudou Sync Update: http://www.tudou.com/plcover/VHNh6ZopQ4E/
    • Baidu Network disk synchronization: Http://pan.baidu.com/s/1jG1Q58M
    • Share [Chinese documentary] The Internet age Http://pan.baidu.com/s/1qWkJfcS
  Official QQ Group: ( apply to join, say I recommend it )
    • App Practice 434558944
    • App Learning Exchange 452180823
 

Starting in December 2012, I used TypeScript as the primary language for a large-scale enterprise project. The project is going to be released next month, and I want to share some of the details, including how our team uses TypeScript, and the workflow that makes the project work.

What is typescript

Typescript is an open source language and compiler developed by Microsoft that can run on node. js. This language evolved on a ECMAScript6 basis and absorbed some of the features that generated JavaScript classes and interfaces. The compiler for Typescript is written in the Typescript language and can run within any JavaScript-compatible program, and it is also published as a toolkit for node. js. So the language eventually generated is still JavaScript script.

Evaluation

During the November 2012, we found that the development tools we had chosen and the trials for Typescript did bring a lot of convenience to the team. At first, we tried a series of languages such as Haxe,dart,coffescript, but we were eventually possessed by the ECMASCRIPT6 feature JavaScript compiler: Tyepscript moved. What we expect is to use JavaScript as a development language, but at the same time we want to inject some structural framework into our development process, and we want to rely on the editor for some error correction and validation. So in fact we finally have to choose between JavaScript and typescript. Based on this, the team made several small prototypes of the project and quickly discovered some of the following interesting features:

Verification: Typescript is able to compile and let us verify that some of the code is reused in different modules. When declaring variable types and defining statement methods, we are able to effectively cross-validate all call/get/set using all the modules. If an attribute is assigned to the Bbox.controls.image class, only the picture instance or its subclasses can satisfy the compilation condition at compile time.

Error: Typescript compiler can provide very detailed error, if provide additional class and interface information, the error content will be more detailed.

Weight reduction: Typescript classes and interfaces evaporate at compile time to generate pure JavaScript scripts.

ECMAS6 (ES6): Typescript adds classes and interfaces based on the ES6. It allows us to use the latest JavaScript syntax rules to write programs and to add ES3,ES5 tags at compile time, making them compatible with ES3,ES5 standards. This makes the code easier to organize.

Build Process: One part of our initial testing and testing process was the use of ant to create a team process. By properly debugging the environment, developers can synchronize with the SCM (schema Deployment) and build a local server with all the code components (Codepakages) for development and debugging. The entire creation process moved into the Less,requirejs,uglify2,typescript, template processing, and server generation.

Use

In the months following the assessment, we built a stable team workflow based on Typescript and profited a lot from it. Process Creation (buildprocess) is a process that is critical in our development process and is used every day. Based on Typescript, our daily workflow is basically as follows:

    • Updating from the SCM
    • Run ' antall ' ==> create all + run Local server
    • Run ' Antdev ' or ' Antts ' ==> incremental creation
    • Check the errors in the creation process or test them in the browser
    • Clean up the bug and repeat the steps above

I personally like this model of operation and I find that we spend much less time in the browser testing phase than in previous JavaScript projects. Since some interface/type/syntax errors have been checked during the build process, we have reduced the amount of errata for such errors during the browser testing phase. Once everyone is familiar with Typescript's debugging process, we have greatly improved our productivity, which was not experienced in the previous development process. It took 5 seconds to compile, but eventually it removed the whole meaningless class that didn't work. Sounds a little unacceptable. This preventative debugging approach saves us about 2 months, and the quality of the code is greatly improved.

At the time of our development, the quality and content of the typescript definition file was not ideal. Defining a file allows you to define the interface type of JavaScript externally, but your code must follow the definition file exactly at compile time. Since the start of this project, we have been using the definitelytyped project to retouch 180 definitions for some of the major or non-major JavaScript libraries. The team finally used the definition file on Require,jquery,backbone,bootstrap,underscore and Easeljs when the process was created. Now add the definition file for typescript, you can just add the code in your main.ts file.

You can also add some external libraries to typescript, depending on the same method. To some extent the definition files, interfaces and Typescript classes operate in a similar way. To simplify the process of creating a process, we combine all of these invocation procedures into a single init.ts file so that when the compiler works, it can automatically load all the typescript code needed for that application. Even those classes that need to be called by first calling the module can be invoked here, so that the classes will generate a module file for use at compile time, in advance. Note The syntax for the "Exportclass" in the code of this external module, which tells the compiler to call the file as an external module, while the compiler identifies "-MODULEAMD" that causes the compiler to format the module as either AMD or COMMONJS

In addition to this, Typescript also has a very elegant integration of code features. Each class and variable is exported to a path outside the entity of the browser window for global access. We use Bbox as a namespace for all classes and variables, while providing support for input, and you can easily create a good namespace for your own applications. The above modules are included in the "Bbox.controls" and can be found in the runtime to be exported to the bbox.controls,bounds. Given that we have more than 60 classes available, we have maximized the use of this modular system and have worked very well in the development process. You can use this method to freely export and classify your own variables or all of your classes without having to let all the variables belong to a class. Because of the limitations of categories and permissions, the categorical output variable is very useful for a single variable within a module. As you get involved with categories and modules, the way you use JavaScript can change, and it's hard to create poor practices. With a high-level compiler that can monitor the rewriting of an entity by an array or a very special category, you can develop it in a different way using JavaScript, typescript as a language with its unique working patterns. It's not exactly JavaScript, but it all contains all of the original JavaScript features.

Through a series of development practices I have been the source of my own. The transformation of the development strategy is realized by refactoring the code . Since sometimes it is necessary to examine the code that is affected by changes in different parts, I begin to believe in the behavior of the compiler itself in terms of consciously altering variable classes, interfaces, and namespaces. I will not modify the results after compiling, and refactor the code as needed. This in many ways enables me to handle large amounts of code efficiently. The compiler saved me a lot of debugging.

As for my development environment, I chose SUBLIMETEXT2+TYPESCIRPT syntax highlighting, although other groups chose Jetbrians for the members. Without objection, I realized that sublime still provides a good typescript development environment, even without the auto-complete function. Since the typescript compiler itself has incremental compilation capabilities and rich IDE integration capabilities, it may take more time to prove exactly which Sublime/edge/jetbrains is the most suitable development tool.

Finally, when I fell in love with the use of typescript (and of course, I will continue to use it), I found a daunting place. Many times, when you plunge into the compilation environment, the compiler prevents you from invoking a method or variable because the input information is not available. Whenever we find ourselves fixing bugs manually, we use associative array syntax (associativearraysyntax) to solve this problem. For example: No matter what kind of classification, foo[' myproperty ']foo[' MyMethod '] () should be able to get you involved in Foo's MyProperty and MyMethod properties. This may seem a bit magical, but just remember that it's possible to use associative array syntax (associativearraysyntax) at any time, and you always have a place to go.

Finally, I enclose some summary data in the project development process:

    • 63 Classes of Typescript
    • 12 Runtime Libraries (LIBS) (Underscore,require,bootstrap,jquery,backbone,easeljs ...)
    • Create all processes at once, spents 8 seconds
    • Create all development processes at once, spents 5 seconds
    • 149Kb-size Runtime files and 411Kb-sized class files
Summary

It was a great pleasure to develop with typescript in the last 7 months. In my previous development experience, I used actionscript/es4, but with a similar structure, I quickly adapted to typescript, while maintaining JavaScript's elegant code simplicity. In many ways, I've found that the use of typescript has really improved our team's code quality and deadlines. I don't think I'm a Microsoft typescript, but it does make me shine. It is the best and most easily accepted web development tool I have been exposed to in the last three years. I look forward to being able to use more projects in the future and be able to participate in the development of the language/compiler.

This week I will be in San Francisco build to understand some features of TypeScript0.9, next month I will be in Senchacon and 360Stack.

I love typescript!.

Ted

Original link: Ted Patrick translator: Bole Online-bole Online reader
Link: http://blog.jobbole.com/43675/

RELATED LINKS
    • TypeScript Details: Please click here
    • TypeScript: please click here.

"Seven months of my TypeScript language"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.