Type Script Practice
Use Type Script debugger by vscode-ts-code-debugging
Code and Explanation is in.
Is is refered Team Jupeter
1st Class and Calling
• Class_Call : index.ts
import { Person } from './person';
let person = new Person('Bob', 34);
console.log(person.getGreeting());• Class : person.ts
export class Person {
constructor(
public name: string,
public age: number) {
}
getGreeting() {
return 'Hi ' + this.name;
}
}2nd Hello World
• Hello TypeScipt : index.ts
class Greeting {
greet():void {
console.log("Hello Type Script!!")
}
}
var obj = new Greeting();
obj.greet();3rd Scope
• Scope : index.ts
// global variable
var global_num = 12;
class Numbers {
// can't write action like console.log();
// because class has only property (variable and function)
// class variable
num_val = 13;
// static field
// call every where
static sval = 10;
storeNum(): void {
// function variable
var local_num = 14;
}
}
console.log("Global num: " + global_num);
console.log(Numbers.sval);
var objs = new Numbers();
console.log("Class num: " + objs.num_val);
// Error : obj.sval4th Conditional
• Conditional : index.ts
var num:number = -2;
// conditional
var result:string = num > 0 ?"positive":"non-positive";
console.log(result)5th Loops
• Loops : index.ts
var i:number = 1;
while (i <= 10) {
console.log(i);
if (i % 5 == 0) {
console.log("The first multiple of 5 between 1 and 10 is : " + i);
// break out this while
break;
}
i++;
}
console.log("the end");
var num:number = 0;
var count:number = 0;
for(num=0; num<=20; num++){
if (num % 2 == 0) {
// move next loops -> don't work after continue in loops
// => don't work count++ / console.log
continue
}
count++
console.log(num);
}
console.log(" The count of odd values between 0 and 20 is : " + count);6th Variable
• Variable : index.ts
// Type Script variable is let not Var!!!
let fullName: string = 'Artyrie';
let age: number = 23;
// single quote ''
// double quote ""
// back quote ``
// Why use back quote?
// It works well even it has special string like '
// and It can call variable that can calculate in ``
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;
console.log(sentence);7th Function
• Function : index.ts
function disp_details(id:number, name:string, mail_id?:string): void {
console.log("ID:", id);
console.log("Name", name);
if(mail_id != undefined){
console.log("Emial Id", mail_id);
}
// parameter id can't used out function
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");8th Interface
• Interface : index.ts
// user defined data type
interface LabelledValue {
label: string;
}
// use user defined data type labelledValue
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label)
;
}
// Why can use unexpected parameter size?
// It doesn't occur error but, can't use 'labelledObj.size' in printLabel
// Because interface LabelledValue doesn't have size.
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
console.log(myObj);
interface SquareConfig {
// variable?: type <- opional
// exits or not exits
// All possible.
color?: string;
width?: number;
}
console.log("Second Example");
// after parameter {} <- return
function createSquare(config: SquareConfig): {color: string; area: number}{
// default value
let newSquare = {color: "white", area: 100};
// if color exists
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
// It can work because ptional property 'width'
let mySquare = createSquare({color: "black"});
console.log(mySquare.color);
// return default value area: 100
console.log(mySquare.area);9th Class basic
• Class : index.ts
// class has Capital first alphabet
class Greeter {
greeting: string;
// constructor execute when class called
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("World!");
console.log(greeter.greet());
console.log(greeter.greeting);10th Inheritance Class
• Inheritance Class : index.ts
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
// define default of parameter : 0
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
let dog1 = new Animal("Mong");
console.log(dog1.move());
console.log("1st end");
// Dog inherit Animal
class Dog extends Animal {
constructor(name: string) {
// what is super?
// call parents constructor
super(name);
}
// define parameter with value
// same to super move. default value : 5
// Inherited priority is more high than parent
move(distanceInMeters = 5) {
console.log("Meong...");
// Difference of super
super.move(distanceInMeters);
}
}
let dog2 = new Dog("Navi");
console.log(dog2.name);
console.log(dog2.move());
console.log("2nd end");
console.log(dog2.name);
console.log(dog2.move(10));
console.log("3rd end");11th Type; Public, Private, Protected
• Type; Public, Private, Protected : index.ts
class Animals {
// protected name: string => Only use in class and Inhertied class
protected name: string;
// private name: string => Only use in class
// If you want to get private value, make function in class
// Why use? making a limitation that helps not to twist code.
// public name: string => use everywhere that object animal defined
age: number = 10;
constructor(theName: string) {
this.name = theName;
}
animalCall() {
this.name = "hi";
}
}
let animal = new Animals("Goat");
class Rhino extends Animals {
constructor() {
super("Rhino");
// If private name: string => can't call this.
console.log(this.name);
}
}
let rhino = new Rhino();
class Persons {
protected name: string;
constructor(name: string) {
this.name = name;
}
}
class Employee extends Persons {
private department: string;
constructor(name: string, department: string) {
super(name)
this.department = department;
}
public getElevatorPtich() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`
}
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPtich());12th Getter Setter Method
• Getter Setter Method : index.ts
let passcode = "secret passcode";
class Employees {
private _fullName: string;
// Getter Method
// To get private property
get fullName(): string {
return this._fullName;
}
// Setter Method
// To modify private property
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
}
}
let employee = new Employees();
// Can't use fullName();
// Because it used by set and get method.
// it is called by this form
employee.fullName = "Bob Smith";
console.log(employee.fullName);13th StaticProperty
• StaticProperty : index.ts
// Using interface is formal way.
//interface Point {
// x: number;
// y: number;
//}
class Grid {
// static property : what is used by class
// => class field that uses in class
static origin = {
x: 0,
y: 0
};
//calculateDistanceFromOrigin(point: Point) {
calculateDistanceFromOrigin(point: {x: number; y: number}) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor (public scale: number) {}
}
let grid1 = new Grid(1.0);
let grid2 = new Grid(5.0);
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 40, y: 50}));14th AbstractClass
• AbstractClass : index.ts
// Doesn't make instance and implement
// implement => Action of function.
// Thus don't declare implement in function.
// Thus abstract, we can't use 'department = new Department();'
abstract class Department {
constructor(public name: string) {}
printName(): void {
console.log("Department name: " + this.name);
}
// doesn't have implement
abstract printMeeting(): void;
}
class AccountingDepartment extends Department {
constructor() {
super("Accounting and Auditing");
}
printMeeting(): void {
console.log("The Accounting Department meets each Monday at 10am.");
}
// Parents doesn't have this function.
// So, declare is possible but we can't use this.
generateReports(): void {
console.log("Generating accountung reports...");
}
}
let department: Department;
//Error
//department = new Department();
department = new AccountingDepartment();
department.printName();
department.printMeeting();
//Error
//department.generatingReports();15th Function Type
• Function Type : index.ts
// function add(x: any, y: any) {
// any type is used by all type.
// but it destoryed typescript's goodness.
// Named function
// add(~): number << number is function's type.
// => Function's type is return value's type.
function add(x: number, y: number): number {
return x * y;
}
// Anonymous function
// => doens't have name.
let myAdd = function(x: number, y: number) {
return x + y;
};
console.log(myAdd(2, 3));16th Optional Parameter
• Optional Parameter : index.ts
// lastName? <- optional parameter.
// Exits or none. all possible.
// function buildName(fistName: string, lastName="Artyrie"): string {
// Defining parameter's default value to lastName="Artyrie"
function buildName(firstName: string, lastName?: string): string {
return firstName + " " + lastName;
}
// ...parameter: string << doesn't # of limit arguments
function buildNames(firstName: String, ...restOfName: string[]): string {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
return firstName + " " + restOfName.join(" ");
}
let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
console.log(result1);
let employeeName = buildNames("Joseph", "Samuel", "Lucas");
console.log(employeeName);17th Generics
• Generics : index.ts
// Use Generic for use more 2 function's type.
// Thus T, we can use String type and Number
function identity<T>(arg: T): T {
return arg;
}
let output = identity("Artyrie");
let output2 = identity(35);
let output3 = identity<string>("Art");
console.log(output);
console.log(output2);
console.log(output3);18th Enum
• Enum : index.ts
// to use not value, use word (Constance)
// instead number, use word
enum Driection {
Up, // Auto 0 if Up=1, declare 1~4
Down, // Auto 1
Left, // Auto 2
Right, // Auto 3
}
console.log(Driection.Left);4th Iterators for List
• Iterators for List : index.ts
let list = [4, 5, 6];
// index number
for (let i in list) {
console.log(i); // "0", "1", "2"
}
// index value
for (let i of list) {
console.log(i); // "4", "5", "6"
}20th Module; Import and Export
• Module; Import and Export : index.ts
// Global value => Module value
// validate is maden function name
import validate from "./StaticZipCodeValidator";
let strings = ["Hello", "98052", "101"]
strings.forEach(s => {
console.log(`"${s}" ${validate(s) ? "matches" : "does not match"}`);
});Module; Import and Export : StaticZipCodeValidator.ts
const numberRegexp = /^[0-9]+$/;
// export : in this function -> other module(other file and program) can use.
// by export, what variable is declared in this file can't out this file.
// So, if you want to use in this file, you have to use import like index.ts
// default : who person use this function can make function name
export default function (s: string) {
// test method is in Regexp.
return s.length === 5 && numberRegexp.test(s);
}21th Namespaces
• Namespaces : StaticZipCodeValidator.ts
interface StringValidator {
isAcceptable(s: string): boolean;
}
let lettersRegexp = /^[A-Za-z]+$/;
let numberRegexp = /^[0-9]+$/;
// implements? not inherit
// but follow form
class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
let strings = ["Hello", "98052", "101"];
// object. key form => [s: string] / value form => StringValidator
// => Associative Array
let validators: { [s: string]: StringValidator; } = {};
validators["Zip code"] = new ZipCodeValidator();
validators["Letters only"] = new LettersOnlyValidator();
// strings value
for (let s of strings) {
// validators index => key
// Thus validators 2 keys and value, rotate 2 class
for (let name in validators) {
let isMatch = validators[name].isAcceptable(s);
console.log(`'${ s }' ${ isMatch ? "matches" : "does not match" } '${ name }'.`);
}
}Namespaces : StaticZipCodeValidator2.ts
// Reduce confused big program
namespace Validation {
export interface StringValidators {
isAcceptables(s: string): boolean;
}
let lettersRegexps = /^[A-Za-z]+$/;
let numberRegexps = /^[0-9]+$/;
// implements? not inherit
// but follow form
export class LettersOnlyValidators implements StringValidators {
isAcceptables(s: string) {
return lettersRegexps.test(s);
}
}
export class ZipCodeValidators implements StringValidators {
isAcceptables(s: string) {
return s.length === 5 && numberRegexps.test(s);
}
}
}
let stringss = ["Hello", "98052", "101"];
let validatorss: { [s: string]: Validation.StringValidators; } = {};
validatorss["ZIP code"] = new Validation.ZipCodeValidators();
validatorss["Letter Only"] = new Validation.LettersOnlyValidators();
for (let s of stringss) {
for (let name in validatorss) {
let isMatch = validatorss[name].isAcceptables(s);
console.log(`'${ s }' ${ isMatch ? "matches" : "does not match" } '${ name }'.`);
}
}