Try it here
Subscribe
TypeScript Learning

What is TypeScript

what_is_typescript

TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript.

TypeScript is JavaScript for application-scale development.

TypeScript is JavaScript plus some additional features.

ECMASCRIPT5 + ECMASCRIPT6 + Additional Features = TypeScript

Features

  • All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.
  • Compiled TypeScript can be consumed from any JavaScript code. TypeScript-generated JavaScript can reuse all of the existing JavaScript frameworks, tools, and libraries.
  • Any valid .js file can be renamed to .ts and compiled with other TypeScript files.
  • TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on. Unlike its counterparts, TypeScript doesn't need a dedicated VM or a specific runtime environment to execute.
  • JavaScript is an interpreted language.The TypeScript transpiler provides the error-checking feature. TypeScript will compile the code and generate compilation errors, if it finds some sort of syntax errors. This helps to highlight errors before the script is run.
  • JavaScript is not strongly typed. TypeScript comes with an optional static typing and type inference system through the TLS (TypeScript Language Service). The type of a variable, declared with no type, may be inferred by the TLS based on its value.
  • TypeScript supports type definitions for existing JavaScript libraries. TypeScript Definition file (with .d.ts extension) provides definition for external JavaScript libraries. Hence, TypeScript code can contain these libraries.
  • TypeScript supports Object Oriented Programming concepts like classes, interfaces, inheritance, etc.

Environment Setup

Typescript is an Open Source technology. It can run on any browser, any host, and any OS. You will need the following tools to write and test a Typescript program -

A Text Editor

You can write your TypeScript source code in any text editor like Notepad, Notepad++, vi, vim etc.Editors used may vary with Operating Systems.

The source files are typically named with the extension .ts

The TypeScript Compiler

The TypeScript compiler (tsc) converts the instructions written in TypeScript to its JavaScript equivalent. It itself a .ts file compiled down to JavaScript (.js) file.The TSC (TypeScript Compiler) is a source-to-source compiler (transcompiler / transpiler).

The TSC produces an equivalent JavaScript source code from the Typescript file given as an input to it. This process is termed as transpilation. However, the compiler rejects any raw JavaScript file passed to it. The compiler deals with only .ts or .d.ts files.

Running TypeScript(Javascript)

Node.js:

Node.js is an open source, cross-platform runtime environment for server-side JavaScript. Node.js is required to run JavaScript without a browser support. It uses Google V8 JavaScript engine to execute code. Node is available here :- node.js

To verify if the installation was successful, enter the command node -v in the terminal window.

Type the following command in the terminal window to install TypeScript.

npm install -g typescript

IDE

Typescript can be built on a plethora of development environments like Visual Studio, Sublime Text 2, WebStorm/PHPStorm, Eclipse, Brackets, etc.

Compile and Execute a TypeScript Program

  1. Write below code in file a file and save it as test.ts
    var msg:string = "Welcome to Typescript Learning" 
    console.log(msg)
  2. Open command and below command to compile the TypeScript
    tsc test.ts
    The corresponding .js(test.js) file will be created after compilation.
    To generate declaration file as well, compile with --declaration option
    tsc --declaration test.ts
  3. Run the genrated .js file using below command
    node test.js
    Multiple files can be compiled at once.
    tsc file1.ts, file2.ts, file3.ts

Compiler Flags

The following table lists some common flags associated with the TSC compiler. A typical command-line usage uses some or all switches.

S.No. Compiler flag & Description
1. --help
Displays the help manual
2. --module
Load external modules
3. --target
Set the target ECMA version
4. --declaration
Generates an additional .d.ts file
5. --removeComments
Removes all comments from the output file
6. --out
Compile multiple files into a single output file
7. --sourcemap
Generate a sourcemap (.map) files
8. --module noImplicitAny
Disallows the compiler from inferring the any type
9. --watch
Watch for file changes and recompile them on the fly

Identifiers in TypeScript

Identifiers are names given to elements in a program like variables, functions etc. The rules for identifiers are -

  • Identifiers can include both, characters and digits. However, the identifier cannot begin with a digit.
  • Identifiers cannot include special symbols except for underscore (_) or a dollar sign ($).
  • Identifiers cannot be keywords.
  • They must be unique.
  • Identifiers are case-sensitive.
  • Identifiers cannot contain spaces.

TypeScript - Keywords

The following table lists some keywords in TypeScript.
break as any switch
case if throw else
var number string get
module type instanceof typeof
public private enum export
finally for while void
null super this new
in return true false
any extends static let
package implements interface function
new try yield const
continue do catch

Whitespace and Line Breaks

TypeScript ignores spaces, tabs, and newlines that appear in programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

TypeScript is Case-sensitive

TypeScript is case-sensitive. This means that TypeScript differentiates between uppercase and lowercase characters.

Semicolons are optional

Each line of instruction is called a statement. Semicolons are optional in TypeScript.A single line can contain multiple statements. However, these statements must be separated by a semicolon.

Comments in TypeScript

  • Single-line comments ( // ) - Any text between a // and the end of a line is treated as a comment
  • Multi-line comments (/* */) - These comments may span multiple lines.

Object Orientation

TypeScript supports these object oriented components

  • Object - Any entity that has state and behavior is known as an object. For example: chair, pen, table, keyboard, bike etc. It can be physical and logical.
  • Class - Collection of objects is called class. It is a logical entity.
  • Method - Methods facilitate communication between objects.

Example

class welcome { 
   print():void { 
      console.log("Welcome to Typescript Learning world!!!") 
   } 
} 
var obj = new welcome(); 
obj.print()

The above example defines a class welcome. The class has a method print (). The method prints the string "Welcome to Typescript Learning world!!!" on the terminal. The new keyword creates an object of the class (obj). The object invokes the method print ().

On compiling, it will generate following JavaScript code.

var welcome = /** @class */ (function () {
    function welcome() {
    }
    welcome.prototype.print = function () {
        console.log("Welcome to Typescript Learning world!!!");
    };
    return welcome;
}());
var obj = new welcome();
obj.print();

Output

Welcome to Typescript Learning world!!!

See also : TypeScript Programmning Language

Writer profile pic

Uk01 on May 09, 2020 at 12:10 am


If you like dEexams.com and would like to contribute, you can write your article here or mail your article to admin@deexams.com . See your article appearing on the dEexams.com main page and help others to learn.



Post Comment

Comments( 0)

×

Forgot Password

Please enter your email address below and we will send you information to change your password.