# ติดตั้ง TypeScript

โค้ดที่เป็น TypeScript เมื่อจะนำมาใช้จะต้องทำการคอมไพล์ หรือแปลงเป็น JavaScript ก่อน โดยต้องทำการลงแพคเกจ `typescript` ผ่าน `npm`, `yarn`

```bash
npm install -g typescript # npm
yarn global add typescript # yarn
```

หรือติดตั้งในโปรเจกต์ที่มี `package.json` อยู่แล้ว

```bash
npm install --save-dev typescript
yarn add --dev typescript
```

เมื่อติดตั้งแล้วจะมีโปรแกรม `tsc` ไว้ใช้สำหรับใช้งานกับไฟล์ TypeScript ที่มีนามสกุล `.ts`

```bash
$ tsc # หรือ yarn tsc หรือ npx tsc ถ้าลงแบบไม่ global
Version 4.1.2
Syntax:   tsc [options] [file...]

Examples: tsc hello.ts
          tsc --outFile file.js file.ts
          tsc @args.txt
          tsc --build tsconfig.json
...
```

ทดลองเขียนโปรแกรมง่ายๆ กัน

```typescript
// hello.ts

const user = {
  firstName: "ประหยัด",
  lastName: "จานโอชา",
  job: "Dictator",
}

console.log(`ฉันชื่อ ${user.firstName} ${user.lastname}`) // จงใจสะกด lastName ผิด
console.log(`อาชีพของฉันคือ ${user.job}`)

```

แล้วรันด้วย `tsc` จะเกิด Type Error ขึ้น พร้อมกับแจ้งว่ามีปัญหาที่จุดไหน

```bash
$ tsc hello.ts
hello.ts:7:47 - error TS2551: Property 'lastname' 
does not exist on type '{ firstName: string; lastName: string; job: string; }'. 
Did you mean 'lastName'?

7 console.log(`ฉันชื่อ ${user.firstName} ${user.lastname}`)
                                             ~~~~~~~~

  index.ts:3:3
    3   lastName: "จานโอชา",
        ~~~~~~~~~~~~~~~~~~~
    'lastName' is declared here.


Found 1 error.
```

และเมื่อเราแก้โค้ดจนถูกต้องแล้วรันใหม่ จะได้ไฟล์ JavaScript ออกมา (ถ้าไม่ได้กำหนดออปชั่นเพิ่มเติม จะได้ชื่อไฟล์เดิม แต่มีนามสกุลไฟล์ `.js` แทน เช่น `hello.ts` -> `hello.js`)

เบื้องหลังของ Framework ต่างๆ ที่ระบุว่าสนับสนุนการใช้ TypeScript นั้นก็คือมีการใช้เครื่องมืออย่าง `tsc` ในการแปลงโค้ดให้เป็น JavaScript นั่นเอง


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.monosor.dev/courses/typescript-101/typescript-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.