TypeScript ใช้กับ FiveM ได้ไหม? วิธีใช้ TypeScript เขียน FiveM Script

August 24, 2026

TypeScript ใช้กับ FiveM ได้ และเป็นตัวเลือกที่ดีมากสำหรับ Developer ที่ต้องการพัฒนา Resource ขนาดกลางถึงใหญ่ โดยเฉพาะคนที่มีพื้นฐาน JavaScript, Node.js หรือ Web Development อยู่แล้ว

อย่างไรก็ตาม สิ่งสำคัญที่ต้องเข้าใจก่อนคือ FiveM ไม่มี TypeScript Runtime แยกต่างหาก

กระบวนการทำงานโดยทั่วไปคือ

TypeScript
↓
Compile / Build
↓
JavaScript
↓
FiveM JavaScript Runtime

ดังนั้น TypeScript จะช่วยตรวจ Type, แนะนำ Function, ตรวจ Error บางประเภทก่อน Run และทำให้ Project ขนาดใหญ่ดูแลง่ายขึ้น แต่สุดท้าย Code ที่ FiveM ทำงานจริงยังเป็น JavaScript

บทความนี้จะอธิบายว่า TypeScript FiveM คืออะไร ใช้อย่างไร ต้องติดตั้งอะไร ตั้งค่า Project อย่างไร และเหมาะกับใครเมื่อเทียบกับ JavaScript และ Lua

① TypeScript คืออะไร

TypeScript เป็นภาษาที่พัฒนาต่อยอดจาก JavaScript

แนวคิดง่าย ๆ คือ

JavaScript
+
Type System
+
Developer Tooling
=
TypeScript

ตัวอย่าง JavaScript

const money = 5000;

TypeScript สามารถระบุ Type ได้

const money: number = 5000;

หรือ

const playerName: string = 'John';
const isAdmin: boolean = false;

TypeScript สามารถตรวจ Code ก่อน Compile และช่วยจับข้อผิดพลาดบางอย่างตั้งแต่ Development Time

② TypeScript ใช้กับ FiveM ได้จริงหรือไม่

ได้

เอกสาร Cfx.re มี TypeScript Definition สำหรับ FiveM JavaScript API และแนะนำ Official NPM Packages ได้แก่

@citizenfx/client
@citizenfx/server

สำหรับ Type Definitions และ Auto Completion

ดังนั้น Developer สามารถเขียน

client.ts
server.ts

จากนั้น Compile เป็น

client.js
server.js

แล้วให้ FiveM โหลด JavaScript ที่ Build แล้ว

③ TypeScript เป็นภาษาที่ FiveM รองรับโดยตรงหรือไม่

ต้องแยกคำว่า “ใช้ได้” กับ “Runtime โดยตรง” ออกจากกัน

FiveM มี Scripting Runtime หลัก เช่น

Lua
JavaScript
C#

แต่ TypeScript ไม่ใช่ Runtime เพิ่มอีกตัวหนึ่ง

FiveM ไม่ได้อ่านข้อความ

client.ts

แล้วรันเหมือน JavaScript โดยอัตโนมัติใน Workflow ปกติ

โดยทั่วไปต้องทำ

client.ts
↓
TypeScript Compiler / Bundler
↓
client.js
↓
FiveM

ดังนั้นถ้ามีคนถามว่า

FiveM เขียน TypeScript ได้ไหม

คำตอบคือ

ได้ แต่ต้อง Build เป็น JavaScript ก่อน

④ ทำไม FiveM Developer ถึงใช้ TypeScript

ข้อดีสำคัญที่สุดคือ Type Safety

สมมติ JavaScript มี Function

function giveMoney(amount) {
    return amount + 100;
}

ถ้าเผลอส่ง String

giveMoney('500');

JavaScript อาจยังทำงานต่อและได้ผลลัพธ์ที่ไม่ตรงกับสิ่งที่ต้องการ

TypeScript สามารถกำหนดว่า

function giveMoney(amount: number): number {
    return amount + 100;
}

ถ้าเรียก

giveMoney('500');

TypeScript จะเตือนตั้งแต่ก่อน Build

สำหรับ Resource ขนาดใหญ่ การจับ Error ก่อน Runtime มีประโยชน์มาก

⑤ TypeScript ช่วย FiveM Project อย่างไร

TypeScript ช่วยด้าน

Type Checking
Auto Completion
Refactoring
Function Signature
Interface
Object Structure
Event Data
Export Type
Callback Type
Database Result
Project Maintenance

โดยเฉพาะเมื่อ Resource มี Code หลายพันบรรทัด

Type ที่ชัดเจนช่วยให้ Developer รู้ว่าข้อมูลแต่ละตัวควรมีรูปแบบอย่างไร

⑥ ตัวอย่าง Object FiveM แบบ TypeScript

สมมติเรามี Player Data

JavaScript อาจเขียน

const player = {
    id: 1,
    name: 'John',
    job: 'police',
    money: 5000
};

TypeScript สามารถสร้าง Interface ได้

interface PlayerData {
    id: number;
    name: string;
    job: string;
    money: number;
}

จากนั้น

const player: PlayerData = {
    id: 1,
    name: 'John',
    job: 'police',
    money: 5000
};

