Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf

RECAP
JS AND TS
Babel Coder
https://www.babelcoder.com

แนะนำตัว
Babel Coder
Babel Coder

Babel Coder
BABEL CODER
Nuttavut T
Babel Coder

RECAP
JAVASCRIPT
Babel Coder

Babel Coder
Babel Coder
Runtime
JAVASCRIPT
Runtime Runtime
Interpreter Interpreter Interpreter
JavaScript JavaScript JavaScript

Babel Coder
Babel Coder
ES
ECMASCRIPT
JavaScript
ES
DOM
ECMAScript หรือ ES เป็นภาษาต้นแบบที่กำหนดรูปแบบไวยากรณ์ของภาษาที่มีภาษาปลายทาง เช่น
JavaScript สืบทอดไวยากรณ์ไปใช้งาน อย่างไรก็ตาม JavaScript ยังมี API อื่น ๆ นอกเหนือจาก API ทาง
ภาษาที่กำหนดไว้ใน ES เช่น DOM API
ES2015 (ES6)
ES2016
ES2017
ES2018
ES2019
ES2020
ES2021
ES2022
ES2023
ES2024

Babel Coder
Babel Coder
PACKAGE MANAGER

Babel Coder
Babel Coder
src
bcrypt
PACKAGE MANAGER
api
package.json
app.controller.ts
app.module.ts
app.service.ts
main.ts
node_modules
pnpm store
bcrypt
link

Babel Coder
Babel Coder
person
name
LET AND CONST
การใช้ let ในการประกาศตัวแปร
สามารถเปลี่ยนค่าได้
การใช้ const ในการประกาศตัวแปร ไม่
สามารถเปลี่ยนค่าได้
อย่างไรก็ตามการใช้ const กับออบเจ็กต์ ยังคง
สามารถแก้ไขค่าภายในได้
age 24
Somchai
25

