Basic Anuglar Learning[1]-TypeScript

Overview Of Angular

Angular เป็น JavaScript Front-End Framework ที่ใช้พัฒนาโปรแกรมฝั่ง Client Application โดยใช้ภาษา TypeScript ในการพัฒนา

Framework คือ “กรอบการทำงาน” จุดประสงค์ของมันก็เพื่อกำหนดรูปแบบ และวิธีการเขียนโค้ดให้เป็นไปตามกรอบ (Framework) หรือมีระเบียบ

Library คือ กลุ่มของฟังก์ชั่นต่างๆ จุดประสงค์ของ Library คือ เพื่อให้เราเรียกมันมาใช้งาน

แนวคิดของ Angular คือ Component-based architecture เป็นการแบ่งส่วนต่าง ๆ ออกเป็น Module โดยจะมี Root Module เป็น Module หลักอย่างน้อย 1 อัน แล้วนำหลายๆ Module มาประกอบร่วมกัน

ซึ่งภายใน Module ก็จะประกอบไปด้วย Component , Directive, Class ฯลฯ เพื่อจัดการ HTML Template, Service ต่างๆ ในระบบของเรา

TypeScript

คืออะไร ?

TypeScript is a programming language built and maintained by Microsoft.
It is a superset of JavaScript that adds strong type checking and is compiled into plain JavaScript code.

Being a superset means that TypeScript has all the features of JavaScript as well as some additional features.

TypeScript comes with features such as better development-time tooling, static code analysis, compile-time type checking, and code-level documentation.

TypeScript เป็นภาษาที่เป็น Super Set Of JavaScript มันครอบ JS เอาไว้ มันจะถูก Compile เป็นภาษา JS นั่นหมายความว่า เราสามารถเขียน JS ใน TS (แต่ไม่แนะนำ เพราะเราควรที่จะเขียนโค้ดให้ไปในทิศทางเดียวกัน หรือรูปแบบเดียวกัน ถ้ามีหลายๆ สไตล์การเขียน คนในทีมจะสับสนได้)

TypeScript มีความสามารถในการตรวจสอบโค้ดก่อน Compile ซึ่งแตกแตกจาก JS ทำให้เราสามารถเห็น Error ได้ตั้งแต่แรก ไม่ต้องรอ Run ก่อน

ตัวแปร และชนิดข้อมูล

ก่อนอื่นเรามาทำความเข้าใจกับคำว่า Block และ Scope กันก่อน

block คือ code ที่อยู่ในวงเล็บปีกกา { }

scope คือ บริเวณที่เราประกาศตัวแปร

scope จะสัมพันธ์กับ block เพราะถ้าตัวแปรไม่อยู่ด้านใน block ก็อยู่ด้านนอก block

อ้างอิงจาก https://devjourneys.com/2020/04/03/block-%E0%B9%81%E0%B8%A5%E0%B8%B0-scope-%E0%B9%83%E0%B8%99-javascript/

Const

คือตัวแปรแบบค่าคงที่ เมื่อกำหนดค่าเริ่มต้นให้แล้ว ไม่สามารถกำหนดค่าใหม่ได้ มีชีวิตแค่ภายใน Block ตัวเอง

function A(){
{
     const number = 100
     number = 50 // error ไม่สามารถกำหนดค่าใหม่ได้
     console.log(number) // 100
}
console.log(number) 
   // error เนื่องจาก number ประกาศใน{}ด้านบน ไม่สามารถนำมาใช้งานข้างนอก {} ได้
}

Let

เป็นตัวแปรที่สามารถกำหนดค่าใหม่ได้ มีชีวิตแค่ภายใน Block ตัวเอง

function A(){
{
     let number = 100
     number = 50 // ผ่าน
     console.log(number) // 50
}
console.log(number) 
   // error เนื่องจาก number ประกาศใน{}ด้านบน ไม่สามารถนำมาใช้งานข้างนอก {} ได้
}

Var

เป็นตัวแปรที่สามารถกำหนดค่าใหม่ได้ มีชีวิตภายใน function ตัวเอง

function A(){
{
     var number = 100
     number = 50 // ผ่าน
     console.log(number) // 50
}
console.log(number) // 50
}
console.log(msg) // error เพราะมีชีวิตอยู่แค่ภายใต้ function ที่ประกาศ

