Our TypeScript tutorial is intended for experienced programmers and those who have never used TypeScript before.
Microsoft created and maintained TypeScript, an open-source, object-oriented programming language, under the terms of the Apache 2 license. The idea came from Anders Hejlsberg, a vital team member that created the C# language. TypeScript compiles to standard JavaScript, a strongly typed superset of JavaScript. It is a programming language for developing JavaScript applications that can run on any browser, host, or operating system. TypeScript does not run in the browser. A compiler is required to compile and create a JavaScript file. TypeScript is similar to JavaScript for ES6 but has some additional features.
We cover all the concepts that will help you learn TypeScript in our TypeScript tutorial.
TypeScript cannot run in the browser. A compiler must compile the file into a JavaScript file that can be run directly in the browser. If the file ends in “.ts,” it is a TypeScript source file. You can use it if you rename a “.js” file to a “.ts” file. The TSC (TypeScript Compiler) compiler converts TypeScript code (.ts files) to JavaScript (.js files).
TypeScript: Features
Classes, interfaces, inheritance, modules, and other object-oriented language features are included in the object-oriented TypeScript programming language.
- TypeScript allows us to write code for both the client and server sides of the development process.
- TypeScript is compatible with all JavaScript elements and JavaScript libraries. It enables developers to use TypeScript code already written in JavaScript. The JavaScript libraries, tools, and frameworks are easily accessible from this page.
- JavaScript is TypeScript, meaning valid.js JavaScript code can be converted to TypeScript by changing the.js extension to.ts and compiling with TypeScript files.
- TypeScript is portable because it runs on various operating systems, devices, and browsers. It can be used in any environment that supports JavaScript. It does not require any specific virtual machine to function.
- DOM Manipulation: TypeScript, like JavaScript, can add or remove elements from the DOM.
- Because no browser directly executes TypeScript code, it is simply a JS language. JavaScript is always used at the beginning and end of a TypeScript application. So, to use JavaScript with TypeScript, all we need to know is JavaScript. TypeScript code is compiled and converted into JavaScript before it can execute it. This is known as “trans-piled.” Having……………….
TypeScript Elements
1.Language
It contains elements of the TypeScript programming language. It includes syntax, keyword definitions, and annotations for types.
2.TypeScript Compiler
The TypeScript compiler converts a TypeScript program into JavaScript code (TSC). It also converts our TypeScript code to JavaScript code and checks and parses the types.
A browser cannot directly execute TypeScript code. As a result, the TypeScript program must be rewritten from the ground up in JavaScript, allowing code to run now in the browser. TypeScript includes a TypeScript compiler program called “tsc” to accomplish this. The latest TypeScript compiler has ES6 support by default. The source code of any module, including ES6, SystemJS, AMD, and others, is compiled.
For instance, typing $ tsc helloworld.ts/ changes the TS file hello-world to the helloworld.js file.
How the compiler is configured
The TypeScript compiler’s configuration is saved in the tsconfig.json file, which has the following format:
declarations form
TypeScript source code can be compiled to create a declaration file with the extension.d.ts. This file serves as a conduit for the JavaScript components to communicate. The keyword declares must appear before every root-level definition in a file ending in.d.ts. It specifies that TypeScript will not generate any code, ensuring that the selected item will exist at runtime. The declaration file in JavaScript libraries such as jQuery enables IntelliSense.
3. Language Services in TypeScript
By providing information, the language service enables editors and other tools to provide better help features such as IntelliSense and automated refactoring. It demonstrates the presence of a second layer surrounding the core-compiler pipeline. Colorization, statement completion, signature help, and the ability to format and outline code are some standard editor features.
The TypeScript language is divided into three primary layers. Each of these levels is made up of parts or sublayers.
- Language
- TypeScript’s compiler
- The Language Services for TypeScript
How to Install TypeScript?
In this section, we’ll go over how to install TypeScript, what must be done before installing TypeScript, and the various methods for doing so.
TypeScript can be configured in two ways:
- TypeScript can be installed using the Node.js Package Manager (npm).
- Install the TypeScript plug-in for your IDE (Integrated Development Environment).
You Must Like: How to Crack Spring Interview Questions: A Comprehensive Guide
TypeScript installation using the Node.js Package Manager (npm)
Step–1 Install Node.js.
It was used to install TypeScript on our computer.
Step–2 Install TypeScript.
Step–3 To ensure the installation went smoothly, enter the command $ tsc -v into the Terminal Window.
Install the TypeScript IDE plug-in.
Step–1 You can install an IDE such as Eclipse, Visual Studio, WebStorm, Atom, or Sublime Text if necessary.
Step–2: Install a TypeScript plug-in.
Using the official compiler, we can also run our script online. To finish, click the link below. https://www.typescriptlang.org/play/index.html
TypeScript Types
TypeScript includes an optional Type System, which allows you to work with data types. TypeScript data types are classified as follows.
Static Types
A static type is defined as “at compile time” or “without running a programme” in type systems. The types of variables, parameters, and objects in a statically typed language are known to the compiler as the code is written. When the compiler checked the type, it used this information.Static types is divided into following two categories-
1.User defined DataType
TypeScript can handle the following types of user-defined data:
- Array
- Class
- Touple
- Enum
- Interface
- Functions
2. Built-in
These are the following built in data types in TypeScript:
- Number
- Void
- String
- Null
- Boolean
Generic
Generic is used to create a part that can work with multiple data types rather than just one. It enables the creation of parts that can be reused. It ensures that the programme can be changed and expanded over time. Generics are used by TypeScript’s type variable T>, which stands for types. Generic functions and non-generic functions are both of the same types. The type arguments come first, just like in function declarations.
Designers and Decorators are data types associated with a class declaration, method, property, accessor, or argument. It allows adding annotations and a meta-programming syntax to classes and methods. It is used in conjunction with the “@” symbol.
Decorator
A decorator is an unfinished feature that may be changed in the next release. To use the decorator, we must enable the experimentalDecorators compiler option either on the command line or in our tsconfig.json file.
Conclusion
TypeScript is a JavaScript syntactic superset with static typing. TypeScript adds syntax on top of JavaScript, allowing developers to add types. Because TypeScript is a “Syntactic Superset,” it has the same base syntax as JavaScript but adds something to it.