Babel Coder
Babel Coder
TEMPLATE LITERAL
สัญลักษณ์ ` ใช้กับไวยากรณ์ของ Template Literal
Template Literal สามารถทำ Interpolation คือการ
แทนที่ค่าจากตัวแปรหรือค่าข้อมูลได้ และสามารถสร้าง
ข้อมูล string แบบหลายบรรทัดได้โดยไม่ต้องใช้ n

Babel Coder
Babel Coder
PROPERTY SHORTHAND
กรณีที่ชื่อของ property เหมือนกับชื่อของ
ตัวแปร เราสามารถลดรูปด้วยการระบุแค่ชื่อ
property เท่านั้นได้

Babel Coder
Babel Coder
const housingNo = address.housingNo
const village = address.village
DESTRUCTURING
const name = person.name
const age = person.age
const gender = person.sex
const address = person.address

Babel Coder
Babel Coder
DESTRUCTURING

Babel Coder
Babel Coder
{ a: 1, b: 2, c: 3, d: 6 }
SPREAD
[’A’, ‘B’, ‘C’, ‘D’, ‘E’]

Babel Coder
Babel Coder
REST
const {
gender,
height,
...rest
} = person
{
name: ‘Somchai’,
age: 24,
weight: 60
}
const [
first,
,
third,
...rest
] = currencies
[’THB’]

Babel Coder
Babel Coder
OPTIONAL CHAINING
socials มีค่าเป็น undefined จึงไม่สามารถเรียก
facebook ต่อจาก undefined ได้
กรณีเดียวกัน เมื่อ login เป็น undefined จึงไม่
สามารถเรียกแบบฟังก์ชันได้
Optional chaining ที่ใช้สัญลักษณ์เป็น ?. จะช่วย
พิจารณาว่าค่าก่อนหน้า ?. นั้นเป็น null หรือ
undefined หรือไม่ หากไม่ใช่จึงจะทำการเรียกใช้ค่า
หลัง ?. ต่อไป

Babel Coder
Babel Coder
NULLISH COALESCING
500
0

Babel Coder
Babel Coder
hasError && <div>Error!!</div>
AND OPERATOR
const hasError = true const hasError = false
hasError && <div>Error!!</div>
true
<div>Error!!</div>
false

Babel Coder
Babel Coder
OBJECT.KEYS
[’name’, ‘age’, ‘socials’]

Babel Coder
Babel Coder
OBJECT.VALUES
[’Somchai’, 24, { facebook: ‘somchai’ }]

Babel Coder
Babel Coder
OBJECT.ENTRIES

Babel Coder
Babel Coder
FOR...OF
EUR
INR
USD
THB

Babel Coder
Babel Coder
FOR...IN
name
age
socials

Babel Coder
Babel Coder
ARROW FUNCTION
function increase(n) {
return n + 1
}
const increase = (n) => {
return n + 1
}
const increase = (n) => n + 1
const increase = n => n + 1

Babel Coder
Babel Coder
ARROW FUNCTION
function add(n, m) {
return n + m
}
const add = (n, m) => {
return n + m
}
const add = (n, m) => n + m

Babel Coder
Babel Coder
1
const arr = [ , , ]
2 3
[ , , ]
2 4 6
MAP
arr.map(n => n * 2)

Babel Coder
Babel Coder
1
const arr = [ , , ]
2 3
[ , ]
2 3
FILTER
arr.filter(n => n >= 2)

Babel Coder
Babel Coder
1
const arr = [ , , ]
2 3
2
FIND
arr.find(n => n >= 2)

Babel Coder
Babel Coder
1
const arr = [ , , ]
2 3
1
FIND INDEX
arr.findIndex(n => n * 2)
index: 0
index: 1
index: 2

Babel Coder
Babel Coder
circle.js
ES MODULE
const DEFAULT_COLOR = ‘white‘
class Circle { }
triangle.js
const DEFAULT_COLOR = ‘white‘
class Triangle { }
// import DEFAULT_COLOR
main.js

Babel Coder
Babel Coder
circle.js
triangle.js
main.js
main.js
ES MODULE
export const DEFAULT_COLOR = ‘white‘
class Circle { }
class Triangle { }
import { DEFAULT_COLOR } from 'circle'
import { DEFAULT_COLOR } from 'circle'
import { DEFAULT_COLOR } from 'triangle'
Named export

Babel Coder
Babel Coder
circle.js
triangle.js main.js
ES MODULE
class Circle { }
class Triangle { }
import * as circle from 'circle'
import * as triangle from 'triangle'
circle.DEFAULT_COLOR
triangle.DEFAULT_COLOR
Named export

Babel Coder
Babel Coder
ES MODULE
circle.js
triangle.js
export default class Circle { }
export default class Triangle { }
main.js
import Circle from 'circle'
import Triangle from 'triangle'
Default export

Babel Coder
Babel Coder
ES MODULE
circle.js
main.js
import Circle, { DEFAULT_COLO
R } from 'circle'
default named

Babel Coder
Babel Coder
ES MODULE
circle.js
main.js
import Circle, * as circle from 'circle'
default named

Babel Coder
Babel Coder
ASYNCHRONOUS
console.log(1)
setTimeout(() => {
console.log(2)
}, 1000)
console.log(3)
1
2
3
Sync
Sync
Async
Callback function

Babel Coder
Babel Coder
ASYNCHRONOUS
import { setTimeout } from ‘timers/promises’
console.log(1)
setTimeout(10
00).then(() => {
console.log(2)
})
console.log(3)
Promise-based API Callback function

Babel Coder
Babel Coder
ASYNC / AWAIT
import { setTimeout } from ‘timers/promises’
console.log(1)
async function myTimer() {
await setTimeout(10
00)
console.log(2)
}
myTimer()
console.log(3)
const myTimer = async () => {
await setTimeout(10
00)
console.log(2)
}

Babel Coder
Babel Coder
200
FETCH API
/api/products/1 200 OK
Content-Type: application/json
res.status
res.ok true

Babel Coder
Babel Coder
FETCH API
/api/products/
POST

Babel Coder
Babel Coder
FETCH API
PATCH /api/products/1

Babel Coder
Babel Coder
name
price
image
PATCH
FETCH API
Lorem
200
File
Form
Data
Content-Type: multipart/form-data
/api/products/1

Babel Coder
Babel Coder
DELETE
FETCH API
/api/products/1

RECAP
TYPESCRIPT
Babel Coder

Babel Coder
Babel Coder
JavaScript
ES
DOM
TYPESCRIPT
TypeScript
Argument of type 'string' is not assignable
to parameter of type 'number'
Argument of type 'undefined' is not assignable
to parameter of type 'number'

Babel Coder
Babel Coder
package.json
BASIC INSTALLATION

Babel Coder
Babel Coder
BASIC TYPES
let num = 2
let num: number = 2
boolean
number
string
unknown
any
null
undefined
void
never
object
true, false
1, 2, 0.2
‘A’, ‘’
ใช้กับข้อมูลที่ยังไม่ทราบชนิดข้อมูลในขณะนั้น
สามารถกำหนดข้อมูลใดให้ก็ได้
null
undefined
ใช้ในกรณีของฟังก์ชันที่ไม่คืนค่า
ใช้เพื่อบ่งชี้ว่าเป็นไปไม่ได้ที่จะเกิดค่านี้
ออปเจ็กต์ใด ๆ

Babel Coder
Babel Coder
number
BASIC TYPES
let num = 2
let str = ‘hello’
str = ‘world’
const str2 = ‘hello’
str2 = ‘world’
const arr = [1, 2, 3]
const arr: number[] = [1, 2, 3]
string
‘hello’
number[]
Literal Type

Babel Coder
Babel Coder
INTERFACE
infer

Babel Coder
Babel Coder
INTERFACE

Babel Coder
Babel Coder
TYPE ALIAS

Babel Coder
Babel Coder
INTERSECTION
intersect extends

Babel Coder
Babel Coder
UNION
role จะสามารถกำหนดค่าได้เพียง ADMIN MANAGER หรือ
MEMBER อย่างใดอย่างหนึ่งเท่านั้น

Babel Coder
Babel Coder
Merging interface
INTERFACES VS TYPE ALIAS
Merging interface เป็นคุณสมบัติของ interface ที่สามารถรวมการประกาศ interface ที่เกิดขึ้นซ้ำหลายครั้งให้ประกอบด้วยทุก
properties จาก interface ต่าง ๆ ที่มีชื่อเดียวกัน คุณสมบัตินี้ไม่ปรากฎใน Type alias

Babel Coder
Babel Coder
INTERFACES VS TYPE ALIAS
Type alias มีความยืดหยุ่นในการประกาศโครงสร้างของชนิดข้อมูลที่ซับซ้อนได้มากกว่าการใช้งาน interface

Babel Coder
Babel Coder
ENUM
0
1
2

Babel Coder
Babel Coder
OPTIONAL PROPERTIES
const somchai: Person = {
name: ‘Somchai‘,
gender: ‘male‘,
socials: {
facebook: ‘somchai‘
}
}
socials ไม่จำเป็นต้องมี tiktok ก็ได้เพราะเป็น optional
property

Babel Coder
Babel Coder
FUNCTION TYPES
return type
สถานการณ์ส่วนใหญ่ TypeScript สามารถ infer ชนิดข้อมูลที่
return จากฟังก์ชันได้จึงไม่จำเป็นต้องระบุ return type อย่างไร
ก็ตามหากการ infer นั้นไม่ถูกต้อง เรายังจำเป็นต้องระบุชนิด
ข้อมูลที่คืนกลับจากฟังก์ชันอยู่

Babel Coder
Babel Coder
9
GENERIC FUNCTIONS
maxNum([2, 5, 9, 1])
maxChar([’a’, ‘e’, ‘z’, ‘i’]) z

Babel Coder
Babel Coder
GENERIC FUNCTIONS

Babel Coder
Babel Coder
GENERIC FUNCTIONS
item สามารถเป็นได้แค่ number หรือ string เท่านั้น
sortItem<number>(3142);
sortItem(3142);

Babel Coder
Babel Coder
any
AS
const product = fetchApi('/products')
const product = fetchApi('/products') as Product
Product

Babel Coder
Babel Coder
FETCH API
any

Babel Coder
Babel Coder
RECORD

Babel Coder
Babel Coder
PICK

Babel Coder
Babel Coder
OMIT

Babel Coder
Babel Coder
PARTIAL
Partial<Person>

Babel Coder
Babel Coder
RETURN TYPE
ดึงชนิดข้อมูลจาก getTheme ที่เป็นโค้ดฝั่ ง JavaScript มาสู่ TypeScript

Babel Coder
Babel Coder
PARAMETERS
[items: unknown[], index: number]

Babel Coder
Babel Coder
KEY OF
‘name’ | ‘socials’

Babel Coder
Babel Coder
name Loki
no 1234
amount 500
name Thor
no 5678
amount 1,000
deposit
CLASSES
withdraw

Babel Coder
Babel Coder
name Loki
no 1234
amount 500
name Thor
no 5678
amount 1,000
deposit
withdraw
Data
DATA AND BEHAVIOR
Behavior

Babel Coder
Babel Coder
DATA AND BEHAVIOR
const acc1 = new SavingAccount();
acc1.name = "Loki";
acc1.no = 1234;
acc1.balance = 500;
acc1.deposit(100)
acc1.balance // 600
acc1.withdraw(50)
acc1.balance // 550

Babel Coder
Babel Coder
const acc1 = new SavingAccount("Loki", 1234, 500);
CONSTRUCTOR

Babel Coder
Babel Coder
// Property 'balance' is private and only accessible
// within class 'SavingAccount'
acc1.balance;
MEMBER VISIBILITY

Babel Coder
Babel Coder
CONSTRUCTOR PROPERTY INITIALIZATION

Babel Coder
Babel Coder
DECORATORS

Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf

More Related Content

More from NuttavutThongjor1 (20)

Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf