TypeScript
is an open-source object-oriented language developed and maintained by Microsoft
. It is a typed superset of JavaScript that compiles to plain JavaScript. Will learn/review the new keywords-let, const
and function/object syntax
also shows how the new class, interface, module syntax
can be used with JavaScript library like Angular, React, Node. TypeScript is pure object oriented with classes, interfaces, modules, import, export and statically typed like C# or Java. The popular JavaScript framework Angular 2.x and above versions are written in TypeScript. Mastering TypeScript can help developers and programmers to write object-oriented programs and have them compiled to JavaScript, both on the server side and client side.
TypeScript
introduces us to the newest language features that can be used in JavaScript code. Due to this, I assume you have some working knowledge/understanding of JavaScript. If you haven't, will recommend watching JavaScript Essentials Tutorial for beginners. Basic knowledge of JavaScript is required, having a good understanding of OOP concepts and advanced JavaScript is an added advantage. Finally, you will be using a bit of Angular.js, React.js, and Node.js but nothing that requires deep/advanced knowledge.
- Course Introduction
- Introduction to Typescript
- Setting up Typescript Development Environment
- Typescript latest features-concepts
- Reference
- Whats Next Step?
Hi All, I'm Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional
, I wanna welcome you to Typescript fundamentals beginners tutorial
. In this course/tutorial will go over how to start with using the Typescript features right with the bang. Will dive into the specifics of Typescript and new features it includes. We'll look at new keywords, syntax, and operators that can be used to simplify code structure. At the end we'll take a look at class, module syntax in Typescript and how that can be used immediately with very popular JavaScript library/frameworks like Angular, React, Node, etc. Let us explore and learn some pretty exciting stuff so let's go ahead and get started with Typescript
.
Typescript
will introduce us to the newest language features that can be used in JavaScript code - The Modern JavaScript.
This course is for anyone and everyone, Almost everyone! who is interested in boost skills and further career - by learning new latest programming/coding standards/features/syntaxes/keywords introduced in the latest version of JavaScript to become a hi-tech developer. Programmers/Developers coming from any language wants to make a career in Web Technologies can learn Typescript.
- Typescript is Open source/free, exciting, dynamic new development language, library from
Microsoft
- TypeScript is a strongly typed, object oriented, compiled language
- It was designed and developed by
Anders Hejlsberg (designer of C#) at Microsoft
Typed superset of JavaScript
which Compiles to plain JavaScript- It consists of variables Data Types string, number, boolean, etc. but it is optional
- One can write safer/meaningful/easily maintainable/scalable code
- The developer can Identify mistakes during development/compilation step (scope of the variable, function parameter, variable datatype mismatch, etc.)
- Angular latest version uses typescript as an official/primary development language
Typescript = ECMAScript 5 6 7 Latest features
- TypeScript is JavaScript plus some additional features, Typescript is a language that is meant to be compiled into JavaScript:
Typescript => JavaScript
OR.ts => .js
- Typescript got a similar syntax to JavaScript
- Typescript integrates easily into JavaScript projects
- TypeScript is extended JavaScript and superior to its other counterparts like
CoffeeScript
andDart
programming languages in a way that extends JavaScript - Currently, it is used in many large projects and many libraries written/developed fully in Typescript:
Google Angular 2.x
and greater version,WinJS
(The Windows library for JavaScript)
- The TypeScript transpiler provides the error-checking feature
- TypeScript comes with an optional static typing and types inference system through the
TLS (TypeScript Language Service)
- Prevent bugs (data type)
- TypeScript supports Object Oriented Programming concepts like classes, interfaces, inheritance, etc.
- Increases the code quality, readability and makes it an easy to maintain and refactor the code base
- Also integrated with task runners like Grunt & Gulp
- Rapid growth and use
Language
− syntax, keywords, and type annotationsTSC TypeScript Compiler
− converts TypeScript to JavaScript equivalentTLS TypeScript Language Service
− Supports editor operations like static typing and type inference system, statement completion, code formatting, etc.
- Install node from https://nodejs.org/en/
- Open up your terminal window/command prompt (
cmd, git bash, node command prompt
) to run some of node commands - Verify and check node installation/version by using command:
node -v
- install typescript globally by using command:
npm install -g typescript
- Verify typescript Installation by command:
tsc
(tsc = typescript compiler) - Verify typescript Installation and version both with command:
tsc -v
ortsc --version
- Install and use some text editor or IDE (Integrated Development Environment) like
Notepad , Sublime Text, Adobe Brackets, Visual Studio Code
to type code
- Create a new folder to store all typescript/.ts example files
- Create a first .ts file and type basic javascript/typescript or valid javascript code
- Now by using node/npm command compile .ts file into .js, command:
tsc file.ts
- Use type annotation to eliminate any data variable type error:
let name:string = 'Dinanath';
- We can use/run .js files in browser or in NodeJs (node command to run any .js file:
node file.js
), NodeJs can not run/understand .ts file - Use automatic compilation method using watch mode:
tsc file.ts --watch
Note: Anything that is JavaScript code/programm is legal TypeScript
Syntax & Example:
Typescript
// by default typescript consider all files in a folder as a module, so variables defined in one file will be checked on the fly and throws an error: Cannot redeclare block-scoped variable - to solve issue use export {}
export {};
// write valid javascript, basic javascript/typescript
console.log('Welcome to typescript');
// ------------------------------
//type annotation to eliminate any data variable type error
let name:string = 'Dinanath';
//name=123; // error
console.log('My Name is: ' name);
Write and test Typescript without download or install anything: https://www.typescriptlang.org/play
- Alternatively, Simply we can add/install a
Google Chrome Extention
namedScratch JS
, an add-on for DevTools which integrates both the Traceur and Babel transpilers, allowing us to test out the new JS features coming with ES6/ES2015 Scratch JS
also supportsCoffeeScript
,LiveScript
and more compile-to-JS languages will be added soon- To install
Scratch JS
as aGoogle Chrome Extention
:- In google chrome web store https://chrome.google.com/webstore/category/extensions?hl=en-GB or at https://www.google.com/ search for Scratch JS
- From searched result select Scratch JS and click -> ADD to Chrome
- Once extension installed properly, open developer tool (F12, Fn12, Right Click on web page Inspect), click on ScratchJS - at left side type ES6 code and right side check ES5 output
Syntax is nothing but a set of rules for writing programs. A TypeScript program simply composed of:
- Statements and Expressions
- Variables
- Functions
- Comments
- Modules
- A variable is
container to store/hold the data/information
- A variable is a kind of data holder where we can store some value for programming or calculation purpose
- A JavaScript variable is simply a
name of the storage location (named containers/named storage)
for data - Variables are symbolic names for values
- Variables are used to store data of different types like a string of text, numbers, boolean values like true/false, an array of data, etc.
- The data or value stored in the variables can be set, updated, and retrieved whenever needed
- TypeScript follows the same variable declarations rules as JavaScript, Variables can be declared using:
var
,let
, andconst
- Variables are declared traditionally using the keyword:
var
keyword - Many things what we do in plain JavaScript works exactly same with typescript (like declaring a variable with
var
) - Vanilla JavaScript
var
andscope
are tricky, they hoist also it hasglobal
andfunctional
scope but notblock
level scope - var keyword variables
can be re-declared
n number of times - The
assignment operator (=)
is used to assign value to a variable, like this:var varName = value;
orvar firstName = 'JavaScript';
- Example: Variables are like
box or an envelope
which we use toorganize various kinds of stuff
and put alabel
on each box or an envelope - Example: Variable declaration and assignment is just like
Maths & Algebra: x = 10;
and in JavaScript we writevar x = 10;
Syntax & Example:
Typescript
export {};
var name: string = 'Dinanath';
var age: number = 35;
var isDeveloper: boolean = true;
console.log('My details are : ' name ' ' age ' ' isDeveloper);
var name = 'Dino';
console.log('My name is : ' name);
- Typescript encourages programmers to use
let
andconst
keyword-based variables let
andconst
variables haveblock
level scope also theycan not be re-declared multiple times
- To
deal with scope
in JavaScript we have new keyword namedlet
used to declare variables - We use the let keyword to
create block scoping
in JavaScript in locations where we weren't able to do so before Let keyword block scope
- let keyword variables exist only insideblock { }
scope- let keyword variables cannot be used before the declaration (
never hoisted
) - let keyword variables
can not be re-declared
Syntax & Example:
Typescript
export {};
let name: string = 'Dinanath';
let age: number = 35;
let isDeveloper: boolean = true;
console.log('My details are : ' name ' ' age ' ' isDeveloper);
// let variables not be re-declared
// let name: string = 'Dino';
- Typescript encourages programmers to use
let
andconst
keyword-based variables let
andconst
variables haveblock
level scope also theycan not be re-declared multiple times
- Like the let keyword, we can also use
const
an alternative for declaring variables - const is short for
constant
allows us to set constant variables whichshouldn't be reassigned
- We can not change the value of const variable, so use const to define
fixed set of values
also toprotect the values
of certain variables - Creating/Using an existing const variable again or re-assigning value to const variable generates
TypeError, SyntaxError
- the const keyword is used to define/create
variable with read-only
constants - const must have some value
while declaration/initialized
- const value is fixed,
not to change/re-assigned
in future - const is also having
block scope
- the const value
never hoisted
- However, we can still change object properties or array elements
Syntax & Example:
Typescript
export {};
//const name; //error - const must have some value `while declaration/initialized`
// const name;
const name: string = 'Dinanath';
console.log('My name is : ' name );
//error - const value is fixed, `not to change/re-assigned` in future
// const name: string = 'Dino';
- If variables have
one time assignments (fixed value, not changed in future)
use const - If value re-assignments/
value updation
requires uselet
- Const variables need value at the time of definition;
const name='Dinanath';
- Let variables can be defined/initialized with empty value;
let name;
- Const variables are
immutable, not changeable
variables - Let variables are
mutable, can be changed or re-assigned
- JavaScript is not a typed language, However, TypeScript is a typed language, where we can specify the type of the variables, function parameters and object properties like a number, string, boolean, etc.
- We can specify the type using
: Type
after the name of the variable, parameter or property, It is advisable to useannotation method to specify data type while declaring the variable
(Example: let firstName: string = 'Dinanath') - Typescript does not allow to assign a different type of data to a variable
Type annotation
method helps to eliminate any errors related to variable data type mismatch- The
any
data type is the supertype of all types in TypeScript which denotes adynamic type
- Static Type checking errors (Data type mismatch error)
- Getting accurate intellisense help for specific data type (Example: specific data type variable will show only specific/related methods and properties etc.)
Syntax & Example:
Typescript
export {};
let isCompleted: boolean = false;
let id: number = 101;
let firstName: string = 'Dinanath';
let lastName: string = 'Jayaswal';
console.log(`User Details: ${firstName} ${lastName} ${isCompleted} ${id} `)
let fullName;
function showFullName(_fn: string ,_ln: string ) {
let fullName = _fn ' ' _ln;
console.log(`My FullName: ${fullName}`);
}
showFullName('Dino','Jas');
- Typescript introduced a new data type named
any
- A variable with
any
type can hold value with any data type (like the first variable holds string than assign number or boolean type) - For data type
any
there is no compile-time checking - The
any
data type is the supertype of all types in TypeScript which denotes adynamic type
Syntax & Example:
Typescript
let data1:string = 'Data1'
//error - string type can not accept number or other data
// data1 = 50;
// any data type variable can store any type of value, there are no data checking
let data2:any = 'Data2';
data2 = 50;
data2 = true;
data2 = ['Hi','Hey','Good','Hello'];
console.log(data2);
- Arrays in Typescript works in the same way as they work in JavaScript
- Same as JavaScript, TypeScript allows us to deal with arrays of values
- There are two ways to write/declare an array:
- let cities: string[];
- let arrFrameworks: string [] = ['JavaScript','jQuery','Angular','React'];
- let cities: Array<string>
- let arrLanguages: Array<string> = ['C','C ','Java','Ruby','Phthon'];
- In the above example, we declared an array of strings by assigning it the string type (Now TypeScript will make sure the array contains only strings)
- let cities: string[];
Syntax & Example:
Typescript
export {};
let arrFrameworks: string [] = ['JavaScript','jQuery','Angular','React'];
console.log('arrFrameworks:',arrFrameworks);
let arrLanguages: Array<string> = ['C','C ','Java','Ruby','Phthon'];
console.log('arrLanguages',arrLanguages);
- Typescript provides a new special type of array called
Tuples which can store multiple data types based values
- Tuples represent a heterogeneous collection of values
(multiple types of values in one collection/collection of values of various types)
- Tuples enable storing multiple fields of different types
- let personDetail: [string, number] = ['Dinanath', 35];
Syntax & Example:
Typescript
export {};
let arrFrameworksDetails: [string,number] = ['JavaScript',7.0];
console.log('arrFrameworksDetails:',arrFrameworksDetails);
console.log('arrFramework Name:',arrFrameworksDetails[0]);
console.log('arrFramework version:',arrFrameworksDetails[1]);
- Enums are used to define a set of named constants which can be used to document intent or to create a set of different cases (collection of related values that can be numeric or string values)
- Enums defined or start with
enum variableName
keyword - There are three types of enums:
- Numeric enum (number-based enums i.e. they store string values as numbers)
- String enum (initialized with string values)
- Heterogeneous enum (contain both string and numeric values)
Syntax & Example:
Typescript
export {};
enum RGBColor { Red, Green, Blue };
console.log('RGBColor:', RGBColor);
console.log('RGBColor.Green:', RGBColor.Green);
let colorBlue: RGBColor = RGBColor.Blue;
console.log('colorBlue:', colorBlue);
enum Cities1 { Mumbai = 10, Delhi = 20, Kolkata = 30, Chennai = 40, Bangalore = 50 }
console.log('Cities:', Cities1);
console.log('Bangalore:',Cities1.Bangalore);
enum Cities2 { Mumbai = 'M', Delhi = 'D', Kolkata = 'K', Chennai = 'C', Bangalore = 'B' }
console.log('Cities:', Cities2);
console.log('Bangalore:',Cities2.Bangalore);
- Defining variable type is optional, but sometimes Typescript infer or decide the type of variable while initialization only
- let details; // no type infer or decided/finalized as no value provided
- let details = 'Human'; // string (hover on variable-details to know/get data type)
- Once the data type is inferred or finalized by Typescript we cant assign other type values to it (will get an error
not assignable
) - Types are inferred by TypeScript compiler when:
- Variables are initialized
- Default values are set for parameters
- Function return types are determined
Syntax & Example:
Typescript
export {};
let details; //data type not infered
console.log('type of details:', typeof(details));
let cityName = 'Human'; // hover on cityName to check type details let cityName: string
console.log('type of cityName:', typeof(cityName));
//Error - Type '90' is not assignable to type 'string'.ts(2322), cant assign number to string data type
//cityName = 90
- Type assertion allows Programmer to set the type of a value and tell the compiler not to infer
- Type assertion can be used when Programmer have a better understanding of the type of a variable (we may know a more accurate type) than what TypeScript can infer
- Type Assertion is similar to type casting in other languages
as
keyword is used for Type Assertion, or before value specify the type
Syntax & Example:
Typescript
export {};
let id = 100;
let employeeID = <number> id;
let name = 'Dinanath';
let fName = 'Dinanath';
console.log('fName data type:',typeof(fName));
fName = fName as string;
console.log('fName data type:',typeof(fName));
- Functions are the primary fundamental building block in JavaScript
- A function is a set of statements to perform a specific task
- Functions make the code more readable, maintainable, and reusable
- Typescript functions help to specify the data type of function parameters as well as a function return type
- In JavaScript every parameter is assumed to be required if no parameter passed - throws an error
- With Typescript, we can denote/mark/treat parameter optional by adding
? question mark
symbol - ES6 allows function parameters to have/specify simple and intuitive default values
- It simply means that if no arguments are provided to function call these default parameters values will be used
Syntax & Example:
Typescript
export {};
// specify data types of parameters
function sum(num1: number, num2: number) {
console.log(num1 num2);
}
sum(10, 20);
//error - only numbers allowed
// sum('one','two');
// specify data types of parameters as well function return type
function showGreetings(message: string): string {
return message;
}
let message1 = showGreetings('Welcome to Typescript');
console.log(message1);
Syntax & Example:
Typescript
export { };
// specify data types of parameters, use ? to denote optional parameters
function sum(num1: number, num2?: number) {
if (num2) {
console.log(num1 num2);
} else {
console.log(num1);
}
}
sum(10, 20);
sum(100);
Syntax & Example:
Typescript
export { };
// specify data types of parameters, use ? to denote optional parameters, one can also specify default values
function sum(num1: number, num2: number = 50) {
console.log(num1 num2);
}
sum(10, 20);
sum(100);
- Interfaces are the most flexible way to define the type of variables or properties of an object
- The
interface
keyword is used to declare an interface - The interface is a structural/syntactical contract that defines the types, contract (rule) in your application
- It defines the types and syntax for classes to follow, Classes derived from an interface must follow the structure provided by their interface
- Any optional property defined in an interface are represented with
? question mark
sign (city?: string)
Syntax & Example:
Typescript
export {};
interface Person {
firstName: string;
lastName: string;
age?: number
}
function showDetails (_person: Person) {
console.log(`Person Details: ${_person.firstName} ${_person.lastName} ${_person.age}`);
}
let person1 = {
firstName: 'Dinanath',
lastName: 'Jayaswal',
}
showDetails(person1);
let person2 = {
firstName: 'Dino',
lastName: 'J.',
age: 40
}
showDetails(person2);
- TypeScript is object-oriented JavaScript
- In OOPS (Object Oriented Programming Structure) a class is a blueprint for creating objects
- JavaScript has been primarily a functional programming language works mainly on prototype-based inheritance, Functions are used to build reusable components
- TypeScript introduced classes to avail the benefit of object-oriented techniques like interfaces, inheritance, encapsulation, and abstraction
- Typescript helps to write constructors with shorter syntax, prefix parameters with access modifiers
- Class-based inheritance needs
extends
keyword and main class properties and method can be accessed withsuper
keyword
Syntax & Example:
Typescript
export {};
class Greetings {
personName: string;
constructor(name: string) {
this.personName = name;
}
showGreet() {
console.log(`Welcome, have a great Day ${this.personName}!`)
}
}
let person1 = new Greetings('Dinanath');
console.log('person1.personName:',person1.personName);
person1.showGreet();
Syntax & Example:
Typescript - class based inheritance
// class-based inheritance
class Person extends Greetings {
constructor (pName: string) {
super(pName);
}
doTask() {
console.log('Person doing some task');
}
}
let person1 = new Person('Sagar');
console.log('person1.name:',person1.name);
person1.showGreet();
person1.doTask();
- Access modifiers are keywords that set the accessibility/availability/visibility of properties and methods
- There are three types of access modifiers in TypeScript:
- public -
- A public data member has universal accessibility, Data members in a class are public by default
- By default, all members of a class in TypeScript are public
- All the public members can be accessed anywhere without any restrictions
- private -
- The private access modifier ensures that class members are visible only to that class and are not accessible outside the containing class
- In case An external class member tries to access a private member, the compiler throws an error
- protected -
- The protected access modifier is similar to the private access modifier, except that protected members can be accessed using their deriving classes
- A protected data member is accessible by the members within the same class as that of the former and also by the members of the child classes
- public -
Syntax & Example:
Typescript
export {};
class Greetings {
public name: string;
private privateName: string;
protected protectedName: string;
constructor(_name: string) {
this.name = _name;
}
showGreet() {
console.log(`Welcome, have a great Day ${this.name}!`)
}
}
let greet1 = new Greetings('Dinanath');
console.log('greet1.name:',greet1.name);
greet1.showGreet();
// error - private property/variable not available outside
// console.log(greet1.privateName);
console.log(`// ------------------------------`);
// class-based inheritance
class Person extends Greetings {
constructor (pName: string) {
super(pName);
}
doTask() {
console.log('Person doing some task');
// error - private property/variable not available outside
// console.log(greet1.privateName);
// protected property/variable can be accessed in derived/child class
console.log('this.protectedName:',this.protectedName);
}
}
let person1 = new Person('Sagar');
console.log('person1.name:',person1.name);
person1.showGreet();
person1.doTask();
- Decorators are experimental features in Typescript and may not be part of feature releases
- Decorators are a special type of declarations, metadata attached to classes, methods, and properties
- Decorators use the form
@expression
, whereexpression must evaluate to a function
that will be called at runtime with information about the decorated declaration - To enable experimental support for decorators, enable the
experimentalDecorators
compiler option either on thecommand line
or intsconfig.json
: - command line:
tsc --target ES5 --experimentalDecorators
- tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true
}
}
- Decorators begins with
@ (at the rate sign)
Syntax & Example:
Typescript
@Component({
selector: 'user',
templateUrl: 'user.component.html',
styleUrls: ['user.component.scss']
})
- Official website: http://www.typescriptlang.org/
- Source code: https://github.com/Microsoft/TypeScript
Many Congratulations! You have done it. Thank you for joining me for Typescript fundamentals for beginners
. I hope you will start checking/testing and incorporating these features into your code right away. I hope now you have a solid understanding of Typescript new features and usability. Your next step could be looking into Typescript documentation. Now you are fully up to date and set to start with any latest javascript framework/library like Angular, React, Node, Vue.