Things to know before learning Angular

Photo by Jack Millard on Unsplash

Angular မလေ့လာခင် အရင်ဆုံးသိထားသင့်တဲ့ အကြောင်းအရာများထဲကမှ တချို့အရေးကြီးတာတွေကိုပဲ ရွေးပြီးဖော်ပြထားပါတယ်။

JavaScript

Angular မှာ Typescript အသုံးပြုပြီး ရေးသားရပါတယ်။ TypeScript ဆိုတာကလည်း JavaScript ကို type သတ်မှတ်နိုင်အောင် ပြုပြင်ထားတဲ့ language ဖြစ်ပါတယ်။

ဒါကြောင့် JavaScript ကိုသိပြီဆိုရင် TypeScript လည်းရေးနိုင်မှာ ဖြစ်ပါတယ်။

JavaScript ကိုမှ ES6 ကိုအများဆုံး အသုံးပြုရမှာဖြစ်လို့ ES6 sentences တွေကိုအဓိကထားပြီး ဖော်ပြသွားပါမယ်။

Node JS

JavaScript စမ်းသပ်ရေးသားဖို့အတွက် Node JS ကိုအသုံးပြုသွားမှာပါ။ မရှိသေးရင် install လုပ်ထားပါ။ ပြီးရင်အခုလို file တစ်ခုဆောက်လိုက်ပါ။

touch index.js
node . //run command

index.js ကိုဖွင့်ပြီး code တွေ ရေးနိုင်ပါပြီ။

Block-scope Variable

JS မှာ variable တွေကြေငြာဖို့ var Keyword ကိုသုံးပါတယ်။ ဒီလိုကြေငြာတဲ့ variable သည် Function Scope ဖြစ်ကြပါတယ်။ ဥပမာ —

function app() {
 if (true) {
  var i = 10;
 }
 return i;
}
console.log(app()); // 10

ဒီလိုအလုပ်လုပ်တာကြောင့် function ထဲမှာ variable မှားယွင်းသုံးတဲ့ ပြဿနာတွေဖြစ်တတ်ပါတယ်။ ဒါကြောင့် ES6 မှာ let နဲ့ const ကိုထည့်သွင်းပေးထားပါတယ်။ သူတို့တွေက Block Scope အမျိုးအစားတွေ ဖြစ်ကြပါတယ်။

let

function app() {
 if (true) {
  let i = 10;
 }
 return i;
}
console.log(app()); // ReferenceError: i is not defined

Block Scope ဖြစ်တာကြောင့် if block အပြင်ကခေါ်တဲ့အတွက် error တက်သွားမှာပါ။

const

Constant variable တွေကြေငြာဖို့သုံးပါတယ်။ သတ်မှတ်ထားတဲ့ တန်ဖိုးကို အမှတ်တမဲ့ ပြန်မပြင်မိအောင်သုံးနိုင်ပါတယ်။

const aa = 1;
aa = 2; // TypeError: Assignment to constant variable.

ဒါပေမဲ့ Object ကို const ထားမယ်ဆိုရင် object property တွေကိုတော့ ပြင်လို့ရနေမှာပါ။

const person = {
 name: 'Mg Mg',
 age: 12
}
person.name = 'Aung Aung';
console.log(person.name); //Aung Aung

Template String

String ထဲမှာ variable နဲ့ စာတွေ ရောပြီးရေးချင်ရင် သုံးရပါတယ်။

let name = "Mg Mg";
let greet = `Hello ${name}`;

Falsy Value

အောက်ပါတန်ဖိုးတွေကို Boolean ပြောင်းရင် false ရစေပါတယ်။

0
""
null
undefined
NaN

Truthy Value

Falsy Value မဟုတ်ရင် Truthy Value လို့မှတ်ယူနိုင်ပါတယ်။ ဥပမာ

1
-2
" "
"false"
3.14

String to Number

String ကနေ number ပြောင်းချင်ရင် string ရှေ့မှာ + တပ်လိုက်ပါ။

+'5' // 5
+'a' // NaN

Comparison Operator

Double Equal သည် တန်ဖိုးတူရင်ရပြီ၊ type တူစရာမလိုဘူး ဆိုရင်သုံးနိုင်တယ်။ Triple Equal ကိုတော့ တန်ဖိုးအပြင် type ပါတူမှရမယ် ဆိုတဲ့ အခြေအနေမျိုးမှာ သုံးတယ်။

5 == "5" //true
5 === "5" // false

Default & Rest Parameters

Function တွေမှာ default value ပေးချင်ရင် အခုလို ပေးနိုင်ပါတယ်။

