TypeScript Basic Syntax
Installations
TypeScript can be installed very easily. Installation of TypeScript is possible using an npm module, a NuGet package, or a Visual Studio extension.
Npm Module
npm install typescript commond command are used to install typescript in our system.
npm install typescript --save-dev
When install typescript successful then check its version using following command.
tsc --version
Here tsc indicate typescript compiler. There are many options are available to compile typescript source code file.
tsc --help
Version 3.5.3
Syntax: tsc [options] [file...]
Examples: tsc hello.ts
tsc --outFile file.js file.ts
tsc @args.txt
tsc --build tsconfig.json
Options:
-h, --help Print this message.
-w, --watch Watch input files.
--pretty Stylize errors and messages using color and context (experimental).
--all Show all compiler options.
-v, --version Print the compiler's version.
--init Initializes a TypeScript project and creates a tsconfig.json file.
-p FILE OR DIRECTORY, --project FILE OR DIRECTORY Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
-b, --build Build one or more projects and their dependencies, if out of date
-t VERSION, --target VERSION Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
-m KIND, --module KIND Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
--lib Specify library files to be included in the compilation.
'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 'es2018' 'es2019' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint'
--allowJs Allow javascript files to be compiled.
--jsx KIND Specify JSX code generation: 'preserve', 'react-native', or 'react'.
-d, --declaration Generates corresponding '.d.ts' file.
--declarationMap Generates a sourcemap for each corresponding '.d.ts' file.
--sourceMap Generates corresponding '.map' file.
--outFile FILE Concatenate and emit output to single file.
--outDir DIRECTORY Redirect output structure to the directory.
--removeComments Do not emit comments to output.
--noEmit Do not emit outputs.
--strict Enable all strict type-checking options.
--noImplicitAny Raise error on expressions and declarations with an implied 'any' type.
--strictNullChecks Enable strict null checks.
--strictFunctionTypes Enable strict checking of function types.
--strictBindCallApply Enable strict 'bind', 'call', and 'apply' methods on functions.
--strictPropertyInitialization Enable strict checking of property initialization in classes.
--noImplicitThis Raise error on 'this' expressions with an implied 'any' type.
--alwaysStrict Parse in strict mode and emit "use strict" for each source file.
--noUnusedLocals Report errors on unused locals.
--noUnusedParameters Report errors on unused parameters.
--noImplicitReturns Report error when not all code paths in function return a value.
--noFallthroughCasesInSwitch Report errors for fallthrough cases in switch statement.
--types Type declaration files to be included in compilation.
--esModuleInterop Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
@ Insert command line options and files from a file.
The TypeScript source code file is saved with the .ts extension. Here .ts indicates the typescript. tsc filename.ts command are generate a .js file. and this file are execute by node in terminal. Suppose source file contain following code.
var num : number = 20;
console.log(num);
Save this file by code.ts. Here code is file name and .ts indicates typescript file. Open a terminal where this code file is stored. And type following command.
kalki@code:/source$ tsc code.ts
This command are create a new code.js file. Which is execute by node.
kalki@code:/source$ node code.js
20
See other way to Installation typescript.
Comments
The comment is used to describe the logic of code explanation and short description. Typically, the programmer uses commentary to warn about the functioning of the alert. Which proves useful for oneself and others. There are two types of comments are supported in typescript. Single line comment and multi line comment.
// Declare variables
let a = 10;
let b = 20;
/*
Addition of two numbers a and b.
And assign into sum variable.
*/
let sum = a + b;
// Display calculate sum
console.log(sum); // 30
Single line comments are used to provide short description it starts with // (two forward slash). Scope of this comment are based on single line.
Multi line comments are used to describe long descriptions that may be in more than one lines. This is start with (backslash star symbol) /* and end with */ (star backslash).
Hello Word
In the programming language, displaying results and messages are very important. Because there is no benefit to the program without producing results. console.log() method are used to display message on console screen.
// Display message in console screen
console.log("Hello Word");
console.log("Number", 123);
This method is capable of handling N number of parameters. Here the parameter places a single space between the values and insert a new line at the end of the result. This method are capable to display object value variable value and constant literals.
Template string is used to include regular expressions, variables and expression statement of inside the string.
var person : string = "willey";
// Template string `${}`
console.log(`Hello ${person}`); // Hello willey
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment