TypeScript Foundations

guess the result — 1 / 4

guess the result — 2 / 4

guess the result — 3 / 4

guess the result — 4 / 4

ground rules

Type along, one line at a time

type this

console.log asks the program to show you something

1console.log("Hello, TypeScript!");

วงเล็บ = สิ่งที่อยากโชว์ / เครื่องหมายคำพูด = ข้อความ / เซมิโคลอน = จบประโยค

anatomy

One line, four parts

let  nameStudent : string  =  "Ada"
 │        │          │         │
 │        │          │         └─ ค่า
 │        │          └─ ชนิด (annotation)
 │        └─ ชื่อ
 └─ เปลี่ยนค่าได้ทีหลัง

: บอกชนิด · = ให้ค่า — คนละหน้าที่กัน

syntax

The three basic types, used all course

1let nameStudent: string = "Ada";
2let age: number = 30;
3let isStudent: boolean = true;

string ข้อความ / number ตัวเลข / boolean จริงหรือเท็จ

live

Print the values you stored

1console.log("Name: " + nameStudent);
2console.log("Age: " + age);
3console.log("Is student: " + isStudent);

+ ต่อข้อความกับค่าในตัวแปรเข้าด้วยกัน

let / const

A box you can refill, and a box that is tied down

1let score: number = 10;
2score = 25;              // ได้ — let เปลี่ยนค่าได้
3 
4const birthYear: number = 1815;
5birthYear = 1816;        // ไม่ได้ — const ผูกไว้กับค่านั้นแล้ว

ใช้ const เป็นค่าเริ่มต้น เปลี่ยนไปใช้ let เมื่อรู้ว่าค่าต้องเปลี่ยนจริง ๆ

break it on purpose

The first errors of the course, typed wrong on purpose

1birthYear = 1816;
2// Cannot assign to 'birthYear' because it is a constant.
3 
4age = "thirty";
5// Type 'string' is not assignable to type 'number'.

พิมพ์ให้พัง → hover อ่าน error → npm run check → แล้วลบทิ้ง

checkpoint

Before we move on

• ✓ประกาศตัวแปรครบทั้งสามชนิด
• ✓print ค่าออกมาดูได้
• ✓เคยเห็น error จากการใส่ผิดชนิดมาแล้วหนึ่งครั้ง

signature

The signature says two things: what goes in, what comes out

function add ( a: number, b: number ) : number  { … }
                     │                    │
                     │                    └─ คืนอะไรกลับไป
                     └─ รับอะไรเข้ามา

void = ไม่คืนค่าอะไรกลับไป ทำงานแล้วจบ เช่นแค่ console.log

live

The two most common ways to declare a function

1export function sayHi(name: string): void {
2  console.log("Hello, " + name + "!");
3}
4 
5export function add(a: number, b: number): number {
6  return a + b;
7}

ลอง return “5” ในฟังก์ชันที่ประกาศ : number ดู — return type ก็ถูกเช็คเหมือนกัน

live

Different shape, same job

1const multiply = (x: number, y: number): number => {
2  return x * y;
3};
4 
5const calVat = (price: number): number => price * 1.07;
6 
7console.log(calVat(100)); // 107.00000000000001

บรรทัดเดียวไม่ต้องมีปีกกาและไม่ต้องเขียน return · เลขท้าย ๆ นั่นคือเรื่องทศนิยมของคอมพิวเตอร์

callback ⭐ gateway to array helpers

Pass code in for another function to call