ถ้าใส่ผิด เช่น

money: '5000'

TypeScript สามารถเตือนได้ก่อนนำ Script ไป Run

⑦ TypeScript เหมาะกับ FiveM Resource ใหญ่หรือไม่

เหมาะมาก

โดยเฉพาะ Resource ที่มี

Client
Server
Shared Types
Database
NUI
Exports
Events
Callbacks

จำนวนมาก

ตัวอย่าง Project อาจมี

my_resource/
├── src/
│   ├── client/
│   │   └── index.ts
│   ├── server/
│   │   └── index.ts
│   └── shared/
│       └── types.ts
├── dist/
│   ├── client.js
│   └── server.js
├── package.json
├── tsconfig.json
└── fxmanifest.lua

Developer เขียน Code ใน src

แล้ว Build ออกไปที่ dist

จากนั้น FiveM โหลดไฟล์ใน dist

⑧ ต้องติดตั้งอะไรเพื่อใช้ TypeScript กับ FiveM

สำหรับ Project พื้นฐานควรมี

Node.js
npm
TypeScript
Visual Studio Code
FiveM Type Definitions

เริ่มจากสร้าง Project

npm init -y

จากนั้นติดตั้ง TypeScript

npm install --save-dev typescript

หากเขียน Client FiveM สามารถติดตั้ง

npm install --save-dev @citizenfx/client

หากเขียน Server

npm install --save-dev @citizenfx/server

หรือใช้ทั้งสอง Package หาก Project มีทั้ง Client และ Server

⑨ @citizenfx/client คืออะไร

@citizenfx/client เป็น Official NPM Package สำหรับ Type Definitions ฝั่ง Client ของ FiveM

ช่วยให้ Editor รู้จัก Function เช่น

PlayerPedId();
GetEntityCoords(...);
RegisterCommand(...);

และ API ที่เกี่ยวข้อง

ข้อดีคือเวลาเขียนใน Visual Studio Code จะได้

Auto Completion
Parameter Hint
Type Hint
ตรวจชื่อ Function
ลด Typo

ซึ่งช่วยให้เขียน FiveM Script ได้เร็วขึ้น

⑩ @citizenfx/server คืออะไร

@citizenfx/server ใช้สำหรับ Type Definitions ฝั่ง Server

เช่น API ที่เกี่ยวข้องกับ

Server Events
Commands
Exports
Server Natives
Runtime Functions

ตัวอย่างติดตั้ง

npm install --save-dev @citizenfx/server

จากนั้น TypeScript Project สามารถใช้ Definition เหล่านี้ในการตรวจ Code

⑪ วิธีสร้าง tsconfig.json

หลังติดตั้ง TypeScript สามารถสร้าง Config ด้วย

npx tsc --init

จะได้ไฟล์

tsconfig.json

ตัวอย่าง Configuration แบบพื้นฐาน

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

นี่เป็นเพียงตัวอย่างเริ่มต้น

Project จริงอาจใช้ Build Tool หรือ Module Format แตกต่างกัน

ควรตั้งค่าตาม Architecture ของ Resource

⑫ target ES2017 คืออะไร

เอกสาร Cfx.re ระบุว่า FiveM JavaScript Runtime มี ES2017 Standard Library ใน Client Runtime

ดังนั้น Developer ควรพิจารณา Target JavaScript ให้เข้ากับ Runtime ที่ Resource จะทำงาน

ตัวอย่าง

"target": "ES2017"

ช่วยให้ TypeScript Compile Syntax ให้เหมาะกับ Environment มากขึ้น

แต่ถ้าใช้ Bundler เช่น esbuild หรือเครื่องมืออื่น ต้องตรวจ Configuration ของ Bundler เพิ่มเติมด้วย

⑬ สร้าง TypeScript FiveM Resource ตัวแรก

สมมติสร้าง Folder

ts_example/

โครงสร้าง

ts_example/
├── src/
│   └── client.ts
├── dist/
├── fxmanifest.lua
├── package.json
└── tsconfig.json

ใน

src/client.ts

เขียน

console.log('TypeScript FiveM started');

จากนั้น Build

npx tsc

จะได้ไฟล์ JavaScript ใน

dist/

เช่น

dist/client.js

FiveM จะโหลดไฟล์นี้แทน .ts

⑭ วิธีเขียน fxmanifest.lua สำหรับ TypeScript FiveM

fxmanifest.lua ไม่จำเป็นต้องรู้ว่า Source Code เดิมเป็น TypeScript

เพราะ FiveM โหลด JavaScript ที่ Build แล้ว

ตัวอย่าง

fx_version 'cerulean'
game 'gta5'

author 'Your Name'
description 'FiveM TypeScript Example'
version '1.0.0'

client_script 'dist/client.js'

Flow คือ

src/client.ts
↓
Build
↓
dist/client.js
↓
fxmanifest.lua
↓
FiveM JavaScript Runtime

นี่คือหลักสำคัญของ TypeScript FiveM

⑮ วิธีสร้าง Command FiveM ด้วย TypeScript

ใน client.ts

RegisterCommand('hello', () => {
    console.log('Hello from TypeScript!');
}, false);

Compile แล้ว FiveM จะรัน JavaScript ที่ได้จาก Code นี้

