SlideShare a Scribd company logo
RECAP
JS AND TS
Babel Coder
https://www.babelcoder.com
RECAP
JAVASCRIPT
Babel Coder
https://www.babelcoder.com
Babel Coder
Babel Coder
https://www.babelcoder.com
Runtime
JAVASCRIPT
Runtime Runtime
Interpreter Interpreter Interpreter
JavaScript JavaScript JavaScript
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
person
name
LET AND CONST
การใช้ let ในการประกาศตัวแปร
สามารถเปลี่ยนค่าได้
การใช้ const ในการประกาศตัวแปร ไม่
สามารถเปลี่ยนค่าได้
อย่างไรก็ตามการใช้ const กับออบเจ็กต์ ยังคง
สามารถแก้ไขค่าภายในได้
age 24
Somchai
25
Babel Coder
Babel Coder
https://www.babelcoder.com
TEMPLATE LITERAL
สัญลักษณ์ ` ใช้กับไวยากรณ์ของ Template Literal
Template Literal สามารถทำ Interpolation คือการ
แทนที่ค่าจากตัวแปรหรือค่าข้อมูลได้ และสามารถสร้าง
ข้อมูล string แบบหลายบรรทัดได้โดยไม่ต้องใช้ n
Babel Coder
Babel Coder
https://www.babelcoder.com
PROPERTY SHORTHAND
กรณีที่ชื่อของ property เหมือนกับชื่อของ
ตัวแปร เราสามารถลดรูปด้วยการระบุแค่ชื่อ
property เท่านั้นได้
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
DESTRUCTURING
Babel Coder
Babel Coder
https://www.babelcoder.com
{ a: 1, b: 2, c: 3, d: 6 }
SPREAD
[’A’, ‘B’, ‘C’, ‘D’, ‘E’]
Babel Coder
Babel Coder
https://www.babelcoder.com
REST
const {
gender,
height,
...rest
} = person
{
name: ‘Somchai’,
age: 24,
weight: 60
}
const [
first,
,
third,
...rest
] = currencies
[’THB’]
Babel Coder
Babel Coder
https://www.babelcoder.com
OPTIONAL CHAINING
socials มีค่าเป็น undefined จึงไม่สามารถเรียก
facebook ต่อจาก undefined ได้
กรณีเดียวกัน เมื่อ login เป็น undefined จึงไม่
สามารถเรียกแบบฟังก์ชันได้
Optional chaining ที่ใช้สัญลักษณ์เป็น ?. จะช่วย
พิจารณาว่าค่าก่อนหน้า ?. นั้นเป็น null หรือ
undefined หรือไม่ หากไม่ใช่จึงจะทำการเรียกใช้ค่า
หลัง ?. ต่อไป
Babel Coder
Babel Coder
https://www.babelcoder.com
NULLISH COALESCING
500
0
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
OBJECT.KEYS
[’name’, ‘age’, ‘socials’]
Babel Coder
Babel Coder
https://www.babelcoder.com
OBJECT.VALUES
[’Somchai’, 24, { facebook: ‘somchai’ }]
Babel Coder
Babel Coder
https://www.babelcoder.com
OBJECT.ENTRIES
Babel Coder
Babel Coder
https://www.babelcoder.com
FOR...OF
EUR
INR
USD
THB
Babel Coder
Babel Coder
https://www.babelcoder.com
FOR...IN
name
age
socials
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
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
https://www.babelcoder.com
1
const arr = [ , , ]
2 3
[ , , ]
2 4 6
MAP
arr.map(n => n * 2)
Babel Coder
Babel Coder
https://www.babelcoder.com
1
const arr = [ , , ]
2 3
[ , ]
2 3
FILTER
arr.map(n => n >= 2)
Babel Coder
Babel Coder
https://www.babelcoder.com
1
const arr = [ , , ]
2 3
2
FIND
arr.map(n => n >= 2)
Babel Coder
Babel Coder
https://www.babelcoder.com
1
const arr = [ , , ]
2 3
1
FIND INDEX
arr.map(n => n * 2)
index: 0
index: 1
index: 2
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
circle.js
triangle.js
main.js
main.js
ES MODULE
export const DEFAULT_COLOR = ‘white‘
class Circle { }
export const DEFAULT_COLOR = ‘white‘
class Triangle { }
import { DEFAULT_COLOR } from 'circle'
import { DEFAULT_COLOR } from 'circle'
import { DEFAULT_COLOR } from 'triangle'
Named export
Babel Coder
Babel Coder
https://www.babelcoder.com
circle.js
triangle.js main.js
ES MODULE
export const DEFAULT_COLOR = ‘white‘
class Circle { }
export const DEFAULT_COLOR = ‘white‘
class Triangle { }
import * as circle from 'circle'
import * as triangle from 'triangle'
circle.DEFAULT_COLOR
triangle.DEFAULT_COLOR
Named export
Babel Coder
Babel Coder
https://www.babelcoder.com
ES MODULE
circle.js
triangle.js
export const DEFAULT_COLOR = ‘white‘
export default class Circle { }
export const DEFAULT_COLOR = ‘white‘
export default class Triangle { }
main.js
import Circle from 'circle'
import Triangle from 'triangle'
Default export
Babel Coder
Babel Coder
https://www.babelcoder.com
ES MODULE
circle.js
export const DEFAULT_COLOR = ‘white‘
export default class Circle { }
main.js
import Circle, { DEFAULT_COLO
R } from 'circle'
default named
Babel Coder
Babel Coder
https://www.babelcoder.com
ES MODULE
circle.js
export const DEFAULT_COLOR = ‘white‘
export default class Circle { }
main.js
import Circle, * as circle from 'circle'
default named
Babel Coder
Babel Coder
https://www.babelcoder.com
ASYNCHRONOUS
console.log(1)
setTimeout(() => {
console.log(2)
}, 1000)
console.log(3)
1
2
3
Sync
Sync
Async
Callback function
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
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
https://www.babelcoder.com
200
FETCH API
/api/products/1 200 OK
Content-Type: application/json
res.status
res.ok true
Babel Coder
Babel Coder
https://www.babelcoder.com
FETCH API
/api/products/
Content-Type: application/json
POST
Babel Coder
Babel Coder
https://www.babelcoder.com
FETCH API
Content-Type: application/json
PATCH /api/products/1
Babel Coder
Babel Coder
https://www.babelcoder.com
name
price
image
PATCH
FETCH API
Lorem
200
File
Form
Data
Content-Type: multipart/form-data
/api/products/1
Babel Coder
Babel Coder
https://www.babelcoder.com
DELETE
FETCH API
/api/products/1
RECAP
TYPESCRIPT
Babel Coder
https://www.babelcoder.com
Babel Coder
Babel Coder
https://www.babelcoder.com
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
https://www.babelcoder.com
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
https://www.babelcoder.com
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
https://www.babelcoder.com
INTERFACE
infer
Babel Coder
Babel Coder
https://www.babelcoder.com
INTERFACE
Babel Coder
Babel Coder
https://www.babelcoder.com
TYPE ALIAS
Babel Coder
Babel Coder
https://www.babelcoder.com
INTERSECTION
intersect extends
Babel Coder
Babel Coder
https://www.babelcoder.com
UNION
role จะสามารถกำหนดค่าได้เพียง ADMIN MANAGER หรือ
MEMBER อย่างใดอย่างหนึ่งเท่านั้น
Babel Coder
Babel Coder
https://www.babelcoder.com
Merging interface
INTERFACES VS TYPE ALIAS
Merging interface เป็นคุณสมบัติของ interface ที่สามารถรวมการประกาศ interface ที่เกิดขึ้นซ้ำหลายครั้งให้ประกอบด้วยทุก
properties จาก interface ต่าง ๆ ที่มีชื่อเดียวกัน คุณสมบัตินี้ไม่ปรากฎใน Type alias
Babel Coder
Babel Coder
https://www.babelcoder.com
INTERFACES VS TYPE ALIAS
Type alias มีความยืดหยุ่นในการประกาศโครงสร้างของชนิดข้อมูลที่ซับซ้อนได้มากกว่าการใช้งาน interface
Babel Coder
Babel Coder
https://www.babelcoder.com
ENUM
0
1
2
Babel Coder
Babel Coder
https://www.babelcoder.com
OPTIONAL PROPERTIES
const somchai: Person = {
name: ‘Somchai‘,
gender: ‘male‘,
socials: {
facebook: ‘somchai‘
}
}
socials ไม่จำเป็นต้องมี tiktok ก็ได้เพราะเป็น optional
property
Babel Coder
Babel Coder
https://www.babelcoder.com
FUNCTION TYPES
return type
สถานการณ์ส่วนใหญ่ TypeScript สามารถ infer ชนิดข้อมูลที่
return จากฟังก์ชันได้จึงไม่จำเป็นต้องระบุ return type อย่างไร
ก็ตามหากการ infer นั้นไม่ถูกต้อง เรายังจำเป็นต้องระบุชนิด
ข้อมูลที่คืนกลับจากฟังก์ชันอยู่
Babel Coder
Babel Coder
https://www.babelcoder.com
9
GENERIC FUNCTIONS
maxNum([2, 5, 9, 1])
maxChar([’a’, ‘e’, ‘z’, ‘i’]) z
Babel Coder
Babel Coder
https://www.babelcoder.com
GENERIC FUNCTIONS
Babel Coder
Babel Coder
https://www.babelcoder.com
GENERIC FUNCTIONS
item สามารถเป็นได้แค่ number หรือ string เท่านั้น
sortItem<number>(3142);
sortItem(3142);
Babel Coder
Babel Coder
https://www.babelcoder.com
any
AS
const product = fetchApi('/products')
const product = fetchApi('/products') as Product
Product
Babel Coder
Babel Coder
https://www.babelcoder.com
FETCH API
any
Babel Coder
Babel Coder
https://www.babelcoder.com
RECORD
Babel Coder
Babel Coder
https://www.babelcoder.com
PICK
Babel Coder
Babel Coder
https://www.babelcoder.com
OMIT
Babel Coder
Babel Coder
https://www.babelcoder.com
PARTIAL
Partial<Person>
Babel Coder
Babel Coder
https://www.babelcoder.com
RETURN TYPE
ดึงชนิดข้อมูลจาก getTheme ที่เป็นโค้ดฝั่ ง JavaScript มาสู่ TypeScript
Babel Coder
Babel Coder
https://www.babelcoder.com
PARAMETERS
[items: unknown[], index: number]
Babel Coder
Babel Coder
https://www.babelcoder.com
KEY OF
‘name’ | ‘socials’

More Related Content

More from NuttavutThongjor1

8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
NuttavutThongjor1
 
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
NuttavutThongjor1
 
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
NuttavutThongjor1
 
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
NuttavutThongjor1
 
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
NuttavutThongjor1
 
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
NuttavutThongjor1
 
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
NuttavutThongjor1
 
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfangular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
NuttavutThongjor1
 
mean stack mean stack mean stack mean stack
mean stack mean stack  mean stack  mean stackmean stack mean stack  mean stack  mean stack
mean stack mean stack mean stack mean stack
NuttavutThongjor1
 
pinia.pdf
pinia.pdfpinia.pdf
nuxt-rendering-modes.pdf
nuxt-rendering-modes.pdfnuxt-rendering-modes.pdf
nuxt-rendering-modes.pdf
NuttavutThongjor1
 
zustand.pdf
zustand.pdfzustand.pdf
zustand.pdf
NuttavutThongjor1
 
tanstack-query.pdf
tanstack-query.pdftanstack-query.pdf
tanstack-query.pdf
NuttavutThongjor1
 
nuxt-fundamentals.pdf
nuxt-fundamentals.pdfnuxt-fundamentals.pdf
nuxt-fundamentals.pdf
NuttavutThongjor1
 
vue-components.pdf
vue-components.pdfvue-components.pdf
vue-components.pdf
NuttavutThongjor1
 
vue-reactivity.pdf
vue-reactivity.pdfvue-reactivity.pdf
vue-reactivity.pdf
NuttavutThongjor1
 
vue-template.pdf
vue-template.pdfvue-template.pdf
vue-template.pdf
NuttavutThongjor1
 
recap-restful.pdf
recap-restful.pdfrecap-restful.pdf
recap-restful.pdf
NuttavutThongjor1
 
nuxt-tech-stack.pdf
nuxt-tech-stack.pdfnuxt-tech-stack.pdf
nuxt-tech-stack.pdf
NuttavutThongjor1
 
recap-js-and-ts.pdf
recap-js-and-ts.pdfrecap-js-and-ts.pdf
recap-js-and-ts.pdf
NuttavutThongjor1
 

More from NuttavutThongjor1 (20)

8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
8 iac.pdf 8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf8 iac.pdf
 
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
7 cicd.pdf 7 cicd.pdf 7 cicd.pdf 7 cicd.pdf
 
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf 6 GitOps คืออะไร.pdf
 
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
5 Kubernetes.pdf 5 Kubernetes.pdf 5 Kubernetes.pdf
 
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
3 Microservices.pdf 3 Microservices 3 Microservices.pdf.pdf
 
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
2 เทคโนโลยี cloud computing.pdf 2 เทคโนโลยี cloud computing.pdf
 
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
1 devops คืออะไร.pdf 1 devops คืออะไร.pdf
 
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfangular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
 
mean stack mean stack mean stack mean stack
mean stack mean stack  mean stack  mean stackmean stack mean stack  mean stack  mean stack
mean stack mean stack mean stack mean stack
 
pinia.pdf
pinia.pdfpinia.pdf
pinia.pdf
 
nuxt-rendering-modes.pdf
nuxt-rendering-modes.pdfnuxt-rendering-modes.pdf
nuxt-rendering-modes.pdf
 
zustand.pdf
zustand.pdfzustand.pdf
zustand.pdf
 
tanstack-query.pdf
tanstack-query.pdftanstack-query.pdf
tanstack-query.pdf
 
nuxt-fundamentals.pdf
nuxt-fundamentals.pdfnuxt-fundamentals.pdf
nuxt-fundamentals.pdf
 
vue-components.pdf
vue-components.pdfvue-components.pdf
vue-components.pdf
 
vue-reactivity.pdf
vue-reactivity.pdfvue-reactivity.pdf
vue-reactivity.pdf
 
vue-template.pdf
vue-template.pdfvue-template.pdf
vue-template.pdf
 
recap-restful.pdf
recap-restful.pdfrecap-restful.pdf
recap-restful.pdf
 
nuxt-tech-stack.pdf
nuxt-tech-stack.pdfnuxt-tech-stack.pdf
nuxt-tech-stack.pdf
 
recap-js-and-ts.pdf
recap-js-and-ts.pdfrecap-js-and-ts.pdf
recap-js-and-ts.pdf
 

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