function add (a, b = 0){
  return a + b;
}
add(5) // 5

Param အားလုံးကို လက်ခံပေးစေချင်ရင် Rest Parameter နဲ့ အခုလို လက်ခံနိုင်တယ်။

function add (a, b, ...c){
  console.log(c);
}
add(1, 2, 3, 4, 5) // [3, 4, 5]

Function Expressions

အောက်ပါအတိုင်း function တွေကိုကြေငြာနိုင်တယ်။

function greet() {
  console.log("Hello");
}
let greet = function greet() {
  console.log("Hello");
}
let greet = function() {
  console.log("Hello");
}
let greet = () => {
  console.log("Hello");
}
let greet = () => console.log("Hello");
let greet = _ => console.log("Hello");
let add = (a, b) => {
 return a + b;
}
let add = (a, b) => a + b;

Array Methods

array နဲ့ပတ်သက်တဲ့ methods တွေအများကြီးထဲကမှာ တချို့ကိုပြပေးထားပါတယ်။

let animals = ["Dog", "Cat", "Bird"];
animals.push("Cow"); // array နောက်ဆုံးကထည့်
animals.pop(); // array နောက်ဆုံးကထုတ်
animals.unshift("Ant"); // array ရှေ့ဆုံးကထည့်
animals.shift(); // array ရှေ့ဆုံးကထုတ်
animals.join(","); // Dog,Cat,Bird
animals.indexOf("Cat"); // 1
ဘယ်ကဘယ်ထိ return ပြန်
animals.slice() // array အသစ်တစ်ခု return ပြန်ပေး
ဘယ်ကဘယ်ထိဖျက်
animals.splice(2, 1) // ["Dog", "Cat"]

Empty an array

array တစ်ခုကို clear လုပ်ချင်ရင် အလွယ်အားဖြင့် ယခုလိုလုပ်နိုင်ပါတယ်။

let aa = [1, 2, 3];
aa = [];

သို့သော် တခြား variable တစ်ခုခုက reference လုပ်ထားတယ်ဆိုရင်တော့ ဒီလိုလုပ်ခြင်းက reference ပြုတ်သွားစေပါတယ်။

let aa = [1, 2, 3];
let bb = aa;
aa = [];
aa; // Output is []
bb; // Output is [1, 2, 3]; // aa က empty ဖြစ်သော်လည်း bb ကမဖြစ်ပါ။

ဒီလိုမဖြစ်စေချင်ရင် အောက်ပါအတိုင်း clear လုပ်နိုင်ပါတယ်။ အသေးစိတ် သိရှိလိုပါက ဒီမှာ လေ့လာပါ။

aa.length = 0;
aa; // Output is []
bb; // Output is []

Object

object အလွတ်တစ်ခုကို အခုလိုတည်ဆောက်နိုင်တယ်။

let cat = {}

property တွေကိုတော့အခုထည့်ရတယ်။

let cat = {
 color: "yellow",
 name: "Shwe War",
 legs: 4,
 isMale: true,
 greet: function() {
  console.log("hello")
 }
}

Object property တွေကိုအခုလို ထောက်ခေါ်(သို့)ပြုပြင်နိုင်တယ်။

cat.color; // yellow
cat["color"]; // "yellow
cat.color = "black";
cat["color"] = "black";

[] နဲ့ရေးနည်းက object property ကို variable နဲ့ ပြင်ချင်တဲ့အခါ သုံးနိုင်တယ်။

let key = "color";
cat[key] = "black";

Object တွေတည်ဆောက်ရာမှာအခုလို Property Shorthand ကိုအသုံးပြုနိုင်ပါတယ်။

let name = "Alice";
let age = 22;
let user = {
  name: name,
  age: age
}
let user = { name, age } 

Object နဲ့ array ကို အခုလို ပေါင်းစပ်ရေးသားနိုင်တယ်။

let person = {
  name: 'Blob',
  age: 22,
  education: [
   "B.Sc.",
   "MBA",
  ]
}
let users = [
  { name: 'Mg Mg', role: 'admin' },
  { name: 'Hla Hla', role: 'admin' }
]

Map

array ကို loop ပတ်ပြီး operation လုပ်ကာ တခြား array တစ်ခု return ပြန်ပေးပါတယ်။ for loop အစားထိုး သုံးနိုင်ပါတယ်။

let nums = [1, 2, 3];
let result = nums.map(num => num + 1);
console.log(result); // [ 2, 3, 4 ]

Object array ထဲက property တွေပြုပြင်ရာမှာသုံးတယ်။

let persons = [{
 name: 'Kyaw Kyaw',
 age: 10
}, {
 name: 'Aung Aung',
 age: 20
}];
let result = persons.map(person => {
  person.age += 5;
  return person
});

Object ရဲ့ property တွေကို modify လုပ်မယ်ဆိုရင် original array မှာပါ modify ဖြစ်စေတယ်။ မဖြစ်စေချင်ရင် object ကို clone လုပ်ပြီးမှ modify လုပ်ပါ။ ဒီမှာ လေ့လာပါ။

Object property တွေ ဆွဲထုတ်ရမှာလည်း သုံးနိုင်တယ်။

let result = persons.map(person => person.name);
console.log(result); // [ 'Kyaw Kyaw', 'Aung Aung' ]

Filter

Loop ပတ်ပြီး condition ကိုက်ညီတာတွေကိုပဲ array အသစ်အနေနဲ့ return ပြန်ပေးတယ်။

let nums = [1, 2, 3, 4, 5, 6];
let result = nums.filter(num => num % 2);
console.log(result); // [1, 3, 5]

Object array တွေကို filter လုပ်တဲ့နေရာမှာ အသုံးများတယ်။

let persons = [{
 name: 'Kyaw Kyaw',
 age: 10
}, {
 name: 'Aung Aung',
 age: 20
}, {
 name: 'Hla Hla',
 age: 15
}];
let result = persons.filter(person => person.age < 18);

Find

array ထဲက ပထမဆုံးရှာတွေ့တဲ့ တန်ဖိုးကို return ပြန်ပေးတယ်။

let nums = [1, 2, 3, 4, 5];
let result = nums.find(num => num === 2);

Object တွေရှာဖွေရာမှာ အသုံးများတယ်။

let persons = [{
 name: 'Kyaw Kyaw',
 age: 10
}, {
 name: 'Aung Aung',
 age: 20
}, {
 name: 'Hla Hla',
 age: 15
}];
let result = persons.find( person => person.name === 'Kyaw Kyaw');

Reduce

array ထဲကတန်ဖိုးတွေကို တွက်ချက်ပြီး တန်ဖိုးတစ်ခု ပြန်ပေးတယ်။

let nums = [1, 2, 3, 4, 5];
let result = nums.reduce( (a, n) => a + n );

Array Spread & Destructuring

array ထဲကို တခြား array တွေ ထည့်ချင်ရင် အခုလို spread operator ကိုသုံးနိုင်တယ်။

let nums = [1, 2, 3];
let alphas = ['a', 'b', 'c'];
let result = [...nums, ...alphas];
let result2 = [5, 6, ...nums];
let result3 = [...nums]; // array အသစ်တစ်ခုရတယ်။

function တွေမှာ array ထည့်ပေးချင်ရင် spread operator ကိုသုံးနိုင်တယ်။

let add = (a, b) => a + b;
let nums = [1, 2];
add(nums[0], nums[1]);
add(...nums);

array ထဲကတန်ဖိုးတွေကို အခုလို destructure လုပ်ယူနိုင်ပါတယ်။

let nums = [5, 6];
let a = nums[0];
let b = nums[1];
let [a, b] = nums;

function တွေမှာလည်း destructure ကိုသုံးနိုင်တယ်။

let add = ([a, b]) => a + b;
let nums = [1, 2];
add(nums);

Object Spread & Destructuring

Object မှာလည်း array လိုပဲ spread နဲ့ destructure လုပ်နိုင်ပါတယ်။

let user = { name: 'Bob', age: 20 }
let user2 = {...user} // obj အသစ်တစ်ခုရ
let greet = ({name, age}) => console.log(`Hello ${name}, ${age}`);
greet(user);
let { name , age } = user;

Object မှာ array လိုမျိုး spread operator နဲ့ property တွေဖြန့်ပြီး method ခေါ်လို့မရပါဘူး။

let greet = (name, age) => console.log(`Hello ${name}, ${age}`);
greet(...user); // TypeError: Found non-callable @@iterator

Map မှာ object’s property ပြင်ချင်ရင် Object Spread နဲ့ အခုလို တွဲသုံးနိုင်တယ်။

let result = persons.map(person => {
  return { ...person, age: person.age + 5 };
});

ဒီလိုသုံးမယ်ဆိုရင် original array မှာ modify မဖြစ်အောင် ကာကွယ်နိုင်မှာ ဖြစ်ပါတယ်။

Shadow Copy and Deep Copy

Spread operator နဲ့ array or obj clone ပြုလုပ်ချင်းက shadow copy ဖြစ်ပါတယ်။ Shadow copy ဆိုတာ first level ကိုသာ copy ကူးပေးခြင်းဖြစ်ပြီး nested level တွေကတော့ reference သာဖြစ်ပါတယ်။

