18) 자바스크립트 X 타입스크립트 (작성중)

0. 맛보기

예제출처 : 타입스크립트 핸드북-kr

class Student {
  fullName: string
  constructor(
    // ⭐ public
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName
  }
}

// ⭐ interface
interface Person {
  firstName: string
  lastName: string
}

// ⭐ type
function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName
}

let user = new Student('Jane', 'M.', 'User')

console.log(user)
/*
Student {
  firstName: 'Jane',
  middleInitial: 'M.',
  lastName: 'User',
  fullName: 'Jane M. User'
}
*/

console.log(greeter(user))
// Hello, Jane User

1. TS : 타입체크

타입스크립트는 변수에 타입을 지정해줄 수 있다.

1-1. 원시타입

let isDone: boolean = false
let decimal: number = 6
let color: string = 'blue'

1-2. 참조타입

let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3]

let today: Date = new Date()

let elem: HTMLDivElement = document.getElementById('root')

class Person {}
let person: Person = new Person()

1-3. any

let notSure: any = 4
notSure = '문자열일수도 있다'
notSure = false

1-4. 타입명시 생략

let num = 3
num = '삼' // error

let num
num = 3
num = '삼' // no error

(작성중)


Written by@taenyKim
웹 프론트엔드 공부 블로그 / Learn in Public

GitHubFacebook