in a nutshell
Seiji Villafranca
github.com/SeijiV13
seijivillafranca.com
by
Seiji Villafranca
github.com/SeijiV13
Senior Developer, KPN Netherlands
Microsoft MVP
Community Lead, AngularPH, Azure Philippines
Author
seijivillafranca.com
Talks
What the heck is
History of TypeScript
programming language which was developed by Microsoft. It is free, open source and superset of the JavaScript
October 2012
Anders Hejlsberg,
the lead architect of c#,
version 0.8
Absence of IDE support
Eclipse (plugin by Palantir)
Text Editor (Sublime etc.)
Tyepscript 0.9 supports Generics
Tyepscript 1.0
2013
2014
Superset Languages
Prototypes
Dynamic Types
TypeScript
Generics
Interfaces
ES6
Types
A sample code here
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
let user = new Student("Jane", "A", "Doe");Transpiler that provides JS the features of typing,
Object Oriented Programming
Catches Error and provides fixes before running code
Transpiler
Target: ES6/ES5
Browsers don't understand Typescript
Now on 5.9.2
https://www.npmjs.com/package/typescript
Why
highlights errors at compilation time during the time of development
namespace concept by defining a module
strongly typed or static typing
Features
Features
Types
Any
Built-in types
User Defined Types
number, string, boolean, void, null, undefined
Arrays, Enums, Classes, Interfaces
Features
Union Types
ability to combine one or two types
var val:string|number
val = 12
val = "This is a string"
Features
Interfaces
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var employee:IPerson = {
firstName:"Jim",
lastName:"Blakes",
sayHi: ():string =>{return "Hello!!!"}
}
using Iperson Interface
Features
Classes
class Car {
//field
engine:string;
//constructor
constructor(engine:string) {
this.engine = engine
}
//function
disp():void {
console.log("Engine is : "+this.engine)
}
}
Features
Objects
var object_name = {
key1: “value1”,
key2: “value”,
key3: function() {
//functions
},
key4:[“content1”, “content2”]
};
Features
Access Modifiers
Public
Private
Protected
within class in subclass outside class
Yes
Yes
Yes
Yes
No
No
Yes
No
Yes
Features
Access Modifiers
class Employee {
public empId : number;
private empName: string;
protected age: number;
}
class Person Extends Employee {
// age is accessible here since Person is a subclass
getAge() {
return this.age;
}
}
// outside class
let employee = new Employee();
// empId is only accessible here
employee.empId
Features
Accessors
get and set keyword
set fullName(newName: string) {
const name = newName.split(" ");
this.firstName = name[0];
this.lastName = name[1];
}
let passcode = "secret passcode";
class Employee {
private firstName: string;
private lastName: string;
}
get fullName(): string {
return `${firstName} {lastName}`;
}
// getter
// setter
Features
Overloading
multiple methods with the same name
The function name is the same
The number of parameters is different in each overloaded function.
The number of parameters is the same, and their type is different.
The all overloads must have the same return type.
Features
Overloading
multiple methods with the same name
class Hero
{
function add(a:string, b:string): string;
function add(a:number, b:number): number;
//Function Definition
function add(a: any, b:any): any {
return a + b;
}
}
Features
Inheritance
create a new class from an existing class
Code Reusability
class Hero {
name: string;
constructor(name: string) {
this.name = name;
}
}
class SpiderMan Extends Hero {
powers: Array<String> = [];
constructor(name: string, powers: Array<String>) {
super(name);
this.powers = powers;
}
}
Features
Namespaces
logical grouping of functionalities
//namespace file: employeeSalary.ts
namespace employeeSalary {
export function calcSalary() {
// implementation
}
}
<reference path="./employeeSalary.ts">
employeeSalary.calcSalary();
Features
Modules
also used for grouping of related variables, functions, classes and inerfaces, also known as the external module
import { className } } from 'module';
export class EmployeeName {
}
// creating a module using the export word
// importing a module to another file
Features
Other Features
Decorators
Duck-Typing
Map
Arrow Function
Where is TypeScript now?
Famous Frameworks /Libraries
Community
https://www.typescriptlang.org/community
IDE for TypeScript
Other features of TypeScript you may not know
might be useful in Angular?
Private Fields
class Hero{
#name = Peter Parker;
constructor(public name: string) {}
}
If you need private properties at runtime, we can prepend a # in our variable
Nullish Coalescing ??
use the ?? for checking the variable lets say:
checks the value if it is === to undefined or null
x ?? y
will return x if x is not === null and undefined
will return y if x is === to null or undefined
let coffee = "kopiko";
return coffee ?? false; // returns value kopiko since it is not null and undefined;
Optional Chaining ?
Common way
used for property checking if undefined or null upon being accessed
if(obj1 && obj1.prop1 && obj.prop1.prop2) {
}
if(obj1?.prop1?.prop2) {
}
Optional Chaining ?
Exponentiation **
Common way
shorhand for Math.pow(), works with the BigInt() values
Math.pow(2, 4) // result 16
2 ** 4 // result 16
Exponentation **
Numeric Separators _
for number readablity
const number_one = 912345678;
const number_two = 912_345_678;
console.log(number_one=== number_two); // true
Assignment Operators **=, &&=, ||=, ??=
// a &&= b, also equivalent to:
if (a) {
a = b;
}
// a ||= b, also equivalent to:
if (!a) {
a = b;
}
// a ??= b, also equivalent to:
if (a === null || a === undefined) {
a = b;
}
Start Coding
https://www.typescriptlang.org/docs/
Start Coding
https://www.typescriptlang.org/play
Hey I'm a Mentor!
github.com/SeijiV13
seijivillafranca.com
fb.com/seiji.villafranca
Introduction to TypeScript
By Seiji Ralph Villafranca