let person = {
    name: 'John',
    address: {
        street: 'North 1st street',
    }
};
let personClone = {...person};
personClone.name = "Mg Mg"; // will not effect original
personClone.address.street = "2nd Street"; // will effect original

ဒီမှာဆိုရင် person ကို spread operator နဲ့ကူးလိုက်တာကြောင့် first level မှာရှိတဲ့ name ကိုပြုပြင်တဲ့အခါ person မှာပြောင်းသွားခြင်းမရှိပါ။ သို့သော် nested obj ဖြစ်တဲ့ address ထဲက property တွေကိုပြင်ရင် original obj ဖြစ်တဲ့ person မှာသွားသက်ရောက်စေမှာ ဖြစ်ပါတယ်။

ဒီဖြစ်စဥ်က array မှာလည်း အတူတူပဲဖြစ်ပါတယ်။ ဒီလိုမဖြစ်စေချင်ရင် Deep copy ဖြစ်အောင် ယခုလိုရေးပါ။ ပိုမိုသိလိုလျှင် ဒီမှာ လေ့လာပါ။

let personClone = JSON.parse(JSON.stringify(person));
personClone.name = "Mg Mg"; // will not effect
personClone.address.street = "2nd Street"; // will not effect

For … of

array ရဲ့ value တွေကိုထုတ်ပေးနိုင်တယ်။ Array of objects တွေမှာလည်းသုံးနိုင်တယ်။

let fruits = ['Apple', 'Orange', 'Grape'];
for(fruit of fruits) {
 console.log(fruit);
}
let users = [
  { name: 'Mg Mg', role: 'admin' },
  { name: 'Hla Hla', role: 'admin' }
]
for(user of users) {
  console.log(user.name);
}

For … in

Object ရဲ့ key တွေထုတ်ပေးတယ်။ Array မှာတော့ index တွေထုတ်ပေးတယ်။

let fruits = ['Apple', 'Orange', 'Grape'];
for(index in fruits) {
 console.log(fruits[index]);
}
let users = [
  { name: 'Mg Mg', role: 'admin' },
  { name: 'Hla Hla', role: 'admin' }
]
for(index in users) {
  console.log(users[key].name);
}
let user = { name: 'Mg Mg', role: 'admin' };
for(key in user) {
  console.log(user[key]);
}

Promise

async code တွေရေးသားဖို့အတွက် promise ကိုအခုလိုသုံးနိုင်တယ်။

function add(a, b) {
 return new Promise((resolve, reject) => {
  let result = a + b;
  if (result) resolve(result);
  else reject();
 })
}
console.log("Log 1");
add(3, 2).then(result => console.log('Result: ' + result))
         .catch(() => console.log("Error Occur!"))
console.log("Log 3");

Async, await

Promise နဲ့ရေးထားတာကို အခုလို ပြောင်းရေးနိုင်တယ်။

async function add(a, b) {
 let result = await a + b;
 if (result) return result;
 else throw new Error();
}
console.log("Log 1");
add(3, 2).then(result => console.log('Result: ' + result))
         .catch(() => console.log("Error Occur!"))
console.log("Log 3");

Console Logs

log ထုတ်ကြည့်ဖို့ အောက်ပါတို့ကို သုံးနိုင်တယ်။

console.log() — log ထုတ်ပြတယ်။

console.log(“%c Hello”, “color: green”) — CSS style တွေသတ်မှတ်နိုင်တယ်။

console.info() — Firefox မှာ info icon နဲ့ပြပေးတယ်။ Chrome မှာမထူးပါ။

console.warn() — စာလုံးအဝါနဲ့ warn icon နဲ့ပြပေးတယ်။

console.error() — စာလုံးအနီ error icon နဲ့ပြပေးတယ်။

console.table() — Array နဲ့ Obj တွေကို table ပုံစံပြပေးတယ်။

console.trace() — function ထဲမှာရေးထားရင်ဒီ function ကိုခေါ်ယူတဲ့နေရာတွေကိုပြပေးတယ်။

console.time(), console.timeEnd() — တချို့ code တွေအလုပ်လုပ်တာ ဘယ်လောက်ကြာချိန် ရှိလဲဆိုတာ သိရဖို့သုံးနိုင်တယ်။

References

JavaScript လို - တို - ရှင်း

React - လို - တို - ရှင်း

TypeScript

TypeScript သည် JavaScript ပဲဖြစ်တာကြောင့် JavaScript မှာသိခဲ့သမျှကိုဆက်ပြီးအသုံးချနိုင်ပါတယ်။

