TypeScript : เริ่มต้นเขียน React ด้วย TypeScript ไม่ยากอย่างที่คิด

สวัสดีครับ! ในบทความนี้เราจะมาเรียนรู้เกี่ยวกับ Typescript ซึ่งเป็นภาษาโปรแกรมมิ่งที่ถูกพัฒนาขึ้นโดย Microsoft และเป็นภาษาที่คอมไพล์ได้เป็น JavaScript ธรรมดา ซึ่งทำให้สามารถเขียนโค้ดใน Typescript ได้ง่าย และสามารถนำโค้ดที่เขียนด้วย Typescript มาใช้งานกับ JavaScript ได้โดยไม่ต้องมีการแปลงโค้ดใหม่อีกครั้ง

Typescript เป็นภาษาโปรแกรมมิ่งที่เพิ่มความแข็งแกร่งให้กับ JavaScript โดยมีการเพิ่มฟีเจอร์ต่างๆ เช่น การใช้งาน Types, Interfaces, Classes และ Generics เป็นต้น ซึ่งทำให้โค้ดของเรามีความน่าเชื่อถือและเป็นระเบียบมากขึ้น

ในการเรียนรู้ Typescript สิ่งแรกที่ต้องทำคือติดตั้ง Typescript ในเครื่องของเรา โดยใช้คำสั่ง npm install -g typescript ใน command prompt หรือ terminal ของเครื่องคอมพิวเตอร์ของเรา

เมื่อติดตั้ง Typescript เรียบร้อยแล้ว เราสามารถเริ่มเขียนโค้ด Typescript ได้เลย โดยเริ่มจากการสร้างไฟล์ .ts ที่เราต้องการเขียนโค้ด Typescript ลงไปในโฟลเดอร์ของโปรเจ็กต์ของเรา

ตัวอย่างโค้ด Typescript ง่ายๆ เพื่อสร้างฟังก์ชันบวกเลขสองตัว

function addNumbers(num1: number, num2: number): number {
  return num1 + num2;
}

console.log(addNumbers(5, 10)); // 15

การใช้งานที่สำคัญของ typescript

Typescript เป็นภาษาโปรแกรมมิ่งที่มีฟีเจอร์ที่มีประโยชน์มากมาย เช่น การใช้งาน Types, Interfaces, Classes, Generics, และการใช้งาน Module ซึ่งจะช่วยให้เราเขียนโค้ด Typescript ได้อย่างมีประสิทธิภาพและสามารถบูรณะโปรแกรมได้ง่ายขึ้น

1. Types

Typescript ช่วยเพิ่มความแข็งแกร่งให้กับ JavaScript ด้วยการระบุประเภทของข้อมูลในตัวแปร ซึ่งช่วยลดความผิดพลาดในการเขียนโค้ดและช่วยให้เข้าใจโค้ดได้ง่ายขึ้น

let age: number = 30;
let name: string = "John";
let isStudent: boolean = true;

2. Interfaces

Interfaces ช่วยให้เรากำหนดรูปแบบของ Object และช่วยให้เราสามารถเขียนโค้ดได้อย่างสมบูรณ์แบบ โดยไม่ต้องระบุค่าทุกอย่างใน Object

interface Person {
  name: string;
  age: number;
  isStudent: boolean;
}

function greet(person: Person) {
  console.log(`Hello ${person.name}`);
}

let person1 = { name: "John", age: 30, isStudent: true };
greet(person1); // Hello John

3. Classes

Classes ช่วยให้เราสามารถเขียนโค้ด Object-Oriented Programming (OOP) ได้ง่ายขึ้น โดยเราสามารถสร้างคลาสและสร้าง Object จากคลาสได้ง่ายขึ้น

class Person {
  name: string;
  age: number;
  isStudent: boolean;

  constructor(name: string, age: number, isStudent: boolean) {
    this.name = name;
    this.age = age;
    this.isStudent = isStudent;
  }

  greet() {
    console.log(`Hello ${this.name}`);
  }
}

let person1 = new Person("John", 30, true);
person1.greet(); // Hello John

4. Generics

Generics เป็นฟีเจอร์ที่ช่วยให้เราสามารถสร้างฟังก์ชันหรือคลาสที่ยืดหยุ่นขึ้น โดยการรับพารามิเตอร์ได้หลายประเภท หรือประเภทที่ไม่รู้ล่วงหน้า และช่วยลดโค้ดที่ซ้ำซ้อนลง

ตัวอย่างการใช้ Generics ในการสร้างฟังก์ชันที่มีค่าเป็นอะเรย์ของตัวเลข โดยที่จำนวนตัวเลขนั้นไม่รู้ล่วงหน้า