sayHello("Ada", ─────────────────► ฟังก์ชันข้างนอกสร้าง message
                (m) => log(m) ───────► แล้วเรียกโค้ดที่เราส่งเข้าไปให้ทำงาน

ชนิดของมันเขียนว่า (message: string) => void อ่านว่า “ฟังก์ชันที่รับ string แล้วไม่คืนค่า”

live

The second parameter is a function

1export function sayHello(
2  name: string,
3  callback: (message: string) => void
4): void {
5  const message = "Hi " + name;
6  callback(message);
7}
8 
9sayHello("Ada", (message) => console.log(message));

ถ้าเข้าใจสไลด์นี้ .map() จะไม่ใช่ของใหม่เลย — มันคือรูปแบบเดียวกันเป๊ะ

checkpoint

Before we move on

• ✓เขียนได้ทั้งแบบ function declaration และ arrow
• ✓แยกออกว่า void ต่างจาก number ยังไง
• ✓ส่งฟังก์ชันเข้าไปเป็นอาร์กิวเมนต์ได้

type this

Every line returns a boolean

1let a = 5;
2let b = 8;
3 
4console.log(a < b);    // true
5console.log(a > b);    // false
6console.log(a === b);  // false — เท่ากันเป๊ะไหม
7console.log(a !== b);  // true  — ไม่เท่ากันใช่ไหม

เห็น == สองตัวในบทเรียนอื่น ให้ใช้ === สามตัวไว้ก่อน มันเดาผลได้ตรงกว่า

remember these two

how it runs

The first true branch wins, then it stops

score >= 90 ? ──yes──► "Excellent"
     │no
score >= 80 ? ──yes──► "Good"
     │no
     └────────────────► "Keep practising"

ลำดับจึงสำคัญ — ถ้าสลับ >= 80 ขึ้นก่อน >= 90 คนได้ 95 จะได้ “Good”

syntax

The shape of a decision

1if (condition) {
2  // ทำอันนี้
3} else if (anotherCondition) {
4  // ไม่งั้นทำอันนี้
5} else {
6  // นอกนั้นทำอันนี้
7}

เงื่อนไขในวงเล็บต้องตอบได้ว่าจริงหรือเท็จเท่านั้น

live

Turn a score into a grade

1const score: number = 85;
2 
3if (score >= 90) {
4  console.log("Excellent");
5} else if (score >= 80) {
6  console.log("Good");
7} else {
8  console.log("Keep practising");
9}

85 ไม่ผ่านเงื่อนไขแรก แต่ผ่านอันที่สอง — บล็อกที่สามจึงไม่ถูกแตะเลย

narrowing

Ask what it is right now, and TypeScript narrows the type

input: number | string
   │
   ├── if (typeof input === "number") ──► ในบล็อกนี้เป็น number แน่นอน
   │
   └── else ──────────────────────────► ในบล็อกนี้เป็น string แน่นอน

เครื่องหมาย | อ่านว่า “หรือ”

live

Ask the type at runtime with typeof

1let input: number | string = 15;
2 
3if (typeof input === "number") {
4  console.log("เป็นตัวเลข: " + input);
5} else {
6  console.log("เป็นข้อความ: " + input);
7}

เปลี่ยน input เป็น "TypeScript" แล้วรันใหม่ — คนละบล็อกทำงาน

checkpoint

Before we move on

• ✓เขียน if / else if / else ได้เอง
• ✓อธิบายได้ว่า number | string แปลว่าอะไร
• ✓รู้ว่าลำดับของเงื่อนไขมีผลกับคำตอบ

anatomy

Three parts in one bracket, split by semicolons

for ( let i = 1 ;  i <= 5 ;  i++ )
        │           │         │
        │           │         └─ หลังจบแต่ละรอบ (บวกหนึ่ง)
        │           └─ ทำต่อเมื่อยังจริง
        └─ เริ่มที่นี่ ทำครั้งเดียว

ไล่ด้วยปากทีละรอบ: i เป็น 1, 1 ≤ 5 จริง, พิมพ์ 1, i เป็น 2…

live

Count one to five

1for (let i = 1; i <= 5; i++) {
2  console.log(i);
3}
4// 1 2 3 4 5

พอ i เป็น 6 เงื่อนไขเป็นเท็จ ลูปจึงหยุด

accumulate pattern ⭐

This shape comes back at least three more times

ประกาศก่อนลูป  →  let total = 0;
บวกข้างในลูป   →    total += i;
print หลังลูป  →  console.log(total);

ถ้าประกาศ total ไว้ข้างในลูป มันจะถูกรีเซ็ตทุกรอบ แล้วได้ค่าผิด

live

Add it up until the loop ends

1let total = 0;
2 
3for (let i = 1; i <= 5; i++) {
4  total += i;
5}
6 
7console.log(total); // 15

total += i คือรูปย่อของ total = total + i

live

A loop can count down, and hold an if inside

1for (let i = 5; i >= 1; i--) {
2  console.log(i);
3}
4 
5for (let i = 1; i <= 10; i++) {
6  if (i % 2 === 0) {
7    console.log(i);
8  }
9}

% คือเศษจากการหาร — i % 2 === 0 แปลว่าเลขคู่

solution

Variables + conditions + loop, in nine lines

1for (let n = 1; n <= 10; n++) {
2  if (n < 4) {
3    console.log(n + " is small");
4  } else if (n <= 7) {
5    console.log(n + " is medium");
6  } else {
7    console.log(n + " is large");
8  }
9}

ลูปไล่ทีละตัว เปรียบเทียบเพื่อตัดสิน if เลือกป้าย แล้ว + ต่อข้อความ

checkpoint

Before we move on

• ✓เขียน for loop ได้เอง
• ✓ใช้แพตเทิร์นบวกสะสมได้
• ✓อธิบายได้ว่า i % 2 === 0 แปลว่าอะไร

syntax

Brackets make a list, commas separate the items

1const fruits: string[] = ["apple", "banana", "cherry"];
2const scores: number[] = [90, 85, 100, 72];
3 
4// string[]  = ลิสต์ของข้อความ
5// number[]  = ลิสต์ของตัวเลข
6// boolean[] = ลิสต์ของ true/false

hover ที่ scores ดู — editor บอกเองว่าเป็น number[] แม้ไม่ได้พิมพ์ annotation

break it on purpose

A list of numbers takes no text

1scores.push("oops");
2// Argument of type 'string' is not assignable
3// to parameter of type 'number'.

npm run check จะแดงแบบตั้งใจ อ่าน error แล้วลบทิ้ง

index

Counting starts at zero

index:     0        1         2
         +--------+--------+--------+
fruits:  | apple  | banana | cherry |   length = 3
         +--------+--------+--------+

fruits[3] -> undefined   (ไม่พัง แค่ไม่มีอะไรตรงนั้น)

ตำแหน่งสุดท้ายคือ length - 1 เสมอ

live

Take an item out by position

1fruits[0];                  // "apple"
2fruits[5];                  // undefined
3fruits.length;              // 3
4fruits[fruits.length - 1];  // "cherry" — ตัวสุดท้ายโดยไม่ hardcode

ทายก่อนว่า fruits[5] จะได้อะไร แล้วค่อยกดรัน

live

Add, replace, and cut the last one off

1fruits.push("durian");         // ต่อท้าย → คืนความยาวใหม่
2fruits[1] = "blueberry";       // เหลี่ยมอยู่ซ้ายของ = คือเขียนทับ
3const removed = fruits.pop();  // ตัดตัวท้าย → คืนตัวที่ถูกตัด

เหลี่ยมอยู่ขวาของ = คืออ่าน อยู่ซ้ายของ = คือเขียนทับ

⚠️ the most confusing point

const locks the box, not what is inside it

const colors ──► [ "red", "green" ]
      │                  ▲
      │                  └─ ข้างในเปลี่ยนได้ (push / pop / แทนที่)
      └─ ลูกศรนี้เปลี่ยนไม่ได้ (ชี้ลิสต์ก้อนอื่นไม่ได้)

colors.push('blue') ได้ · colors = [...] ไม่ได้

break it on purpose

Type both lines, then see which one goes red

1const colors = ["red", "green"];
2 
3colors.push("blue");          // ได้
4colors = ["totally", "new"];  // Cannot assign to 'colors'
5                              // because it is a constant.

แก้ของข้างในกล่องได้ แต่เปลี่ยนกล่องไม่ได้

live

Run the loop along the positions of a list

1for (let i = 0; i < scores.length; i++) {
2  console.log(scores[i]);
3}
4 
5let total = 0;
6for (let i = 0; i < scores.length; i++) {
7  total += scores[i];
8}
9console.log(total / scores.length); // 86.75

ใช้ < ไม่ใช่ <= — ถ้าใช้ <= จะเกินไปหนึ่งตำแหน่ง แล้วได้ undefined โผล่ท้าย

live

No index needed if you never use the position

1for (const fruit of fruits) {
2  console.log(fruit);
3}

ต้องรู้ตำแหน่ง ใช้ for แบบมี i / ต้องการแค่ตัวของ ใช้ for...of

checkpoint

Before we move on

• ✓สร้างลิสต์ และหยิบตัวแรกกับตัวสุดท้ายได้
• ✓push / pop / แทนที่ตำแหน่งได้
• ✓วนลูปหาผลรวมได้ทั้งแบบ index และ for...of

live

Each line is label : value

1const person = { name: "Ada", age: 30, isStudent: true };
2 
3console.log(person.name);  // อ่าน
4person.age = 31;           // เขียน — จุดเดิม แต่ย้ายไปซ้ายของ =

ข้างใน object ใช้ : ไม่ใช่ = · ป้ายชื่อไม่ต้องมีเครื่องหมายคำพูด

⭐ the key beat of this topic

A misspelled property is the quietest bug in JavaScript

JavaScript เปล่า ๆ :  person.naem  →  undefined  →  ไล่บั๊กเป็นชั่วโมง

TypeScript         :  person.naem  →  เส้นแดงทันทีตอนพิมพ์

TypeScript รู้จัก object ของคุณ เพราะคุณสร้างมันขึ้นมาเอง — ไม่ต้องประกาศ type แยกเลย

break it on purpose

Both lines go red, for different reasons

1console.log(person.naem);
2// Property 'naem' does not exist on type '{ name: string; ... }'.
3// Did you mean 'name'?
4 
5person.age = "thirty";
6// Type 'string' is not assignable to type 'number'.

พิมพ์ person. แล้วหยุด — editor ขึ้นรายชื่อ property ให้เลือกเอง

live

Different types inside, all describing one thing

1const book = { title: "Dune", pages: 412, available: true };
2 
3const dog = {
4  dogName: "Rex",
5  weight: 32,
6  color: "brown",
7  breed: "Labrador",
8  burglarBiter: true,
9};
10console.log(dog); // print ทั้งก้อนได้เลย

ลองสร้าง object ของตัวเองหนึ่งก้อน ธีมอะไรก็ได้

checkpoint

Before we move on

• ✓สร้าง object และอ่าน / แก้ property ได้
• ✓เคยเห็น error จากการพิมพ์ชื่อ property ผิด
• ✓ใช้ autocomplete ของ editor เป็น

nested object

Read left to right, one dot at a time

company
├── companyName          "Jitta"
├── yearOfEstablishment  2012
└── address ─────────────┐
                         ├── street
                         ├── city   ← company.address.city
                         └── state

company → .address (ได้ object) → .city (ได้ข้อความ)

live

A property value can be another object

1const company = {
2  companyName: "Jitta",
3  address: {
4    street: "Sukhumvit",
5    city: "Bangkok",
6  },
7};
8 
9console.log(company.address.city); // "Bangkok"
10company.address.city = "Chiang Mai";

พิมพ์ company.address. แล้วหยุด — editor รู้จัก property ชั้นในให้ด้วย

live

A list can live inside the braces

1const companyActivities = {
2  companyName: "Jitta",
3  activities: ["research", "investing", "education"],
4};
5 
6companyActivities.activities.length; // 3
7companyActivities.activities[0];     // "research"

จุดเข้าไปหาลิสต์ก่อน แล้วค่อยใช้เหลี่ยมหยิบตัวในลิสต์

checkpoint

Before we move on

• ✓สร้าง object ซ้อนได้
• ✓อ่านค่าชั้นในด้วยจุดต่อจุดได้
• ✓อธิบายได้ว่า company.address.city อ่านยังไง

array of object ⭐

Brackets outside, braces inside — the shape of almost all real data

students  [  {name:"Ada", grade:90},  {name:"Grace", grade:85}, ... ]
          ^   ^
          |   +--- .name   ชื่อ (ชั้นใน)
          +------- [0]     ตำแหน่ง (ชั้นนอก)

students[0].name -> หยิบตัวที่ 0 ออกมา แล้วอ่านป้ายชื่อ name

students.name ไม่มี — ลิสต์ไม่มีชื่อ มีแต่ของแต่ละตัวในลิสต์

live

Every API response looks like this

1const students = [
2  { name: "Ada", grade: 90 },
3  { name: "Grace", grade: 85 },
4  { name: "Alan", grade: 78 },
5];
6 
7students.length;   // 3
8students[0].name;  // "Ada"
9students[1].grade; // 85

ตำแหน่งก่อน ชื่อทีหลัง — อ่านจากซ้ายไปขวาเสมอ

live

Loop every row, then act on some of them

1for (const student of students) {
2  console.log(student.name + ": " + student.grade);
3}
4 
5for (const student of students) {
6  if (student.grade >= 85) {
7    console.log(student.name + " passed with honors");
8  }
9}

Alan ได้ 78 บรรทัดของเขาจึงไม่ถูก print

the dataset for the rest of the deck

Four products, typed once and kept for the rest

1const products = [
2  { name: "Notebook", price: 25 },
3  { name: "Headphones", price: 80 },
4  { name: "Pen", price: 5 },
5  { name: "Backpack", price: 60 },
6];

ทุกตัวอย่างของ array helper ในหัวข้อ 09 จะกลับมาใช้ลิสต์ก้อนนี้

live

One loop, three jobs at once

1let total = 0;
2 
3for (const product of products) {
4  console.log(product.name + ": " + product.price);
5  total += product.price;
6  if (product.price > 50) {
7    console.log("  ↑ ของแพง");
8  }
9}
10console.log(total); // 170

print แต่ละแถว / สะสมยอดรวม / กรองด้วย if — แพตเทิร์นบวกสะสมครั้งที่สาม

max pattern ⭐

Finding the biggest takes no magic

แชมป์ = ตัวแรก
  ├─ เจอตัวที่มากกว่า? ──yes──► เปลี่ยนแชมป์เป็นตัวนี้
  └─ ไม่มากกว่า ─────────────► แชมป์เดิมอยู่ต่อ

จบลูป → ตัวที่ถืออยู่คือคำตอบ

ใช้ได้กับ มากสุด / น้อยสุด / ดีสุด — แค่พลิกเครื่องหมาย

live

Assume the first is champion, then challenge one by one

1let priciestName = products[0].name;
2let priciestPrice = products[0].price;
3 
4for (const product of products) {
5  if (product.price > priciestPrice) {
6    priciestName = product.name;
7    priciestPrice = product.price;
8  }
9}
10console.log(priciestName); // "Headphones"

ตัวแปรสองตัวเดินไปด้วยกัน ต้องเปลี่ยนพร้อมกันเสมอ

checkpoint

Before we move on

• ✓สร้างลิสต์ของ object ในธีมของตัวเองได้
• ✓วนลูปอ่าน property ของแต่ละตัวได้
• ✓คิดยอดรวม และกรองด้วย if ได้

map

As many come out as went in, always

[100, 200, 500]  ──.map(p => p * 1.07)──►  [107, 214, 535]
    ยาว 3                                        ยาว 3

map ไม่ทิ้งใคร แค่เปลี่ยนหน้าตาแต่ละตัว และคืนลิสต์ใหม่ ลิสต์เดิมไม่ถูกแตะ

live

Transform every item in the list

1const prices: number[] = [100, 200, 500, 1000];
2 
3const pricesWithVat = prices.map((price: number): number => price * 1.07);
4console.log(prices);        // ไม่เปลี่ยน
5console.log(pricesWithVat); // ลิสต์ใหม่
6 
7const names = products.map((product) => product.name);
8// ["Notebook", "Headphones", "Pen", "Backpack"]

แยกฟังก์ชันออกมาตั้งชื่อก่อน แล้วส่งชื่อเข้าไปก็ได้ — ย้อนกลับไปหัวข้อ callback

live

The function you pass in must answer true or false

1const expensive = products.filter((product) => product.price > 50);
2 
3const query = "pen";
4const results = products.filter((product) =>
5  product.name.toLowerCase().includes(query.toLowerCase())
6);

includes ตอบว่ามีข้อความนั้นอยู่ข้างในไหม · toLowerCase ทั้งสองฝั่ง “pen” จึงเจอ “Pen”

⭐ the heart of the whole course

find may find nothing

found = products.find(…)
   │
   ├─ เจอ    → object
   └─ ไม่เจอ → undefined
              └─► found.price จะพังตอนรัน → TypeScript เลยฟ้องก่อน

TypeScript ไม่ได้จู้จี้ มันบังคับให้เราคิดเผื่อกรณีไม่เจอ — เคสที่โปรแกรมจริงพังบ่อยที่สุด

live

Check first, then you may read the property

1const found = products.find((product) => product.name === "Pen");
2 
3console.log(found.price);
4// 'found' is possibly 'undefined'.
5 
6if (found) {
7  console.log(found.price); // ในบล็อกนี้ TypeScript รู้แล้วว่ามีของแน่
8}

narrowing แบบเดียวกับ typeof ในหัวข้อ if / else — ถามก่อน แล้วชนิดจะแคบลงเอง

live

A position, and questions answered yes or no

1products.findIndex((product) => product.name === "Backpack"); // 3
2products.findIndex((product) => product.name === "Laptop");   // -1
3 
4products.some((product) => product.price > 70);  // true
5products.every((product) => product.price > 1);  // true

ไม่เจอคือ -1 ไม่ใช่ undefined · เช็คผลต้องเขียน if (i !== -1) เพราะ index 0 ก็ falsy

reduce ⭐

reduce is the accumulate pattern, ready made

let total = 0;               ← ค่าตั้งต้น   = อาร์กิวเมนต์ตัวที่สอง
for (const p of products) {  ← การวน       = reduce วนให้
  total = total + p.price;   ← ตัวฟังก์ชัน = (sum, p) => sum + p.price
}

ไม่ใช่ของใหม่เลย — เปิดสไลด์รายงานสินค้าค้างไว้ข้าง ๆ แล้วเทียบดู

live

One line does what the whole loop did

1const total = products.reduce((sum, product) => sum + product.price, 0);
2 
3console.log(total); // 170 — เท่ากับลูปในหัวข้อ 08 เป๊ะ แต่สั้นกว่า

เลข 0 ท้ายสุดคือค่าตั้งต้น อย่าลืมใส่

live

Copy before sorting, if the original must stay

1const sorted = [...prices].sort((a, b) => a - b);  // น้อย → มาก
2console.log(prices); // ไม่เปลี่ยน เพราะก๊อปก่อน
3 
4const byPriceDesc = [...products].sort((a, b) => b.price - a.price);
5 
6const index = products.findIndex((product) => product.name === "Pen");
7if (index !== -1) {
8  products.splice(index, 1); // splice(ตำแหน่ง, จำนวนที่จะลบ)
9}

ฟังก์ชันเปรียบเทียบ: ติดลบ = a มาก่อน / บวก = b มาก่อน

checkpoint

Before we move on

• ✓แปลงทุกตัว = map · คัดบางตัว = filter
• ✓หาตัวเดียว = find · เอาตำแหน่ง = findIndex
• ✓ถามใช่ไหม = some / every · ยุบเป็นค่าเดียว = reduce