Forum

ฟอรัม
6. คอมพิวเตอร์ (Com...
บทความทางด้านคอมพิว...
ทำไมถึงต้องใช้ Type...
 
แบ่งปัน:
การแจ้งเตือน
ลบทั้งหมด

ทำไมถึงต้องใช้ Typescript ทั้งที่ก็มี JavaScript อยู่แล้ว

 
บทความทางด้านคอมพิวเตอร์ (Computer-Articles)
โพสต์ล่าสุด โดย nopparat.jap 2 ปี ที่ผ่านมา
1 โพสต์
1 ผู้ใช้
1 Reactions
11.7 K เข้าชม
RSS
nopparat.jap
 nopparat.jap
(@nopparat-jap)
Trusted Member
เข้าร่วม: 5 ปี ที่ผ่านมา
กระทู้: 18
หัวข้อเริ่มต้น 15/07/2022 8:59 am  

หากคุณเข้าสู่แวดวง Programming หรือ Software Development เชื่อว่าคุณคงรู้เกี่ยวกับ JavaScript อย่างแน่นอน แต่หากถามว่า คุณรู้จัก TypeScript หรือไม่ คงมีอีกหลายคนที่ยังไม่รู้จัก TypeScript วันนี้เรามาดูข้อแตกต่างระหว่าง TypeScript กับ JavaScript Programming กันว่ามีอะไรบ้าง

JavaScript คืออะไร

โดยพื้นฐานแล้ว JavaScript นั้นเป็นภาษา Script ที่ก่อนหน้านี้เป็น Client-Side Programming เท่านั้น แต่ตอนนี้ (หลังจากที่มี Node.js) มันสามารถใช้สำหรับ Server-Side Programming ได้ด้วย ทำงานได้ทั้งบน Web Browser และ Web Server ซึ่ง JavaScript จะช่วยให้ Code ของเราสามารถโต้ตอบ (Interact) กับ Browser และยังสามารถเปลี่ยนหรือ Update ทั้ง HTML และ CSS แม้ว่าคุณจะสามารถใช้ JavaScript กับ REST APIs, XML รวมทั้งอื่น ๆ แต่มันก็ไม่ได้ถูกออกแบบมาเพื่อพัฒนา Applications, Applets หรือระบบขนาดใหญ่ที่มีความซับซ้อน แต่ในปัจจุบันมันกำลังจะสามารถทำแบบนั้นได้
เมื่อ JavaScript เริ่มเติบโตมากขึ้น Code ของมันก็เริ่มหนักและซับซ้อนมากขึ้นจนไม่สามารถตอบสนองต่อ Requirement ของ Object-Oriented Programming ได้ มันจึงเป็นต้นเหตุที่ไป “จำกัด” การเติบโตของ JavaScript ซึ่งเป็นภาษา Server-Side และ Multitasking และด้วยเหตุนี้เอง TypeScript เกิดขึ้นเพื่อเอาชนะปัญหาดังกล่าว

TypeScript คืออะไร

Typescript ก็คือภาษา JavaScript ใน Version ที่ได้รับการ Upgrade นั่นเอง มันสามารถทำงานบน Node.js Environment หรือ Web Browser ต่าง ๆ ที่มีการรองรับ ECMAScript 3 ขึ้นไป TypeScript เป็น Statically Compiled Language ที่ได้จัดเตรียมทั้ง Static Typing, Classes และ Interface ไว้ให้แล้ว ช่วยให้คุณสามารถเขียน Code ของ JavaScript ที่เรียบง่ายและ Clean ได้อย่างสะดวกขึ้น ดังนั้น การใช้ TypeScript จะช่วยให้คุณสามารถสร้าง Software ที่ปรับใช้งานได้ง่ายและมีประสิทธิภาพมากยิ่งขึ้น

ข้อดีของ TypeScript

  • TypeScript มี Feature ที่มีประโยชน์อย่าง Code Navigation, Bug Prevention และ Maintainability of Code ไว้ให้แล้ว
  • มันรองรับ Static Type Annotation หรือ Static Typing
  • นอกจากนี้ยังรองรับ Interfaces, Sub-Interfaces, Classes, Subclasses และ ECMAScript 6 หรือ ES6
  • มันมาพร้อมกับความสามารถใน Object-Oriented Programming พร้อมทั้งการ Inheritance ของ Private Members และ Interfaces
  • มี IDE ให้ใช้อยู่มากมาย

ข้อดีของ JavaScript

  • JavaScript เป็น Open-Source จึงเป็นภาษาที่มีความยืดหยุ่นและมีประสิทธิภาพ ซึ่งได้รับการสนับสนุนโดย Microsoft และ Mozilla
  • มันสามารถถูกใช้งานได้ทั้ง Client และ Server Side
  • มันรองรับทั้ง Classes, Interfaces และ Modules
  • มันถูกออกแบบมาเป็นพิเศษสำหรับ Scripts ขนาดเล็ก ๆ
  • มันเป็นภาษา Cross-Platform
  • มันมีในส่วนของการ Testing Workflow ที่แข็งแกร่ง และรองรับในเรื่องของ Dependencies อีกด้วย

ข้อแตกต่างระหว่าง JavaScript กับ TypeScript

  • JavaScript เป็นภาษาที่สามารถเรียนรู้ได้ง่าย ในขณะที่ TypeScript ต้องอาศัยการเรียนรู้ที่มากกว่าและต้องมีความรู้เกี่ยวกับ Script ก่อน
  • TypeScript รองรับ Static Typing ซึ่งทำใให้คุณสามารถตรวจสอบความถูกต้องของ Type ได้ในระหว่างที่ Compile แต่ในขณะที่ JavaScript กลับไม่รองรับสิ่งนี้
  • Code ของ TypeScript จำเป็นต้องถูก Compile ก่อน แต่สำหรับ JavaScript ไม่ต้อง Compile ก่อน Run
  • JavaScript มี Community ขนาดใหญ่สำหรับ Developer ซึ่ง TypeScript ยังไม่มี
  • Airbnb, Codecademy และ Instagram เป็นบริษัทส่วนหนึ่งที่ใช้ JavaScript ในขณะที่ TypeScript ถูกใช้โดย Asana, Clever, Screen Award เป็นต้น

หวังว่าข้อมูลเหล่านี้จะเป็นประโยชน์กับคุณ แต่หากคุณเป็นมือใหม่หรือกำลังจะเริ่มศึกษาภาษาเหล่านี้ ขอแนะนำให้ศึกษา JavaScript ก่อนโดยเริ่มต้นเรียนรู้ที่พื้นฐานก่อน ฝึกฝนในเรื่องของ Code จนเมื่อคุณมั่นใจ แล้วจึงมาเริ่มศึกษา TypeScript ต่อ ประการสำคัญคือ การรู้ทั้ง 2 อย่างนี้มันจะช่วยให้ Resume ของคุณโดดเด่นกว่าผู้สมัครคนอื่นที่มีแค่ทักษะ JavaScript เพียงอย่างเดียว

credit: Kanthima Muangsen

ที่มา:   https://www.technotification.com/

 

วิธีการตั้งค่า TypeScript กับ Node.js

วิธีการตั้งค่าโปรเจคให้สามารถรัน TypeScript ได้ พร้อมกับวิธีการนำไปใช้กับ Express

สิ่งที่ต้องมี

  • Node.js version >= 12
  • npm หรือ yarn

การตั้งค่าโปรเจคให้สามารถรัน TypeScript ได้

  • เริ่มจากสร้างโปรเจคใหม่ และสร้างไฟล์ package.json
mkdir typescript-node
cd typescript-node
npm init -y
 

  • ติดตั้ง libraries ใน devDepencies

    • typescript เป็นตัวหลักที่ช่วยแปลงจาก TypeScript ไปเป็น JavaScript
    • ts-node เป็นเหมือน dev server ค่อยช่วยแปลงโค้ดจาก TypeScript ไปเป็น JavaScript ในขั้นตอนพัฒนา
    • nodemon ตัวช่วยให้รันโค้ดใหม่อัตโนมัติ เมื่อมีการแก้ไขโค้ด ทำงานร่วมกับ ts-node
npm i -D typescript ts-node nodemon
 
  • สร้างไฟล์ tsconfig.json โดยใช้คำสั่ง
ืnpx tsc --init
 

และแก้ไขค่าตามนี้

{
  "compilerOptions": {
-    "target": "es5"
+    "target": "es6" /* กำหนดว่าให้แปลงเป็น js version อะไร */,
    "module": "commonjs" /* กำหนดว่าจะใช้ module แบบไหน */,
+    "moduleResolution": "node" /* บอกใช้กับ Node.js */,
    "esModuleInterop": true /* อนุญาติให้ complie ES6 module เป็น commonjs*/,
    "strict": true /* เปิดใช้ strict type-checking options*/,
+    "outDir": "./dist" /* ระบุโฟลเดอร์ output (JavaScript) */,
+    "rootDir": "./src" /* ระบุโฟลเดอร์ sourcecode (TypeScript) */
  }
}
 

  • แก้ไข script ไฟล์ package.json

    • dev สำหรับรันโค้ดในโหมดพัฒนา จะทำการ reload อัตโนมัติเมื่อแก้ไขโค้ด
    • build สำหรับแปลงไฟล์เป็น JavaScript สำหรับการนำไปใช้งานจริง
"scripts": {
  "dev": "nodemon",
  "build": "tsc --project ./"
},
 
  • และสร้างไฟล์ nodemon.json
{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"
}
 

ทดสอบโค้ด TypeScript

  • สร้างไฟล์ src/index.ts
const geeting = (name: string) => {
  console.log(`Hello ${name} from TypeScript.`);
};

geeting('Ball');
 
  • รัน npm run dev
> typescript-node@1.0.0 dev D:\workspaces\playgounds\typescript-node
> nodemon

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src\**\*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node ./src/index.ts`
Hello Ball from TypeScript.
[nodemon] clean exit - waiting for changes before restart
 
  • ทดลองแก้ไขชื่อ nodemon ก็จะ restart ให้อัตโนมัติ
[nodemon] restarting due to changes...
[nodemon] starting `ts-node ./src/index.ts`
Hello Stamp from TypeScript.
[nodemon] clean exit - waiting for changes before restart
 
  • ทดสอบ build โดยรันคำสั่ง npm run build ก็ได้จะได้โฟลเดอร์ dist ออกมา และมีไฟล์ index.js อยู่ข้างใน
// dist/index.js
'use strict';
const geeting = (name) => {
  console.log(`Hello ${name} from TypeScript.`);
};
geeting('Stamp');
 

วิธีตั้งค่า TypeScript กับ Express

  • ติดตั้ง Express รัน npm i express

  • สร้าง Express Server ง่ายๆ ที่ไฟล์ src/index.ts

import express from 'express';

const app = express();

const PORT = 8000;

app.get('/', (req, res) => res.send('Express + TypeScript Server'));

app.listen(PORT, () => {
  console.log(`Server is running at  http://localhost: ${PORT}`);
});
 

  • ทดสอบรัน npm run dev จะพบว่าไม่สามารถรันได้ เนื่องจาก มันไม่รู้จัก type นั่นเอง

  • แก้ไขโดยการติดตั้ง @types ที่ต้องการเพิ่มเข้าไป

