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

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

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

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

ก็ 구문 ax ax ใหญ่ ใช้ เหมือน กัน ต่าง ต่าง กัน แค่ แค่ ตอน ประกาศ ตัว ตัว แปร ต้อง กำหนด 타입 ให้ กับ กับ ตัว แปร นั้น ๆ ๆ

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

// 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

기본 유형

เรามาเริ่มจาก 기본 유형 ก่อน มีดังนี้

부울

번호

null

문자열

정의되지 않음

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

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

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

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

어느

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

let myText

myText = 'Hello'
myText = 100

알려지지 않은

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

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

// OK, definitely a boolean
notSure = false;

정렬

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

인터페이스 또는 유형

ใช้กับตัวแปร 개체(키-값)

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
}

โดย โดย โดย เรา ปกติ ใช้ ใช้ ได้ ทั้ง ทั้ง ทั้ง 인터페이스 และ 유형 แต่ ทั้ง สอง สอง อย่าง อย่าง นี้ ข้อ แตกต่าง เวลา ใช้ ใน ระดับ ระดับ 고급

เดี๋ยวมาดูความแตกต่างระหว่าง 인터페이스 대 유형 กั

기능

// ไม่มี 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}`
}

비동기 기능

interface Location {
  lat: number
  lng: number
}

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

เพียง เพียง เพียง นี้ เท่า จะ พอ เขียน เขียน 타입 스크립트 แบบ ง่าย ๆ กัน กัน ได้ แล้ว นะ ครับ ครับ

참조

https://www.tutorialspoint.com/typescript/index.htm

https://www.typescriptlang.org/docs/handbook/basic-types.html