สามารถเพิ่ม Parameter ได้ เช่น

RegisterCommand(
    'hello',
    (_source: number, args: string[]) => {
        const name = args[0];

        if (name) {
            console.log(`Hello ${name}`);
        }
    },
    false
);

TypeScript ทำให้เราระบุได้ว่า

source → number
args → string[]

ช่วยให้เข้าใจ Code ได้ชัดเจนขึ้น

⑯ วิธีใช้ Native ด้วย TypeScript

สามารถเรียก FiveM Native ได้เหมือน JavaScript

ตัวอย่าง

const ped = PlayerPedId();
const coords = GetEntityCoords(ped);

console.log(coords);

หรือ

RegisterCommand('coords', () => {
    const ped = PlayerPedId();
    const coords = GetEntityCoords(ped);

    console.log(coords);
}, false);

Type Definitions จาก Cfx.re จะช่วยให้ Editor รู้จัก Native เหล่านี้

⑰ Type ของ Coordinates ใน JavaScript FiveM เป็นอย่างไร

ตรงนี้ต้องระวัง เพราะ JavaScript Runtime และ Lua CfxLua จัดการ Vector ต่างกันในหลายกรณี

ใน JavaScript Native บางตัวอาจคืนค่าที่ Represent เป็น Array หรือ Type ตาม Definition ของ FiveM

ดังนั้นอย่า Copy Lua Code เช่น

coords.x

มาแปลงเป็น JavaScript แบบตรง ๆ โดยไม่ตรวจ Type Definition

ควรดู Type จาก Editor และ Native Documentation ก่อน

นี่เป็นหนึ่งในข้อดีของ TypeScript เพราะจะช่วยบอกว่า Return Value มี Structure แบบใด

⑱ TypeScript Client Script กับ Server Script ต่างกันอย่างไร

เหมือน JavaScript FiveM

Client TypeScript เมื่อ Compile แล้วจะรันใน

FiveM Client JavaScript Runtime

Server TypeScript จะ Compile แล้วรันใน

FiveM Server JavaScript Runtime

ดังนั้น Environment ต่างกัน

Client

เหมาะกับ

Player
Vehicle
Ped
Marker
Camera
Control
NUI

Server

เหมาะกับ

Player Validation
Database
Permission
Server Logic
Security
Events

อย่าใช้ API Client ใน Server เพียงเพราะ TypeScript Compile ผ่าน

Runtime Context ยังสำคัญเหมือนเดิม

⑲ วิธีแยก Client และ Server Types

Project ใหญ่ควรแยก Folder ชัดเจน

ตัวอย่าง

src/
├── client/
│   └── index.ts
├── server/
│   └── index.ts
└── shared/
    └── types.ts

shared/types.ts อาจมี

export interface PlayerJob {
    name: string;
    grade: number;
}

จากนั้นทั้ง Client และ Server สามารถ Import Type เดียวกันมาใช้

ช่วยลดปัญหา Data Structure ไม่ตรงกัน

⑳ Event FiveM ใช้ TypeScript ได้ไหม

ได้

ตัวอย่าง Client

RegisterCommand('testserver', () => {
    emitNet('example:hello', 'John');
}, false);

Server

onNet('example:hello', (name: string) => {
    console.log(`Hello ${name}`);
});

TypeScript ช่วยระบุว่า Parameter ที่คาดหวังคือ

name: string

แต่มีเรื่องสำคัญมาก:

TypeScript ไม่ได้ Validate Network Data ตอน Runtime

㉑ TypeScript ป้องกัน Hacker ส่งข้อมูลผิด Type ได้ไหม

ไม่ได้โดยอัตโนมัติ

นี่เป็นจุดที่ FiveM Developer ต้องเข้าใจให้ชัด

สมมติ Server เขียน

onNet('shop:buy', (amount: number) => {
    // ...
});

การเขียน

amount: number

ไม่ได้หมายความว่า Client ที่ไม่ปลอดภัยจะส่ง String, Object หรือค่าผิดปกติเข้ามาไม่ได้

TypeScript Type หายไปหลัง Compile

ดังนั้น Server ยังต้องตรวจ Runtime Data เช่น

onNet('shop:buy', (amount: unknown) => {
    if (typeof amount !== 'number') {
        return;
    }

    if (!Number.isFinite(amount)) {
        return;
    }

    if (amount <= 0) {
        return;
    }

    // Server logic
});

นี่สำคัญมากสำหรับ FiveM Security

㉒ TypeScript Type หายไปไหนหลัง Compile

TypeScript Type ส่วนใหญ่มีไว้ตอน Development

เช่น

const money: number = 5000;

หลัง Compile อาจกลายเป็น JavaScript ประมาณ

const money = 5000;

: number ไม่ได้อยู่ใน Runtime

ดังนั้น TypeScript ช่วย Developer ป้องกัน Bug แต่ไม่ใช่ Runtime Security System

㉓ ควร Validate Event Data อย่างไร

Network Event ทุกตัวที่รับข้อมูลจาก Client ควรถือว่า Input อาจไม่น่าเชื่อถือ

ตัวอย่าง