Data Types

TypeScript မှာ variable တွေကြေငြာရင် type ပါတခါထဲ ပြောပေးရပါတယ်။

foo: any;
isShow: boolean = false;
total: number = 100;
name: string = "Mg Mg";
today: Date = new Date();
nums: Array<number> = [1, 2, 3]; (or) nums: number[] = [1, 2, 3];

Union Types

Type တစ်မျိုးထပ်ပိုပြီး လက်ခံတယ်ဆိုရင် အခုလို ရေးနိုင်တယ်။

id: number | string = 3; (or) "Hello";

Non-null assertion operator

Type သတ်မှတ်တဲ့အခါ initialize လုပ်ခိုင်းတာကို မလုပ်ချင်ရင် အခုလို ရေးနိုင်တယ်။

total!: number;

Union Types မှာ null သတ်မှတ်ထားတာကြောင့် possibly ‘null’ လို့ပြောနေတာကိုကျော်ချင်ရင် အခုလို ရေးနိုင်တယ်။

aa: number | null = 10;
add() {
    this.aa! + 10;
}

သတိထားရမှာက ဒီလိုရေးရင် TypeScript က null check မလုပ်ပေးတာကြောင့် null ကိုကိုယ်တိုင် handle လုပ်ဖို့ စဥ်းစားရမှာ ဖြစ်ပါတယ်။

Class

Constructor မှာ accessor နဲ့ variable ကြေငြာရင် နံမည်တူ property ကို auto ဆောက်ပေးတယ်။

export class Test {
  name: string;
  age: number;
  constructor(name: string, age: number){
    this.name = name;
    this.age = age;
  }
}
(or)
export class Test {
  constructor(public name: string, public age: number) {}
}

Custom Data Types

Data types တွေကို custom သတ်မှတ်နိုင်တယ်။

person: { name: string; age: number } = { name: '', age: 0 };

Optional Properties

optional properties တွေကိုအခုလိုသတ်မှတ်နိုင်တယ်။

person: { name: string; age?: number } = { name: ''};

Type Aliases

custom data type ကို တစ်နေရာမက အသုံးပြုမယ်ဆိုရင်အခုလို class ပြင်ပမှာကြေငြာထားလို့ရတယ်။

type Person = { name: string; age?: number };
class Test {
person: Person = { name: ''};
...
}

Interfaces

Type aliases နဲ့အတူတူပဲ obj type ကို ကြိုကြေငြာထားဖို့သုံးတယ်။

interface Person {
  name: string,
  age: number
}

Getter, Setter

private _name: string = '';
get name(){
    return this._name;
}
set name(value: string) {
    this._name = value;
}

Method

method တွေကိုအခုလိုရေးနိုင်တယ်။ method ထဲကနေ class variable တွေကို access လုပ်ချင်ရင် this keyword ကိုသုံးရတယ်။ return type ကို method မှာရေးပေးရတယ်။

test() {
    this.name = 'Mg Mg';
    this.age = 20;
  }
greet(): string {
    return 'Hi ' + this.name + ', your age is' + this.age;
}

method ထဲမှာ variable ကြေငြာရင် let, const တပ်ပေးရတယ်။ ပြန်ခေါ်သုံးရင် this မလိုပါ။

test() {
    let color: string = 'Green';
    console.log(color);
 }

Union Types

method တွေမှာ type တစ်မျိုးထပ်ပိုလက်ခံရင် အခုလို ရေးနိုင်တယ်။

test(id: string | number) {
...
}

Optional Parameters

method တွေမှာ optional parameter ထားနိုင်တယ်။

print(text: string, type?: string) {
    if (type) console.log(text + ' with ' + type);
    else console.log(text);
}
print("Hello");

ReadOnly

Class property ကို မပြုပြင်စေချင်ရင် readonly လို့ထားနိုင်တယ်။

readonly url = "google.com";

Nullish Coalescing

null နဲ့ undefined ကိုရှောင်ဖို့ အခုလိုရေးနိုင်တယ်။ အောက်ပါနှစ်ကြောင်းသည်ရလဒ်အတူတူဖြစ်တယ်။

age !== null && age !== undefined ? age : calculateAge()
age ?? calculateAge()

ဒီလောက်သိပြီဆိုရင် Angular လေ့လာရာမှာ အဆင်ပြေပြီဖြစ်ပါတယ်။ ကျန်တာတွေကတော့ လေ့လာနေရင်းမှာမှတ်သားသွားလို့ရပါတယ်။

Previous: Angular CLI And Bootstrap Setup

Next: How an Angular App gets Loaded and Started