How to use TypeScript to improve JavaScript programming

TypeScript can help you write better JavaScript code, handle sizable JavaScript projects, and prepare for the arrival of ECMAScript 6 - more importantly, it is almost impossible to get started with TypeScript.

If you had to pick a lingua franca for modern development, most people would probably give JavaScript a vote of approval. Netscape's browser scripting language has continued to grow in its nearly two decades of existence and is now embedded in almost every aspect of our lives. It's embedded deep in the heart of development tools, in server-side implementations like Node.js, and is even ready to take on microservices. JavaScript is also a key component of a number of Microsoft's development technologies. Want to extend Microsoft Office? We have to use JavaScript. Want to write a user interface for Windows 10? JavaScript is still the way to go.

But JavaScript itself is far from perfect, especially when you want to build a large web application with a lot of client-side code. In this case, TypeScript comes to the rescue. TypeScript is a superset of JavaScript that not only adds a lot of features for the upcoming ECMAScript 6, but also can compile the development results into JavaScript code that can be accepted by modern browsers - including Node.js.

TypeScript was designed by a technical team under Microsoft, led by Anders Hjelsberg (whose most well-known achievements should be Turbo Pascal, Delphi and C#). During the design process, this special team of Microsoft made TypeScript a solution that can use a compiler to convert the developed code into JavaScript. You just need to write the code in TypeScript and then pass it to the compiler. The resulting JavaScript conversion result can be run on the server side and can be called by HTML on the client side.

TypeScript also adds a lot of ECMAScript 6 features to JavaScript, including classes and modules. In addition, the team tried to further merge these two languages ​​​​that are originally from the same root to meet the standardized method requirements of ECMAScript 6. This is definitely a wise decision. In this way, you can use TypeScript to develop code that can be accepted by ECMAScript 6, while giving full play to TypeScript’s static typing advantages to improve the level of code security.

If you have used languages ​​like C or Fortran before, you will be familiar with static typing - it allows us to declare types for variables, ensuring that A is always an integer and C is always a string. Although TyperScript's type safety is not as comprehensive as Fortran, it can still define numbers and strings, and significantly improves code debugging using the Boolean type. In addition, TyperScript also provides options for type inference, reducing the possibility of errors - for example, we may assign an object to a string that has not been properly converted. If your code adds two numbers, TyperScript will assume that the result is always a number.

You can also use TypeScript to apply types to arrays or set values ​​for specific variable names using enums. Enums are bidirectional, so you can use them to look up a variable name by number - making it easier to build key/value records in your code. If you're not sure what type you might use, you can set the variable to any, and TypeScript won't infer the type and you won't get errors or warnings. TypeScript types are optional, so you don't have to add types to existing code before compiling or running it, which makes it easier to migrate existing code. You can also start with pure JavaScript code and add types as other TypeScript features are added.

It is important to note that your existing JavaScript code will run as part of the TypeScript application. If you migrate your code to ECMAScript 6 or TypeScript syntax, you can enjoy the various functional advantages of TypeScript. If we use tools that have TypeScript recognition capabilities, we can have support for Visual Studio IntelliSense, which can help us manage types in function calls. In addition, you can also use TypeScript declaration files to quickly add type support to various commonly used libraries and services, such as the extremely popular jQuery library.

Having a typed, JavaScript-like language like this can make class usage and module construction much simpler (very similar to how it's done in AngularJS). The presence of types ensures that all instances of a warning class are called with a string, which makes it easier to build better constructors. You can think of this typed constructor call as a contract that defines how two pieces of code interact - and makes it easier to reuse the same functions across different applications.

Defining types in function calls is the key to creating interface structures, which makes our code more object-oriented. You can explicitly define function elements as interfaces and choose to use more descriptive names in functions without affecting the notifications required by tools such as IntelliSense when checking calls.

Defining types and interfaces in this way makes it easy for multiple developers to manage large JavaScript projects. The "interface-first" contract approach to function and class design allows you to optimize specific parts of your application without affecting the rest, or borrow an interface definition from another developer and apply it directly to other implementations. This approach allows us to use tools such as Git and GitHub in a more efficient way, making it easy to manage multiple code branches in a continuous development model.

If you come from Java or C#, you will be familiar with the class implementation mechanism of TypeScript (and ECMAScript 6). You can create classes within constructors to define the types used in methods and finally use similar methods to handle various internal objects. You can also extend classes by inheritance, adding functionality and overriding methods. More importantly, TypeScript also supports generics, which are common in functions and interfaces - it can help you deliver reusable functions.

Once you understand how TypeScript handles classes and functions, you can start organizing them into modules, where classes and functions can be split across multiple files. This is a very convenient way to organize your code - for example, you can have several files for different functions in your shopping cart. You can then update each submodule separately, using zeroing to improve performance in a specific function without affecting other functions. JavaScript libraries with declaration files can also be used as modules, so you can take advantage of this in your TypeScript applications.

If you want to use TypeScript for your daily development work, the current version of Visual Studio and the new Visual Studio Code cross-platform editing tool both provide support. In addition, the TypeScript website also has an online coding environment, which you can visit here to experience your own coding ideas or view online tutorials.

When introducing JavaScript into large or even very large projects, using TypeScript as an entry point can bring extremely considerable practical significance. TypeScript not only helps everyone complete the coding work under the premise of having full control and following the principle of reusability, but also has an ideal path to ECMAScript 6.