onNet(
    'shop:buy',
    (itemName: unknown, amount: unknown) => {
        if (typeof itemName !== 'string') {
            return;
        }

        if (
            typeof amount !== 'number' ||
            !Number.isInteger(amount) ||
            amount < 1 ||
            amount > 100
        ) {
            return;
        }

        // ตรวจ Player
        // ตรวจ Item
        // ตรวจราคา
        // ตรวจเงิน
        // แล้วจึงซื้อ
    }
);

TypeScript กับ Server Validation ควรใช้ร่วมกัน

ไม่ใช่เลือกอย่างใดอย่างหนึ่ง

㉔ ใช้ Interface กับ Event Data ได้อย่างไร

สมมติเรามี

interface BuyItemData {
    item: string;
    amount: number;
}

สามารถใช้เป็น Type ภายใน Code ได้

แต่ถ้าข้อมูลมาจาก Client ยังต้อง Validate ก่อน Cast

ไม่ควรเขียน

const data = clientData as BuyItemData;

แล้วเชื่อทันทีว่า Data ถูกต้อง

as เป็นเพียงการบอก TypeScript ว่า Developer เชื่อว่า Type นี้ถูกต้อง

มันไม่ได้เปลี่ยนหรือ Validate Object จริง

㉕ TypeScript ใช้ Library Validation ได้ไหม

ได้

Project ขนาดใหญ่อาจใช้ Runtime Validation Library เพื่อ Validate Data

แนวคิดคือ

Client Data
↓
Runtime Schema Validation
↓
Type-safe Data
↓
Business Logic

แต่ต้องตรวจว่า Library นั้นเหมาะกับ Runtime และ Bundle Size ของ Resource

สำหรับระบบเล็ก การตรวจด้วย

typeof
Array.isArray()
Number.isInteger()

อาจเพียงพอ

ไม่จำเป็นต้องเพิ่ม Dependency จำนวนมากทุก Project

㉖ TypeScript FiveM ใช้ Export ได้ไหม

ได้

ตัวอย่าง

exports('getPrice', (): number => {
    return 500;
});

Resource อื่นสามารถเรียก Export ตาม API ของ JavaScript Runtime

ข้อดีของ TypeScript คือสามารถสร้าง Type ของ Export ได้

Cfx.re มี Interface ชื่อ

CitizenExports

ที่สามารถ Extend เพื่อเพิ่ม Type ของ Custom Export ได้

㉗ CitizenExports คืออะไร

FiveM JavaScript Type Definitions มี Generic Interface สำหรับ Export

Developer สามารถ Extend เช่น

declare global {
    interface CitizenExports {
        my_resource: {
            getPrice(): number;
        };
    }
}

export {};

จากนั้นเมื่อเรียก Export ใน Project ที่ตั้งค่า Type ถูกต้อง Editor สามารถรู้ว่า

getPrice()

คืนค่า number

ช่วยให้ Resource หลายตัวเชื่อมกันได้ปลอดภัยขึ้นในระดับ Compile Time

㉘ TypeScript ใช้กับ Callback ได้ไหม

ได้

โดยเฉพาะถ้า Framework หรือ Library มี Callback API

สามารถกำหนด Return Type เช่น

interface PlayerData {
    name: string;
    money: number;
}

แล้ว Function ที่คืนข้อมูล

async function getPlayerData(): Promise<PlayerData> {
    return {
        name: 'John',
        money: 5000
    };
}

TypeScript ช่วยให้ Developer รู้ว่า Promise เมื่อ Resolve แล้วจะได้ข้อมูลรูปแบบใด

เรื่องนี้มีประโยชน์มากกับ Database และ Async Code

㉙ async await ใช้กับ FiveM TypeScript ได้ไหม

ได้ เพราะหลัง Compile เป็น JavaScript Runtime สามารถใช้ Pattern ที่ JavaScript Environment รองรับได้

ตัวอย่าง

async function loadData(): Promise<void> {
    const result = await someAsyncFunction();

    console.log(result);
}

แต่ต้องเข้าใจว่า Async ไม่ได้ทำให้ Code ทุกอย่างเร็วขึ้น

และ Server Node.js Runtime มีข้อควรระวังเรื่อง Thread Affinity หาก Callback จาก Node API จะเรียก CitizenFX Server Native

㉚ TypeScript Server ใช้ Node.js ได้ไหม

ได้ หลัง Compile เป็น JavaScript

FiveM Server JavaScript Runtime ปัจจุบันมี Customized Node.js Runtime

ดังนั้นสามารถใช้ Node API หรือ Package ที่รองรับได้

เช่น

import fs from 'fs';

หรือขึ้นกับ Module Configuration อาจใช้ require

const fs = require('fs');

แต่ต้องตรวจ

Module Format
TypeScript Config
Node Version
FiveM Runtime
Package Compatibility

ให้ตรงกัน

㉛ FiveM TypeScript ใช้ Node.js 22 ได้ไหม

ฝั่ง Server สามารถเลือก Node.js 22 ได้ผ่าน Resource Manifest

ตัวอย่าง

node_version '22'

เช่น

fx_version 'cerulean'
game 'gta5'

node_version '22'

server_script 'dist/server.js'

Cfx.re ระบุว่า Server JavaScript Runtime ค่าเริ่มต้นยังเป็น Node.js 16 และมี Node.js 22 ให้เลือก

