TypeScript คืออะไร ทำไม Dev ต้องเปลี่ยนจาก JS

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;

let updateUser: PartialUser = {
  name: "Jane Doe"
};

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class MyClass {
  @Log
  add(x: number, y: number): number {
    return x + y;
  }
}

const myInstance = new MyClass();
myInstance.add(2, 3);

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

เปรียบเทียบ TypeScript กับ JavaScript

ข้อควรระวังและ Troubleshooting

"TypeScript ไม่ใช่ Silver Bullet! มันไม่ได้แก้ปัญหาทุกอย่างได้ ถ้าเราเขียน Code ห่วยๆ TypeScript ก็ช่วยอะไรไม่ได้มากนะ!"

    tsc --clean
    

ตัวอย่างจากประสบการณ์ 20 ปี

เครื่องมือแนะนำสำหรับ TypeScript

IDE และ Editor ที่รองรับ TypeScript

// ตัวอย่างการใช้ VS Code auto-completion
    const message: string = "Hello, TypeScript!";
    console.log(message.toUpper // กด tab จะขึ้น toUpperCase() ให้เลย
    

Linters และ Formatters

// ตัวอย่าง .eslintrc.js
    module.exports = {
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
      ]
    };
    

// ตัวอย่าง .prettierrc.js
    module.exports = {
      "trailingComma": "es5",
      "tabWidth": 2,
      "semi": false,
      "singleQuote": true
    };
    

Build Tools

// ตัวอย่าง webpack.config.js
    const path = require('path');
    module.exports = {
      entry: './src/index.ts',
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
          },
        ],
      },
      resolve: {
        extensions: ['.tsx', '.ts', '.js'],
      },
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
    };
    

Case Study ประสบการณ์จริงกับ TypeScript

FAQ คำถามที่พบบ่อยเกี่ยวกับ TypeScript

TypeScript ยากไหม? ต้องใช้เวลานานแค่ไหนถึงจะเริ่มใช้งานได้?

TypeScript ทำให้โค้ด JavaScript ใหญ่ขึ้นไหม?

TypeScript จำเป็นสำหรับโปรเจกต์ขนาดเล็กไหม?

TypeScript ทำงานร่วมกับ JavaScript library ได้ไหม?

TypeScript ทำให้ build process ช้าลงไหม?

TypeScript มีข้อเสียอะไรบ้าง?

สรุป: TypeScript คุ้มค่าที่จะเรียนรู้และใช้งานไหม?

Tips จากประสบการณ์ 20 ปี

Tip 1: อย่ากลัวที่จะเริ่มต้น

# ตัวอย่างการติดตั้ง TypeScript
npm install -g typescript

# สร้างไฟล์ tsconfig.json
tsc --init

Tip 2: เข้าใจเรื่อง Type Annotations ให้ลึกซึ้ง

// ตัวอย่างการใช้ Type Annotations
let age: number = 20;
let isLoggedIn: boolean = true;
let message: string = "Hello, TypeScript!";

function greet(name: string): string {
  return "Hello, " + name;
}

Tip 3: ใช้ประโยชน์จาก Interfaces และ Classes

// ตัวอย่างการใช้ Interface และ Class
interface User {
  id: number;
  name: string;
  email: string;
}

class UserAccount {
  id: number;
  name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

Tip 4: อย่ามองข้ามเรื่อง Configuration

// ตัวอย่าง tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Tip 5: เรียนรู้เรื่อง Generics ให้เข้าใจ

// ตัวอย่างการใช้ Generics
function identity(arg: T): T {
  return arg;
}

let myString: string = identity("hello");
let myNumber: number = identity(123);

Tip 6: ใช้ Linter และ Formatter

# ตัวอย่างการติดตั้ง ESLint และ Prettier
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

# สร้างไฟล์ .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
};

Tip 7: ใช้ Debugger ให้เป็น

Tip 8: เรียนรู้จาก Community

FAQ เพิ่มเติม

คำถาม: TypeScript จะมาแทน JavaScript เลยไหม?

คำถาม: TypeScript เหมาะกับ Frontend หรือ Backend มากกว่ากัน?

คำถาม: ต้องใช้ Framework อะไรถึงจะเหมาะกับ TypeScript?

คำถาม: TypeScript ยากกว่า JavaScript มากไหม?

ตารางเปรียบเทียบ JavaScript กับ TypeScript