👨💻
👨💻
👨💻
👨💻
มนศ.dev
ⓕ Page
Search…
หน้าแรก
คอร์ส
TypeScript 101
TypeScript คืออะไร?
TypeScript vs JavaScript
ติดตั้ง TypeScript
รู้จัก Basic Type ต่างๆ
การกำหนด Type ในฟังก์ชั่น
การสร้าง Interface
Literal Types
Type vs Interface
Union Types และ Intersection Types
Generics ขั้นพื้นฐาน
Optional Properties
Class (1)
Class (2)
ลองเขียนเว็บง่าย ๆ ด้วย TypeScript
Utility Types
Ruby ฉบับคนหัดโค้ด
ลิงก์
Facebook Page
GitHub
monosor.com
วงแหวนเว็บ
Powered By
GitBook
TypeScript คืออะไร?
แล้วทำไมต้อง TypeScript
TypeScript แบบขอสั้นๆ
มันคือ JavaScript แต่มี Type จบ
ทำไมต้องมี Type?
จริงๆ แล้ว JavaScript ก็มี Type แหละ แต่มันมีความเป็น Dynamically Typed แปลว่าประเภทของตัวแปรหรือฟังก์ชั่นต่างๆ จะเปลี่ยนได้ตลอดเวลา ต่างกับ TypeScript ที่จะเป็น Statically Typed คือต้องมีการกำหนดประเภทให้มัน
1
// JavaScript
2
let
a
=
42
// a เป็น int
3
let
b
=
'test'
// b เป็น string
4
b
=
a
*
10
// b กลายเป็น int (420)
Copied!
ข้อดีของ JavaScript แบบดั้งเดิมคือ เขียนง่าย เข้าใจง่าย และมีความอิสระ อยากแก้ค่าในตัวแปรแบบไหนก็ทำได้เลย
แล้วมันไม่ดียังไง?
ขอยกตัวอย่างง่ายๆ เช่นเวลาเราเขียนเว็บแล้วรับค่าจากฟอร์ม แต่ว่าเราลืมแปลงให้มันเป็น
int
1
function
sum
(
a
,
b
)
{
2
return
a
+
b
3
}
4
5
// สมมุติว่ามีค่าเป็น "10" ที่ดันเป็น string เพราะอ่านค่าจาก Form
6
sum
(
input
.
value
,
30
)
7
8
// อยากได้ 40 แต่ดันเป็น "1030" เพราะเป็นการเอาเลขมาต่อกันเฉยๆ ไม่ได้บวกกัน
Copied!
วิธีแก้ไขในแบบ JavaScript จะต้องแก้ที่ปลายเหตุ แบบนี้
1
function
sum
(
a
,
b
)
{
2
return
Number
(
a
)
+
Number
(
b
)
3
}
4
5
sum
(
"10"
,
30
)
// 40
Copied!
อีกตัวอย่างหนึ่งที่พบบ่อยคือการ "พิมพ์ผิด" อย่างเช่นการเรียกตัวแปรในออบเจ็กต์
1
const
user
=
{
2
firstName
:
"ประหยัด"
,
3
lastName
:
"จานโอชา"
,
4
job
:
"Dictator"
5
}
6
7
console
.
log
(
user
.
firstname
)
// undefined
Copied!
ถ้าเราเลือกใช้ TypeScript โค้ดจะเป็นแบบนี้แทน
1
function
sum
(
a
:
number
,
b
:
number
)
{
// กำหนดให้ a และ b ต้องเป็น type number
2
return
a
+
b
3
}
4
5
sum
(
"10"
,
30
)
Copied!
พอเรารันโค้ด (หรือใน Code Editor) จะขึ้น Error มาให้เราเห็นเลย ว่าเราใช้งานผิด Type
ส่วนการสร้างออบเจ็กต์ Type จะถูกสร้างตามโดยอัตโนมัติ (เรียกว่า
Type Inference
"การอนุมานประเภท" 😅) ทำให้เมื่อเรียก Attribute ที่ไม่มีอยู่แล้วจะเกิด Error ขึ้นเช่นกัน
นอกจากนี้ ถ้าไลบรารี่สนับสนุน TypeScript (ซึ่งส่วนใหญ่สนับสนุนแล้ว) เราจะรู้ได้ทันทีว่าสิ่งที่ Import มารับ Argument แบบไหน คืนค่าประเภทไหนออกมา แล้วเมื่อเรานำไปใช้แต่ใช้งานผิด ก็จะทำการเตือนเราทันที
ถ้าใช้เป็นแล้วดูผ่านๆ จะเข้าใจทันที ตอนนี้ดูแล้วยังไม่เข้าใจก็เออออห่อหมกไปก่อน 😆
ตัวอย่าง : useState จะคืน Array(2) มาแต่ดันใช้ Object ไปรับ
การใช้ TypeScript แทน JavaScript ถึงแม้ว่ามันจะมี Learning Curve ที่มากขึ้น แต่จะทำให้เราและทีมเขียนโค้ดได้อย่างรัดกุมมากขึ้น และเกิด Bug น้อยลงได้
อ้างอิง
https://www.typescriptlang.org
คอร์ส - Previous
TypeScript 101
Next
TypeScript vs JavaScript
Last modified
1yr ago
Copy link
Contents
TypeScript แบบขอสั้นๆ
ทำไมต้องมี Type?
อ้างอิง