ประเภทตัวแปรเบื้องต้น

String (เก็บข้อความ)

let msg:string = 'hello' //จะใช้ '' หรือ "" ก็ได้
msg = 'bye'

Number (เก็บตัวเลข)

let count:number = 1 //ไม่ต้องใส่ '' or ""

Boolean (เก็บค่า true false)

let isActive:boolean = true

Any (เก็บได้ทุกประเภท)

let a:any
a = 'hello'
a = 123
a = true

Array

let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3] //call -> Generic array type
 //สามารถเขียนได้ทั้งสองแบบ มีค่าเหมือนกัน

การเข้าถึงค่าใน Array

list[index] เช่น
list[0] // 1
list[1] // 2

การเพิ่ม/ลบ ค่าใน Array

list.push(4) // เพิ่มค่าต่อท้ายข้อมูลล่าสุด จะเป็น [1,2,3] => [1,2,3,4]
list.pop() // ลบค่าท้ายสุดของข้อมูล จะเป็น [1,2,3] => [1,2]

แถมๆ

Void = ไม่มีอะไรส่งกลับมา

Undefined = ประกาศตัวแปร แต่ไม่ได้กำหนดค่าให้ตัวแปร

Null = กำหนดค่าตัวแปรให้เป็น null

*** Null ไม่เท่ากับ ‘’ or ‘ ‘ (blank or white space) ***

This

คือ การอ้างถึงตัวแปรในระดับ Global

class Test{
   msg:string = 'hello'
   constructor(){
      let msg = 'bye'
      console.log(this.msg) // hello
      console.log(msg) // bye
   }
}

จะเห็นว่าใน Class Test มีตัวแปรระดับ Global ชื่อว่า msg อยู่ และใน Constructor ก็มีตัวแปร msg ของตัวเองเหมือนกัน ดังนั้นเมื่อเรา เติม this.msg จึงได้ค่าของ msg ระดับ Global นั้นเอง

Class

Class เป็นต้นแบบในการสร้างวัตถุ (Object) ภายในบรรจุ Function, Properties และ Variables เมื่อสร้าง Object ก็จะได้ความสามารถ หรือคุณสมบัติของคลาสต้นแบบนั้นไป

Function / Method

เป็นกลุ่มของคำสั่งที่สร้างขึ้นมาเพื่อทำหน้าที่บางอย่าง การสร้างฟังก์ชันจะสามารถทำให้เราใช้โค้ดนั้นซ้ำๆ โดยที่ไม่ต้องเขียนโปรแกรมใหม่

วิธีการใช้งานฟังก์ชันใน TypeScript

function functionName(...):returnType {
   //do someting
}
//สามารถ ละ keyword function ด้านบนได้

การส่ง Parameter เข้าไปในฟังก์ชัน

Parameter คือคำเรียกตัวแปรที่เรารับเข้ามาเป็น input ของ function

print(msg:string):void{
   console.log(msg)
}

ดังตัวอย่างด้านบน ตัวแปร msg คือ parameter ที่ส่งเข้ามาเพื่อใช้งานใน function print() เราสามารถส่งจำนวน parameter กี่ตัวก็ได้ไม่จำกัด

แถมๆ

Rest Parameter

คือการที่เราทำให้ฟังก์ชั่นนี้สามารถรับ parameter ตัวสุดท้ายแบบไม่จำกัดจำนวนด้วยการใส่ … ข้างหน้าชื่อตัวแปร โดยการทำแบบนี้จะช่วยให้ฟังก์ชั่นมีความยืดหยุ่นในการรับ parameter (โดยการแปลงตัวแปรหลายๆตัวมาเป็น array)

myFunction(a:number, b:number, ...args){ //args = array
console.log(args.length);
}
myFunction(1,2,'t','e','s','t') 
// args =['t','e','s','t'] length = 4

Spread syntax

จะตรงข้ามกับ Rest Parameter คือจะแปลง array หรือ collection ไปเป็นตัวแปรเดียวที่มี … นำหน้า

const array = [0,1,2,3]
myFunction(x:number , y:number, z:number) {
  ...
}
myFunction(...array) // x = 0, y = 1 , z = 2

(บทความนี้เป็นการสรุปเนื้อหาแบบที่ตัวเองเข้าใจ ถ้ามีข้อผิดพลาดขออภัยล่วงหน้า ./\.)