ถ้า Package ต้องใช้ Node รุ่นใหม่จึงค่อยพิจารณาเปิด

㉜ TypeScript ใช้ npm Package ได้ไหม

ได้ใน Workflow ที่เหมาะสม โดยเฉพาะฝั่ง Server

สามารถติดตั้ง Package ผ่าน npm

npm install package-name

แต่ต้องระวังว่า Package บางตัวอาจ

ต้องใช้ Node Version ใหม่
พึ่ง Native Binary
ใช้ API ที่ FiveM ไม่มี
เหมาะกับ Browser เท่านั้น
เพิ่ม Resource Size มาก

อย่าติดตั้ง Package เพียงเพราะมี Function ที่เขียนเองได้ไม่กี่บรรทัด

Dependency ทุกตัวเพิ่มภาระในการ Maintain

㉝ TypeScript Client ใช้ Node.js API ได้ไหม

ไม่ได้เหมือน Server

FiveM Client JavaScript Runtime ไม่มี Node.js-specific API ทั่วไป

ดังนั้น Code TypeScript ฝั่ง Client ต่อให้ Editor Compile ผ่าน ก็ไม่ควรสมมติว่าใช้

fs
path
process

แบบ Node.js Server ได้ทั้งหมด

ต้องแยก Environment

Client
≠
Server Node Runtime

เหมือน JavaScript FiveM ปกติ

㉞ TypeScript Client ใช้ document ได้ไหม

ไม่ได้ใน Client Script ปกติ

ตัวอย่าง

document.getElementById('menu');

ต้องใช้ใน NUI Browser Context

ไม่ใช่

src/client/index.ts

ที่รันใน FiveM Client Runtime

ถ้าต้องทำ UI ควรแยก Project หรือ Folder สำหรับ NUI

㉟ TypeScript ใช้สร้าง NUI ได้ไหม

ได้ และเหมาะมาก

ตัวอย่าง Structure

src/
├── client/
│   └── index.ts
├── server/
│   └── index.ts
└── nui/
    └── app.ts

NUI TypeScript จะ Build เป็น JavaScript สำหรับ Browser

ส่วน Client/Server TypeScript Build สำหรับ FiveM Runtime

แม้ทั้งหมดเป็น TypeScript แต่ Target Environment ต่างกัน

ต้องกำหนด Build Config ให้เหมาะสม

㊱ TypeScript ใช้กับ React FiveM ได้ไหม

ได้ใน NUI

ตัวอย่าง

React + TypeScript
↓
Build
↓
HTML / CSS / JavaScript
↓
FiveM NUI

นี่เป็น Stack ที่เหมาะกับ UI ขนาดใหญ่ เช่น

Phone
Inventory
MDT
Admin Panel
Character Creator
Banking

แต่ถ้า UI มีเพียงเมนูง่าย ๆ ไม่จำเป็นต้องใช้ React

เลือก Tool ให้เหมาะกับความซับซ้อนของ Project

㊲ TypeScript ใช้กับ Vue หรือ Svelte ได้ไหม

ได้ในหลักการเดียวกัน

สามารถใช้

Vue + TypeScript
Svelte + TypeScript
React + TypeScript

แล้ว Build เป็น Static Web Assets สำหรับ NUI

แต่ต้องกำหนด ui_page และ files ใน fxmanifest.lua ให้ถูกต้อง

Framework Front-end ไม่ได้เปลี่ยนหลักการสื่อสารระหว่าง NUI กับ FiveM Client

㊳ TypeScript ใช้กับ Database FiveM ได้ไหม

ได้

ตัวอย่าง Server TypeScript

TypeScript
↓
Compile
↓
JavaScript Server
↓
Database Library
↓
MySQL / MariaDB

TypeScript มีประโยชน์มากกับ Database เพราะสามารถสร้าง Interface ให้ Row ที่ Query กลับมา

ตัวอย่าง

interface UserRow {
    id: number;
    identifier: string;
    money: number;
}

จากนั้น Function อาจกำหนด Return Type

async function getUser(): Promise<UserRow | null> {
    // query
    return null;
}

ช่วยลดความสับสนเรื่อง Column และ Data Structure

㊴ TypeScript ใช้กับ oxmysql ได้ไหม

ได้หากใช้ API และ Version ที่รองรับ JavaScript

แนวคิดคือ

Server TypeScript
↓
Build
↓
Server JavaScript
↓
oxmysql
↓
MySQL / MariaDB

ควรตรวจ Documentation ของ oxmysql Version ที่ใช้งานจริง เพราะ Export และ Typing อาจแตกต่างกันตาม Version

อย่าอาศัยตัวอย่างเก่าหลายปีโดยไม่ตรวจ API ปัจจุบัน

㊵ TypeScript ใช้กับ ESX ได้ไหม

ได้ในระดับ Integration ของ Resource แต่ต้องดู API ของ ESX และ Resource ที่ใช้อยู่

เนื่องจาก Ecosystem ของ ESX มี Lua Resource จำนวนมาก การรู้ Lua ยังมีประโยชน์สำหรับการแก้ Script ที่มีอยู่

