[TypeScript] What is TypeScript?
What is TypeScript?
JavaScript + Type = TypeScript
TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly. Writing types can be optional in TypeScript, because type inference allows you to get a lot of power without writing additional code.
Why do we use TypeScript rather than JavaScript?
TypeScript is more stable.
Unlike JavaScript, TypeScript code is more stable and easier to refactor. This makes it much easier for developers to avoid errors and rewrite. Types create a quick feedback loop that invalidates most of the stupid errors that can sneak into your JavaScript codebase and corrects all the minor mistakes when writing and refactoring new code.
TypeScript is more explicit.
Making the type explicit is focusing on exactly how the system is built and how different parts of the system interact with each other. In large systems, you need to be able to abstract the rest of the system with context in mind. Type allow we to do that.
TypeScript VS JavaScript
TypeScript :
- TS is an object-oriented scripting language.
- Dependent language (compiled to JavaScript).
- Compiled language, cannot be run directly in the browser.
- Can be entered statically. Better structured and concise.
- Created by Microsoft by Anders Hejlsberg (C# designer) and maintained by Microsoft.
- Fair choice for complex projects
JavaScript :
- JS is an object-oriented scripting language.
- Independent language (can interpret and execute).
- Interpreted language running directly in the web browser.
- Input dynamically.
- It is not limited by the type system, so it is more flexible.
- It is created by Brendan Eich (Netscape) and maintained by the European Computer Manufacturers Association (ECMA).
- Suitable for working on small and simple projects
Advantages of TypeScript
- Static type-the advantage of catching errors during compilation
- Tool support-By providing type information to tools such as IDE, high-level code assist, type check, and refactoring can be supported, and support of such tools is essential for large-scale projects.
- Strong object-oriented programming support-Developers familiar with class-based object-oriented languages such as Java and C# can perform JavaScript projects, which has the effect of lowering the barrier to entry.
- ES6 / ES NEXT support-Considering browsers that do not fully support ES6 at present, it is advantageous for TypeScript to safely introduce useful functions of the new specification in the current situation where compilers such as Babel must be used.
Establish a development environment
Since TypeScript files (.ts) do not work in the browser, they must be converted to JavaScript files using the TypeScript compiler. This is called compilation.
Let’s install the TypeScript compiler to build a TypeScript development environment and see how to use the TypeScript compiler.
Node.js installation
To install Node.js, go to the Node.js website (http://nodejs.org) .
When you connect to the Node.js website, you will see two download buttons. You can download the LTS version on the left and the Current version on the right. Long Term Supported (LTS) version guarantees stable support in the long term. The Current version provides the latest features, but it may not be stable as an update is occurring. So, let’s download the LTS version.
Click the “14.16.0 LTS Recommended For Most Users” button to download and install an installation file suitable for your operating system. It npm is also installed at the same time . Node.js is installed in the following directory. The installation location may change depending on the version.
Windows: C:\Program Files\nodejs\node.exe
Mac: /usr/local/bin/node
When the installation is complete, print the version of Node.js and npm in the terminal (command prompt on Windows) to check whether the installation was successful.
Install the Node.js version manager n to update the installed Node.js.
Installing and using the TypeScript compiler
When Node.js is installed, npm is also installed. Install TypeScript globally using npm in the terminal (command window in case of Windows) as follows.
The TypeScript compiler (tsc) transpiles TypeScript files (.ts) into JavaScript files.
Compilation generally means converting source code into byte code. Since the TypeScript compiler converts TypeScript files into JavaScript files, transpiling is a more appropriate expression than compilation.
Write the following file to execute transpiling. For reference, the extension of TypeScript files is .ts.
Let’s run transpiling. Specify the name of the file to be transpiled after the tsc command.
As a result of transpiling execution, a JavaScript file (app.js) is created in the same directory.
When the transpiling is successful and the JavaScript file is created, run the person.js transpiled using the Node.js REPL.
Let’s test simple TypeScript programming again.
Let’s create greeting.ts file.
Let’s run transpiling. Specify the name of the file to be transpiled after the tsc command. At this time, the extension .ts can be omitted.
As a result of transpiling execution, a JavaScript file (person.js) is created in the same directory.
At this time, the transpiled JavaScript version of person.js is ES3. This is because the default version of JavaScript for TypeScript compilation is ES3.
If you want to change the JavaScript version , use — target or -t for the compile option . Currently, the JavaScript versions supported by tsc are'ES3' (default),'ES5','ES2015','ES2016','ES2017','ES2018','ES2019', and'ESNEXT'. For example, to execute transpiling with ES6 version, add the following option.
When the transpiling is successful and the JavaScript file is created, run the person.js transpiled using the Node.js REPL.
Specifying options each time is cumbersome, so create a tsc option configuration file.
Note that tsconfig.json is ignored if a file name is specified after the tsc command.
To apply tsconfig.json, transpiling is performed as follows.
If the file name is not specified as above, all TypeScript files in the project folder are all transpiled. Let’s write two TypeScript classes that have an inheritance relationship.
When you’re done writing the code, transpile the two TypeScript files at once with the following command:
— watch Alternatively -w, if you use the option, when the contents of the file to be transpiled are changed, transpiling is automatically executed by detecting the change.
Alternatively, you can add the watch option to tsconfig.json as shown below.
Let’s change student.ts to see if the watch function works.
For compiler options, see TypeScript Compiler Options .
Test file : https://github.com/jonghyunpark85/TypeScriptTest.git
