TypeScript สำหรับผู้เริ่มต้น

Apichan Chaiyutthasat — Sat, 27 Feb 2021 13:36:25 +0000

บทความนี้เหมาะกับคนที่เคยเขียน JavaScript แต่ไม่เคยเขียน Static Types เช่น C, C#, Java เป็นต้น

TypeScript เป็นภาษา JavaScript ที่ใส่ types

แล้วมันต่างกับ JavaScript ยังไง ?

ก็ syntax ส่วนใหญ่ใช้เหมือนกัน ต่างกันแค่ตอนประกาศตัวแปร ต้องกำหนด type ให้กับตัวแปรนั้นๆ

วิธีประกาศตัวแปร

// var [identify]: [type-annotation] = value
let name: string = 'Hello World'

// var [identify]:[type-annotation]
let name: string

// var [identify] = value
let name = 'Hello World'

// var [identify]
let name

Primitive Types

เรามาเริ่มจาก primitive types ก่อน มีดังนี้

boolean
number
null
string
undefined

เวลาเราประกาศตัวแปรที่กำหนด type แล้วจะเปลี่ยนค่าได้เฉพาะ type เดิม เช่น

let myText = 'Hello World'
// Incorrect
myText = 100
// Correct
myText = 'Hello You'

แล้วเมื่อกำหนด type แล้วสามารถตรวจสอบคุณสมบัติของ type นั้นๆ ได้ เช่น

let myText = 'Hello World'
// Incorrect
console.log(myText.len)
// Correct
console.log(myText.length)

Any

โดยปกติ ถ้าประกาศตัวแปรแบบไม่กำหนด type ตัวแปรนั้นจะมี type เป็น any

let myText

myText = 'Hello'
myText = 100

Unknown

แต่ในบางครั้ง ถ้าตัวแปรนั้นมี type ที่ซับซ้อนมากๆ เราอาจจะใช้ unknown แทนได้

let notSure: unknown = 4;
notSure = "maybe a string instead";

// OK, definitely a boolean
notSure = false;

Array

let genders: string[] = ['male', 'female']
let numbers: number[] = [1, 2, 3, 4, 5]

Interface or Type

ใช้กับตัวแปร object (key-value)

interface Location {
  lat: number
  lng: number
}

const myLocation: Location = {
  lat: 13,
  lng: 54
}

หรือ

type Location = {
  lat: number
  lng: number
}

const myLocation: Location = {
  lat: 13,
  lng: 54
}

โดยปกติเราสามารถใช้ได้ทั้ง interface และ type แต่ทั้งสองอย่างนี้มีข้อแตกต่างเวลาใช้ในระดับ advanced

เดี๋ยวมาดูความแตกต่างระหว่าง interface vs type กันในบทถัดๆ ไป

Function

// ไม่มี parameter และ ไม่มีการ return ค่า
const logMessage = (): void => {
  console.log('Hello World')
}

// ไม่มี parameter และมีการ return ค่า
const getMessage = (): string => {
  return 'Hello World'
}

// มี parameter และ มีการ return ค่า
const getGreetingMessage: (name: string): string => {
  return `Hello ${name}`
}

// มี parameter ที่เป็น optional
const getFullname = (firstName: string, lastName?: string) => {
  if (lastName) {
    return `${firstName} ${lastName}`
  }
  return firstName
}

// มี parameter ที่ใส่ default value
const getFullName = (firstName: string, lastName?: string, title = 'Mr.') => {
  if (lastName) {
    return `${title} ${firstName} ${lastName}`
  }
  return return `${title} ${firstName}`
}

Async Function

interface Location {
  lat: number
  lng: number
}

const fetchData = (country: string) => Promise<Location> = {
  return axios.get('/location', {
    params: {
      country
    }
  })
}

เพียงเท่านี้ น่าจะพอเขียน TypeScript แบบง่ายๆ กันได้แล้วนะครับ

DEV Community: Apichan Chaiyutthasat