แต่ Resource Custom สามารถเขียนด้วย TypeScript แล้วสื่อสารกับ ESX ผ่าน

Event
Export
Callback
Network Event

ตาม API ที่ Framework เปิดไว้

㊶ TypeScript ใช้กับ QBCore ได้ไหม

ได้เช่นกันในหลักการเดียวกัน

FiveM ไม่ได้บังคับให้ Resource ทุกตัวใน QBCore Server ต้องเป็น Lua

แต่ Developer ต้องเข้าใจว่า API ของ Framework เป็นอย่างไร

ตัวอย่าง Architecture

TypeScript Resource
↓
FiveM Event / Export
↓
QBCore
↓
Server Logic

ถ้าต้องแก้ Resource QBCore ที่เขียน Lua โดยตรง ก็ยังต้องอ่าน Lua ให้ได้

㊷ TypeScript ใช้กับ Qbox ได้ไหม

ได้ หาก Integration API รองรับ

สิ่งสำคัญคือแยก

Programming Language

ออกจาก

Framework

TypeScript/JavaScript เป็นภาษาที่ใช้สร้าง Resource

ส่วน Qbox เป็น Framework อีก Layer หนึ่ง

ดังนั้น Resource TypeScript สามารถสื่อสารกับ Framework ผ่าน API ที่มีได้

㊸ TypeScript กับ JavaScript FiveM ต่างกันอย่างไร

หัวข้อ	JavaScript	TypeScript
FiveM รันโดยตรง	✅	❌ ต้อง Build
Type Checking	จำกัด	✅
Auto Completion	ดี	ดีมาก
Interface	ไม่มี Type Interface	✅
Compile Step	ไม่จำเป็น	✅
Project เล็ก	ง่าย	อาจเกินจำเป็น
Project ใหญ่	ดี	ดีมาก
Refactoring	ดี	ดีมาก
Runtime	JavaScript	JavaScript หลัง Build

TypeScript เพิ่มขั้นตอน Build แต่แลกกับ Developer Experience ที่ดีขึ้น

㊹ TypeScript กับ Lua FiveM เลือกอะไรดี

ถ้าไม่เคย Programming มาก่อน

Lua มักเริ่มต้นง่ายกว่า

ถ้าเป็น JavaScript Developer อยู่แล้ว

TypeScript เป็นตัวเลือกที่น่าสนใจมาก

ถ้าทำ Project ใหญ่และต้องการ Type Safety

TypeScript ได้เปรียบ

ถ้าต้องแก้ Community Script ของ ESX/QBCore จำนวนมาก

Lua ยังเป็นภาษาที่ควรรู้

จึงไม่มีคำตอบว่าภาษาไหนดีที่สุดสำหรับทุกคน

㊺ TypeScript ทำให้ FiveM Script เร็วขึ้นไหม

ไม่โดยอัตโนมัติ

หลัง Build TypeScript กลายเป็น JavaScript

Performance จริงจึงขึ้นกับ

JavaScript ที่ Output
Algorithm
Tick
Loop
Native Calls
Event Frequency
Network
Database
NUI

TypeScript ช่วย Code Quality มากกว่าช่วย FPS หรือ Resmon โดยตรง

㊻ TypeScript ทำให้ Resmon ลดลงไหม

ไม่

ถ้าเขียน

setTick(() => {
    // งานหนักทุก Tick
});

Resource ก็สามารถกิน CPU สูงได้เหมือน JavaScript ปกติ

TypeScript ไม่ Optimize FiveM Game Logic ให้อัตโนมัติ

Developer ยังต้องใช้

Resource Monitor
Profiler
Cache
Event-driven Design
Interval ที่เหมาะสม

เพื่อ Optimize

㊼ Error TypeScript FiveM ที่พบบ่อย

Cannot find name PlayerPedId

มักเกี่ยวกับ Type Definitions หรือ TypeScript Configuration

ตรวจว่าได้ติดตั้ง

@citizenfx/client

และกำหนด Types ถูกต้องหรือไม่

Cannot find name emitNet

อาจเกิดจาก Typing ของ FiveM Runtime ไม่ถูกโหลด

FiveM หาไฟล์ไม่เจอ

มัก Build Output Path ไม่ตรงกับ fxmanifest.lua

เช่น Manifest ใช้

dist/client.js

แต่ Build ไปที่

build/client.js

TypeScript Compile ผ่านแต่ Runtime Error

Type Checking ไม่สามารถป้องกัน Runtime Error ทุกประเภทได้

ต้องดู Client/Server Console ต่อ

Cannot find module

อาจเกี่ยวกับ

Node Module
Build Tool
Module Format
Server Runtime
Package ไม่ถูก Bundle

㊽ วิธี Debug TypeScript FiveM

ต้อง Debug สองระดับ

ระดับ TypeScript

ดู Error จาก Compiler

npx tsc

ตัวอย่าง

Type 'string' is not assignable to type 'number'

แก้ก่อน Build

ระดับ FiveM Runtime

หลัง Build แล้วดู

F8 Console
Server Console
Stack Trace
Resource Error

เพราะ Error บางประเภทเกิดตอน Runtime เท่านั้น

㊾ Source Map มีประโยชน์ไหม

มีประโยชน์สำหรับ Project ที่ Build หรือ Bundle TypeScript