npm i -D @types/node @types/express
 

ถ้าใช้ bodyParser ก็ต้องติดตั้ง @types/body-parser เพิ่มด้วย

  • เมื่อรองรันใหม่อีกครั้งก็จะสามารถรันได้แล้ว
npm run dev

> typescript-node@1.0.0 dev D:\workspaces\playgounds\typescript-node
> nodemon

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src\**\*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node ./src/index.ts`
Server is running at  http://localhost:8000
 

ยังๆ... ไม่หมด

เนื่องจากเราเขียนแบบ TypeScript แต่โค้ดข้างต้นยังไม่ได้ถูกกำหนด type ให้ถูกต้องเลย ดังนั้นเรามากำหนด type ให้ถูกต้องการ ดังนี้

  • app ต้องมี type เป็น Application
  • req ต้องมี type เป็น Request
  • res ต้องมี type เป็น Response
import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 8000;

app.get('/', (req: Request, res: Response) => {
  res.send('Express + TypeScript Server');
});

app.listen(PORT, () => {
  console.log(`Server is running at  http://localhost: ${PORT}`);
});
 

เท่านี้ก็เรียบร้อยแล้ว

credit: Somprasong Damyos


   
iladmin reacted
อ้างอิง

ทิ้งคำตอบไว้

ชื่อผู้แต่ง

อีเมลผู้เขียน

ตำแหน่ง *

 
ดูตัวอย่าง แก้ไข 0 ครั้ง บันทึกแล้ว
Forum Jump:
  หัวข้อก่อนหน้า
หัวข้อถัดไป  
แบ่งปัน:
1,257,886 views since 16 August 2018