function reverseArray<T>(array: T[]): T[] {
  return array.reverse();
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverseArray(numbers); // [5, 4, 3, 2, 1]

const strings = ['apple', 'banana', 'orange'];
const reversedStrings = reverseArray(strings); // ['orange', 'banana', 'apple']

ในตัวอย่างนี้ เราสร้างฟังก์ชัน reverseArray ที่รับพารามิเตอร์เป็นอะเรย์ของประเภท T ซึ่งเป็น Generic type parameter ซึ่งอาจจะเป็นตัวเลขหรือสตริงหรือประเภทอื่น ๆ ได้ และฟังก์ชันนี้จะส่งคืนอะเรย์ของประเภท T ที่มีลำดับย้อนกลับ

ในการเรียกใช้ฟังก์ชัน reverseArray เราสามารถส่งอะเรย์ของตัวเลขหรือสตริงหรือประเภทอื่น ๆ ได้ และฟังก์ชันจะทำงานตามที่ต้องการ

Generics ยังสามารถใช้กับคลาสได้ด้วย เช่น

class Stack<T> {
  private items: T[] = [];

  push(item: T) {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 2

const stringStack = new Stack<string>();
stringStack.push('hello');
stringStack.push('world');
console.log(stringStack.pop()); // world

5. Modules

Modules ช่วยให้เราสามารถแยกโค้ดออกเป็นหลายไฟล์ และนำมาใช้งานร่วมกันได้โดยไม่ต้องมีการรวมโค้ดเข้าด้วยกันในไฟล์เดียวกัน

// file1.ts
export function add(a: number, b: number) {
  return a + b;
}

// file2.ts
import { add } from './file1';

console.log(add(2, 3)); // 5

Typescript เป็นภาษาโปรแกรมมิ่งที่สามารถช่วยให้เราเขียนโค้ดได้อย่างมีประสิทธิภาพและเข้าใจได้ง่ายขึ้น ถึงแม้ว่า Typescript จะมีความซับซ้อนกว่า JavaScript แต่เมื่อเข้าใจการใช้งาน Typescript แล้ว เราจะได้ประโยชน์จากฟีเจอร์ต่างๆ ที่มีให้เต็มที่ และช่วยลดความผิดพลาดในการเขียนโค้ดได้มากขึ้น ผู้เริ่มต้นที่สนใจเขียนโค้ด Typescript ควรศึกษาฟีเจอร์ต่างๆ ที่ Typescript มีให้ และเขียนโค้ดโดยใช้ฟีเจอร์เหล่านั้นเพื่อเข้าใจการใช้งาน Typescript ได้ดียิ่งขึ้น

เริ่มต้นเขียน React ด้วย TypeScript

การเริ่มต้นเขียน React ด้วย TypeScript มีขั้นตอนดังนี้

1. ติดตั้ง TypeScriptก่อนที่จะเริ่มเขียนโปรเจกต์ React ด้วย TypeScript เราต้องติดตั้ง TypeScript ก่อน โดยใช้คำสั่ง npm install -g typescript หรือ yarn global add typescript ถ้าใช้ yarn

2. สร้างโปรเจกต์ Reactใช้คำสั่ง npx create-react-app my-app --template typescript เพื่อสร้างโปรเจกต์ React ที่รองรับ TypeScript และตั้งชื่อโปรเจกต์เป็น my-app

3. ปรับแต่งไฟล์ tsconfig.jsonไฟล์ tsconfig.json เป็นไฟล์คอนฟิกของ TypeScript ในโปรเจกต์ ให้เราปรับแต่งไฟล์ tsconfig.json ดังนี้

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"]
}

4. เขียน Component ด้วย TypeScript

เมื่อเราเขียน Component ด้วย TypeScript ให้เราประกาศ type ของ props และ state ดังนี้

import React, { FC, useState } from 'react';

type Props = {
  name: string;
  age: number;
};

type State = {
  count: number;
};

const MyComponent: FC<Props> = ({ name, age }) => {
  const [state, setState] = useState<State>({ count: 0 });

  const handleClick = () => {
    setState((prevState) => ({ count: prevState.count + 1 }));
  };

  return (
    <div>
      <h1>
        Hello, {name} ({age})!
      </h1>
      <p>Count: {state.count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

รายละเอียดของตัวอย่างโค้ดด้านบนคือ

• เริ่มต้นด้วยการ import คอมโพเนนต์ React และ Hook useState จากไลบรารี React เข้ามาใช้งาน
• ประกาศ type ของ props และ state โดยใช้ type keyword และระบุ properties ของแต่ละ type ในรูปแบบ { property1: type1; property2: type2; }
• สร้าง Component โดยใช้ functional component และกำหนด type ของ props เป็น FC<Props> ที่ Props คือ type ของ props ที่เราประกาศไว้ ในตัวอย่างนี้ MyComponent รับ props ที่มี properties name และ age และ return ออกมาเป็น element ของ HTML
• ใช้ useState Hook ในการเก็บค่า state โดยกำหนด type ของ state เป็น State ที่ State คือ type ของ state ที่เราประกาศไว้ ในตัวอย่างนี้ MyComponent มี state ที่มี property count
• สร้าง function ชื่อ handleClick ในการเปลี่ยนค่า state โดยใช้ setState Hook
• ใช้ JSX เพื่อ render HTML และใช้ props และ state ในการแสดงผล
• export ออกมาเป็น default โดยใช้ export default MyComponent;

ข้อดีของการใช้ TypeScript ใน react

TypeScript เป็นภาษาที่สร้างขึ้นบน JavaScript แต่เพิ่มเติมเพื่อเพิ่มความชัดเจนและป้องกันข้อผิดพลาดของโค้ด ดังนั้นการใช้ TypeScript ใน React จะมีข้อดีหลายอย่างที่มีผลต่อการพัฒนาโปรเจค ดังนี้

1. ช่วยลดข้อผิดพลาด TypeScript ช่วยลดข้อผิดพลาดในโค้ดของ React โดยให้ผู้พัฒนาตรวจสอบชนิดของข้อมูลที่ได้รับมาและชนิดของข้อมูลที่ส่งออกไป นอกจากนี้ TypeScript ยังช่วยตรวจสอบการเรียกใช้ฟังก์ชัน และตัวแปรในโค้ดโดยตรง ช่วยลดข้อผิดพลาดของโค้ดและช่วยลดเวลาในการ debug หากเกิดข้อผิดพลาด
2. เพิ่มความปลอดภัย TypeScript ช่วยเพิ่มความปลอดภัยในการเขียนโค้ด React โดยให้คอมไพเลอร์ตรวจสอบการเรียกใช้โค้ดและชนิดของข้อมูลที่ถูกใช้ เพื่อให้มั่นใจได้ว่าโค้ดที่เขียนจะไม่ส่งผลกระทบต่อโปรเจคโดยไม่ได้ตั้งใจ
3. ช่วยตรวจสอบโค้ดก่อนที่จะรัน TypeScript ช่วยให้ผู้พัฒนาสามารถตรวจสอบโค้ดก่อนที่จะรันได้โดยใช้การตรวจสอบชนิดของข้อมูล ดังนั้นเมื่อเราเขียนโค้ด TypeScript เราสามารถตรวจสอบการเรียกใช้ฟังก์ชันและตัวแปรได้อย่างเป็นระบบ
4. ช่วยเพิ่มความเข้าใจในโค้ด TypeScript ช่วยให้โค้ด React ของเราอ่านง่ายและเข้าใจได้ง่ายขึ้น เนื่องจากมีการระบุชนิดของข้อมูลอย่างชัดเจน การเขียน TypeScript ช่วยให้เราเข้าใจได้ง่ายขึ้นว่าตัวแปรหรือฟังก์ชันที่ถูกใช้ในโค้ด React มีลักษณะอย่างไรและต้องการการใช้งานอย่างไร
5. ช่วยให้การทำงานร่วมกันระหว่างทีมงานเป็นไปได้อย่างสะดวก TypeScript ช่วยให้ทีมงานสามารถทำงานร่วมกันได้โดยมีความเข้าใจร่วมกันในรูปแบบของโค้ด การใช้ TypeScript ช่วยลดข้อผิดพลาดในการทำงานร่วมกัน และช่วยป้องกันการเกิดข้อผิดพลาดของโค้ดที่เกี่ยวข้องกันในโปรเจค

สรุปแล้ว TypeScript เป็นภาษาที่ช่วยเพิ่มความชัดเจนและป้องกันข้อผิดพลาดของโค้ด การใช้ TypeScript ใน React ช่วยให้โค้ด React ของเรามีความปลอดภัยมากขึ้น มีความเข้าใจง่ายและลดเวลาในการ debug โค้ด รวมถึงช่วยให้การทำงานร่วมกันของทีมงานเป็นไปได้โดยมีความเข้าใจร่วมกันในรูปแบบของโค้ด

สำหรับนักพัฒนา JavaScript

สำหรับนักพัฒนาที่มีประสบการณ์ในการเขียน JavaScript อยู่แล้ว อย่างเช่นเขียนโปรแกรมด้วยภาษา JavaScript หรือมีความรู้พื้นฐานเกี่ยวกับ JavaScript อยู่แล้ว สามารถเรียนรู้ TypeScript และ React ได้โดยไม่ยากเย็น

นี่คือสิ่งที่นักพัฒนาควรศึกษาเพิ่มเติมเมื่อเริ่มเขียน TypeScript และ React:

1. การใช้ TypeScript: นักพัฒนาควรศึกษาและเข้าใจวิธีการใช้ TypeScript และสิ่งที่ต่างจาก JavaScript ตั้งแต่การประกาศตัวแปร การใช้งานฟังก์ชันแบบ Arrow Function การใช้งาน Interface การใช้งาน Generic และอื่น ๆ
2. การใช้ React: นักพัฒนาควรศึกษา React และวิธีการสร้าง Component ส่วนประกอบของ React การใช้ JSX และอื่น ๆ
3. การใช้ Git: Git เป็นเครื่องมือที่ช่วยให้ทีมพัฒนาทำงานร่วมกันได้สะดวกขึ้น นักพัฒนาควรเรียนรู้การใช้ Git และเครื่องมืออื่น ๆ ที่ช่วยในการจัดการโค้ด
4. การใช้ NPM: NPM เป็นเครื่องมือที่ช่วยในการจัดการการติดตั้งแพคเกจและบริหารจัดการโค้ด นักพัฒนาควรเรียนรู้เกี่ยวกับ NPM และวิธีการใช้งาน
5. การใช้ Webpack: Webpack เป็นเครื่องมือที่ช่วยในการจัดการโค้ดและการเตรียมพร้อมสำหรับการติดตั้งโปรแกรม นักพัฒนาควรเรียนรู้วิธีการใช้งาน webpack
6. การใช้ ESLint: ESLint เป็นเครื่องมือที่ช่วยตรวจสอบคุณภาพของโค้ดและช่วยให้มีความเป็นไปได้ที่จะทำตามนโยบายการเขียนโค้ด นักพัฒนาควรเรียนรู้การใช้ ESLint และวิธีการตั้งค่า
7. การใช้ Redux: Redux เป็นส่วนหนึ่งของ React ที่ช่วยในการจัดการสถานะของแอปพลิเคชัน นักพัฒนาควรเรียนรู้วิธีการใช้งาน Redux เพื่อให้มีความเข้าใจเกี่ยวกับสถานะและการจัดการสถานะในแอปพลิเคชัน
8. การทดสอบ: นักพัฒนาควรเรียนรู้วิธีการเขียนโค้ดทดสอบเพื่อทดสอบคุณภาพของโค้ดและตรวจสอบความถูกต้องของโค้ด
9. การพัฒนาในแบบ Responsive Design: การพัฒนาในแบบ Responsive Design เป็นสิ่งที่สำคัญในการพัฒนาแอปพลิเคชัน React นักพัฒนาควรเรียนรู้เกี่ยวกับการพัฒนาในแบบ Responsive Design เพื่อให้แอปพลิเคชันของคุณสามารถทำงานได้ดีในหลายขนาดหน้าจอ
10. การใช้งาน TypeScript กับ React: นักพัฒนาควรเรียนรู้วิธีการใช้ TypeScript ร่วมกับ React ในการเขียนแอปพลิเคชัน การใช้งาน TypeScript ร่วมกับ React ช่วยให้มีความเข้าใจเกี่ยวกับโครงสร้างและสิ่งที่ต้องทำในการพัฒนาแอปพลิเคชัน React

การศึกษาเรื่องทั้งหมดนี้จะช่วยให้นักพัฒนามีความรู้ที่เพิ่มขึ้นเกี่ยวกับ JavaScript, TypeScript, และ React จะช่วยให้นักพัฒนาเข้าใจและประยุกต์ใช้เทคโนโลยีนี้ได้อย่างมีประสิทธิภาพสูงสุดในการพัฒนาแอปพลิเคชัน นอกจากนี้ นักพัฒนายังควรศึกษาเกี่ยวกับเทคโนโลยีอื่น ๆ เช่น Node.js, GraphQL, หรือ AWS Amplify เพื่อเพิ่มประสิทธิภาพการพัฒนาและเพิ่มคุณภาพของโค้ดแอปพลิเคชัน

สุดท้ายนี้ นักพัฒนาควรระมัดระวังในการใช้ TypeScript ร่วมกับ React ด้วย โดยในบางครั้ง TypeScript อาจทำให้การพัฒนาแอปพลิเคชันยากขึ้น แต่ถ้านักพัฒนาใช้ TypeScript อย่างถูกต้อง และมีความเข้าใจเกี่ยวกับการพัฒนา React และเทคโนโลยีที่เกี่ยวข้อง จะช่วยให้การพัฒนาแอปพลิเคชันได้รับประสิทธิภาพสูงสุดและมีคุณภาพของโค้ดที่ดีกว่า