Source Map ช่วยเชื่อม JavaScript ที่ Compile แล้วกลับไปยัง Source TypeScript

ทำให้ Stack Trace และ Debugging เข้าใจง่ายขึ้น

แต่ต้องตั้งค่า Toolchain ให้เหมาะสมและพิจารณาว่าต้องการแจก Source Map บน Production หรือไม่

Project ขนาดเล็กอาจยังไม่จำเป็นต้องตั้งระบบซับซ้อน

㊿ ควรใช้ tsc หรือ Bundler

ขึ้นอยู่กับ Project

ใช้ tsc

เหมาะกับ Project ที่

Structure ง่าย
Dependency ไม่ซับซ้อน
ไม่ต้อง Bundle
ต้องการเริ่มต้นเร็ว

ใช้ Bundler

เช่น esbuild หรือ Tool อื่น เหมาะเมื่อ

มี Module จำนวนมาก
ใช้ npm Packages
ต้อง Bundle Dependency
ต้อง Minify
ต้องสร้างหลาย Target

ไม่มี Tool เดียวที่ดีที่สุดสำหรับทุก Resource

51 วิธี Build TypeScript FiveM แบบง่าย

ใน package.json

สามารถมี Script เช่น

{
  "scripts": {
    "build": "tsc"
  }
}

จากนั้นใช้

npm run build

Flow จะเป็น

แก้ .ts
↓
npm run build
↓
ได้ .js
↓
restart resource
↓
ทดสอบ

นี่เป็น Workflow พื้นฐานที่เข้าใจง่าย

52 ทำ Watch Mode ได้ไหม

ได้

TypeScript Compiler มี Watch Mode เช่น

npx tsc --watch

เมื่อแก้ .ts จะ Compile ใหม่อัตโนมัติ

Developer จึงสามารถใช้ Workflow

แก้ TypeScript
↓
Auto Build
↓
restart Resource
↓
ทดสอบ

ช่วยลดเวลา Development

แต่ FiveM ไม่ได้ Restart Resource ให้อัตโนมัติเพียงเพราะ Build ไฟล์ใหม่

53 ควรแยก Shared Types หรือไม่

ถ้า Project เริ่มใหญ่ ควรแยก

ตัวอย่าง

shared/
├── player.ts
├── events.ts
├── items.ts
└── jobs.ts

เช่น

export interface Item {
    name: string;
    label: string;
    price: number;
}

Client และ Server สามารถใช้ Type เดียวกันได้

ข้อดีคือเมื่อเปลี่ยน Structure Developer จะเห็น Error ในจุดที่ต้องแก้ได้เร็วขึ้น

54 ควรสร้าง Event Type หรือไม่

Project ใหญ่สามารถกำหนด Event Contract

ตัวอย่าง

interface BuyItemPayload {
    item: string;
    amount: number;
}

ช่วยให้ Client และ Server รู้ว่าข้อมูลควรมีโครงสร้างอะไร

แต่ยังต้องจำว่า

Network Payload ต้อง Validate ตอน Runtime เสมอ

TypeScript Contract เป็นเพียง Compile-time Agreement

55 TypeScript เหมาะกับทีม Developer หรือไม่

เหมาะมาก

โดยเฉพาะทีมที่มีหลายคนแก้ Code เดียวกัน

Type ช่วยให้ Developer ใหม่เข้าใจว่า

Function รับอะไร
Function คืนอะไร
Object มี Field อะไร
Event ต้องส่งอะไร
Database คืนอะไร

โดยไม่ต้องไล่อ่าน Implementation ทุกบรรทัด

ใน Project ระยะยาว สิ่งนี้ช่วยลดต้นทุนการ Maintain ได้มาก

56 มือใหม่ควรเริ่ม TypeScript FiveM เลยไหม

ถ้ายังไม่เคยเขียน Programming เลย ผมแนะนำให้เรียน JavaScript หรือพื้นฐาน Programming ก่อนเล็กน้อย

ควรเข้าใจ

Variable
Function
Array
Object
if
Loop
Promise
async/await

จากนั้นจึงเพิ่ม TypeScript

เพราะถ้าเรียนพร้อมกันทั้ง

JavaScript
TypeScript
FiveM
Node.js
NUI

ตั้งแต่วันแรก อาจมี Concept ซ้อนกันมากเกินไป

57 Roadmap TypeScript FiveM

แนะนำลำดับนี้

JavaScript พื้นฐาน
↓
TypeScript พื้นฐาน
↓
FiveM Resource
↓
fxmanifest.lua
↓
Client Script
↓
Server Script
↓
Native
↓
Event
↓
Runtime Validation
↓
Export
↓
Database
↓
NUI
↓
Security
↓
Optimization

ถ้ามีพื้นฐาน JavaScript อยู่แล้วสามารถเริ่ม TypeScript + FiveM ได้เร็วมาก

58 Project สำหรับฝึก TypeScript FiveM

เริ่มตามนี้ได้

Project 1

สร้าง Command /hello

Project 2

แสดง Coordinates

Project 3

สร้าง Typed Config

Project 4

Client → Server Event

Project 5

สร้าง Event Payload Interface

Project 6

Validate Event Server-side

Project 7

