ติดตั้ง TypeScript

Search…
ติดตั้ง TypeScript
โค้ดที่เป็น TypeScript เมื่อจะนำมาใช้จะต้องทำการคอมไพล์ หรือแปลงเป็น JavaScript ก่อน โดยต้องทำการลงแพคเกจ typescript ผ่าน npm, yarn
1
npm install -g typescript # npm
2
yarn global add typescript # yarn
Copied!
หรือติดตั้งในโปรเจกต์ที่มี package.json อยู่แล้ว
1
npm install --save-dev typescript
2
yarn add --dev typescript
Copied!
เมื่อติดตั้งแล้วจะมีโปรแกรม tsc ไว้ใช้สำหรับใช้งานกับไฟล์ TypeScript ที่มีนามสกุล .ts
1
$ tsc # หรือ yarn tsc หรือ npx tsc ถ้าลงแบบไม่ global
2
Version 4.1.2
3
Syntax:   tsc [options] [file...]
4
​
5
Examples: tsc hello.ts
6
          tsc --outFile file.js file.ts
7
          tsc @args.txt
8
          tsc --build tsconfig.json
9
...
Copied!
ทดลองเขียนโปรแกรมง่ายๆ กัน
1
// hello.ts
2
​
3
const user = {
4
  firstName: "ประหยัด",
5
  lastName: "จานโอชา",
6
  job: "Dictator",
7
}
8
​
9
console.log(`ฉันชื่อ ${user.firstName} ${user.lastname}`) // จงใจสะกด lastName ผิด
10
console.log(`อาชีพของฉันคือ ${user.job}`)
11
​
Copied!
แล้วรันด้วย tsc จะเกิด Type Error ขึ้น พร้อมกับแจ้งว่ามีปัญหาที่จุดไหน
1
$ tsc hello.ts
2
hello.ts:7:47 - error TS2551: Property 'lastname' 
3
does not exist on type '{ firstName: string; lastName: string; job: string; }'. 
4
Did you mean 'lastName'?
5
​
6
7 console.log(`ฉันชื่อ ${user.firstName} ${user.lastname}`)
7
                                             ~~~~~~~~
8
​
9
  index.ts:3:3
10
    3   lastName: "จานโอชา",
11
        ~~~~~~~~~~~~~~~~~~~
12
    'lastName' is declared here.
13
​
14
​
15
Found 1 error.
Copied!
และเมื่อเราแก้โค้ดจนถูกต้องแล้วรันใหม่ จะได้ไฟล์ JavaScript ออกมา (ถ้าไม่ได้กำหนดออปชั่นเพิ่มเติม จะได้ชื่อไฟล์เดิม แต่มีนามสกุลไฟล์ .js แทน เช่น hello.ts -> hello.js)
เบื้องหลังของ Framework ต่างๆ ที่ระบุว่าสนับสนุนการใช้ TypeScript นั้นก็คือมีการใช้เครื่องมืออย่าง tsc ในการแปลงโค้ดให้เป็น JavaScript นั่นเอง
TypeScript vs JavaScript
รู้จัก Basic Type ต่างๆ
Last modified 10mo ago
Copy link