Blockdit Logo
Blockdit Logo (Mobile)
สำรวจ
ลงทุน
คำถาม
เข้าสู่ระบบ
มีบัญชีอยู่แล้ว?
เข้าสู่ระบบ
หรือ
ลงทะเบียน
Shoper Gamer
•
ติดตาม
18 ส.ค. 2025 เวลา 06:27 • การศึกษา
Data Type ใน TypeScript คืออะไร
โดย
TypeScript เป็นภาษาที่เพิ่มความสามารถของ JavaScript ด้วยระบบ Static Type Checking โดยการกำหนด Data Types ที่ชัดเจนช่วยลดข้อผิดพลาด และ เพิ่มประสิทธิภาพการพัฒนา บทความนี้จะพาคุณรู้จักกับ Data Types ใน TypeScript อย่างครบถ้วน พร้อมตัวอย่างการใช้งานจริง
★
Data Type ใน TypeScript คืออะไร
Data Types ใน TypeScript คือการระบุประเภทของข้อมูลที่ตัวแปรสามารถเก็บได้ ช่วยให้
- ตรวจสอบความถูกต้องของข้อมูลขณะพัฒนา
- ป้องกันข้อผิดพลาดประเภทข้อมูล (Type Errors)
- ช่วยให้เครื่องมือพัฒนาทำงานได้มีประสิทธิภาพมากขึ้น
★
ประเภทของ Data Type ใน TypeScript
1) Primitive Types (ประเภทพื้นฐาน)
- number : ตัวเลขทุกชนิด (จำนวนเต็ม,ทศนิยม)
ตัวอย่าง: `let age: number = 25`
- string : ข้อความ
ตัวอย่าง: `let name: string = "John"`
- boolean : ค่าความจริง (true/false)
ตัวอย่าง: `let isActive: boolean = true`
- null : ค่าว่าง
ตัวอย่าง: `let data: null = null`
- undefined : ค่าไม่ได้กำหนด
ตัวอย่าง: `let value: undefined = undefined`
- symbol : ค่าเฉพาะที่ไม่ซ้ำกัน
ตัวอย่าง: `const id: symbol = Symbol("id")`
2) Object Types (ประเภทอ็อบเจกต์)
- object : อ็อบเจกต์ทั่วไป
ตัวอย่าง: `let user: object = { name: "John" }`
- array : อาร์เรย์
ตัวอย่าง: `let numbers: number[] = [1, 2, 3]`
- tuple : อาร์เรย์แบบกำหนดประเภทแต่ละตำแหน่ง
ตัวอย่าง: `let person: [string, number] = ["John", 25]`
- enum : กลุ่มค่าคงที่
ตัวอย่าง: `enum Color { Red, Green, Blue }`
- any : ชนิดข้อมูลใดก็ได้
ตัวอย่าง: `let data: any = "สามารถเป็นอะไรก็ได้"`
- void : ไม่มีค่าการคืนกลับ
ตัวอย่าง: `function log(): void { console.log('Hello') }`
- never : ไม่มีค่าการคืนกลับ (สำหรับฟังก์ชันที่ throw error เสมอ)
ตัวอย่าง: `function error(): never { throw new Error() }`
★
ประโยชน์
✅ ตรวจสอบข้อผิดพลาดขณะเขียนโค้ด
✅ ทำให้โค้ดอ่านง่าย และ บำรุงรักษาง่ายขึ้น
✅ ช่วยในการทำ Autocomplete และ IntelliSense
✅ ลดข้อบกพร่อง (Bugs) จากประเภทข้อมูลผิดพลาด
✅ เหมาะสำหรับโปรเจคขนาดใหญ่ที่ต้องทำงานเป็นทีม
★
ตัวอย่างการใช้งาน
1) การประกาศตัวแปรด้วย Type
```typescript
let username: string = "JohnDoe";
let age: number = 30;
let isAdmin: boolean = true;
```
2) การใช้ Interface สำหรับ Object
```typescript
interface User {
id: number;
name: string;
email?: string; // Optional property
}
const user: User = {
id: 1,
name: "John Doe"
};
```
3) การใช้ Union Types
```typescript
let id: string | number;
id = "ABC123"; // ทำงานได้
id = 123; // ทำงานได้
id = true; // Error (เพราะ true เป็นค่า boolean)
```
1
4) การใช้ Type Aliases
```typescript
type Point = {
x: number;
y: number;
};
const drawPoint = (point: Point) => {
console.log(`Drawing at ${point.x}, ${point.y}`);
};
```
★
เทคนิคการใช้งาน Types ขั้นสูง
1) Generics
```typescript
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("Hello");
```
2) Type Guards
```typescript
function printId(id: string | number) {
if (typeof id === "string") {
console.log(id.toUpperCase());
} else {
console.log(id.toFixed(2));
}
}
```
★
ข้อควรระวังในการใช้ Types
❌ หลีกเลี่ยงการใช้ `any` มากเกินไป
❌ อย่าลืมตรวจสอบ null/undefined ด้วย Optional Chaining (`?.`)
❌ ระวังการ Infer Type อัตโนมัติในบางกรณี
✏️ Shoper Gamer
>>
https://shopergamer.vercel.app/
✓
TypeScript คืออะไร ทำไมคุณถึงควรลองใช้ 👇
>>
https://www.blockdit.com/posts/688b0c3eb2ed8f60ad5b1d3f
Credit :
👇
●
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
●
https://www.typescriptlang.org/docs/handbook/basic-types.html
●
https://www.w3schools.com/typescript/typescript_simple_types.php
●
https://www.geeksforgeeks.org/typescript/data-types-in-typescript/
เทคโนโลยี
ข่าวรอบโลก
typescript
บันทึก
3
1
3
1
โฆษณา
ดาวน์โหลดแอปพลิเคชัน
© 2025 Blockdit
เกี่ยวกับ
ช่วยเหลือ
คำถามที่พบบ่อย
นโยบายการโฆษณาและบูสต์โพสต์
นโยบายความเป็นส่วนตัว
แนวทางการใช้แบรนด์ Blockdit
Blockdit เพื่อธุรกิจ
ไทย