สร้าง Export พร้อม Typing

Project 8

เชื่อม Database

Project 9

สร้าง NUI

Project 10

สร้าง Resource เต็มรูปแบบ

เมื่อทำครบจะเข้าใจทั้ง TypeScript และ FiveM Architecture มากขึ้น

59 ข้อดีและข้อเสียของ TypeScript FiveM

ข้อดี

Type Safety
Auto Completion ดี
Refactor ง่าย
Project ใหญ่ดูแลง่าย
ลด Typo
Event/Data Structure ชัด
เหมาะกับ Team
ใช้ร่วมกับ npm Ecosystem ได้ดี

ข้อเสีย

ต้องมี Build Step
Setup มากกว่า Lua/JavaScript ธรรมดา
Runtime Error ยังเกิดได้
ต้องเข้าใจ JavaScript ด้วย
Config ผิดอาจทำให้ Build ซับซ้อน
มือใหม่อาจเจอ Type Error กับ Runtime Error พร้อมกัน

ดังนั้นควรเลือกตามขนาด Project และพื้นฐานของ Developer

60 TypeScript FiveM เหมาะกับใครที่สุด

TypeScript เหมาะมากกับ

JavaScript Developer
Node.js Developer
Web Developer
Full-stack Developer
ทีมพัฒนา FiveM
Resource ขนาดใหญ่
ระบบที่มี Event จำนวนมาก
Resource ที่มี Database
NUI ขนาดใหญ่
Project ที่ต้อง Maintain ระยะยาว

ถ้าเพียงทดลอง Command 10 บรรทัด JavaScript ธรรมดาก็เพียงพอ

แต่ถ้ากำลังสร้างระบบหลายหมื่นบรรทัด TypeScript สามารถช่วยได้มาก

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

TypeScript ใช้กับ FiveM ได้ไหม

ได้ โดย Compile หรือ Bundle เป็น JavaScript ก่อนให้ FiveM JavaScript Runtime ทำงาน

FiveM รันไฟล์ .ts โดยตรงไหม

Workflow ปกติไม่ใช่ TypeScript Runtime โดยตรง ควร Build .ts เป็น .js

FiveM มี Type Definitions หรือไม่

มี และ Cfx.re แนะนำ Official Packages @citizenfx/client และ @citizenfx/server

TypeScript ใช้ Client Script ได้ไหม

ได้ หลัง Compile เป็น JavaScript สำหรับ FiveM Client Runtime

TypeScript ใช้ Server Script ได้ไหม

ได้ และสามารถใช้ Node.js APIs/Packages ตามข้อจำกัดของ Server JavaScript Runtime

TypeScript ใช้ NUI ได้ไหม

ได้ และสามารถใช้กับ React, Vue, Svelte หรือ Vanilla TypeScript ได้

TypeScript ป้องกัน Exploit ได้ไหม

ไม่โดยอัตโนมัติ Type จะหายไปหลัง Compile และ Network Data ยังต้อง Validate ฝั่ง Server

TypeScript ทำให้ Script เร็วกว่า JavaScript ไหม

ไม่โดยอัตโนมัติ เพราะ Code ที่ Runtime ทำงานจริงคือ JavaScript

TypeScript หรือ Lua อะไรดีกว่า

ถ้าเป็นมือใหม่ Lua เริ่มง่ายกว่า แต่ถ้ามีพื้นฐาน JavaScript หรือทำ Project ใหญ่ TypeScript มีข้อดีด้าน Type Safety และ Maintainability

สรุป TypeScript ใช้กับ FiveM ได้ไหม

TypeScript ใช้กับ FiveM ได้เต็มที่ในฐานะ Development Language ที่ Compile เป็น JavaScript ก่อนนำไปรันบน FiveM JavaScript Runtime

โครงสร้างที่ควรจำคือ

TypeScript
↓
Compile / Bundle
↓
JavaScript
↓
FiveM Client / Server Runtime

Cfx.re มี Official Type Definitions ผ่าน

@citizenfx/client
@citizenfx/server

ทำให้ Visual Studio Code และ Editor อื่นสามารถช่วยตรวจ FiveM API, Native และ Function ได้ดีขึ้น

TypeScript เหมาะอย่างมากกับ Resource ขนาดใหญ่ เพราะช่วยจัดการ Interface, Event Payload, Database Result, Export และ Shared Data Structure ได้เป็นระบบ

แต่สำหรับผู้ที่เรียน FiveM กับ comsiam ต้องจำไว้ว่า TypeScript ไม่ได้แทนที่ความรู้ JavaScript, Client/Server, Networking หรือ Security และ Type Annotation ไม่สามารถป้องกัน Client ส่งข้อมูลอันตรายได้

เมื่อใช้ TypeScript ร่วมกับ Runtime Validation, Server-side Security, Database Design และ FiveM Architecture ที่ถูกต้อง คุณจะสามารถสร้าง Resource ที่ดูแลง่ายและขยายต่อได้ดีกว่า Project ที่ไม่มี Structure และเนื้อหาใน comsiam จะพาไปต่อในหัวข้อถัดไปคือ C# สำหรับ FiveM ซึ่งเป็นอีกหนึ่ง Runtime อย่างเป็นทางการของ FiveM