9일차 / Typescript

Typescript

자바스크립트의 타입을 강제시키는 언어

자바스크립트는
let aaa = "안녕하세요
let aaa = 123 (O)
재선언 가능

타입스크립트
let aaa: string = "안녕하세요"
aaa = 123 (X)
재선언 불가

let aaa: string = "안녕하세요"
let bbb: number = 123

객체생성

Interface IProfile {
name: string;
age: number;
}
let profile: IProfile = { name: "철수", age: 13 }

실행될 때는 자바스크립트로 변환돼서 실행된다.

타입스크립트 설치

yarn add typescript --dev

ts? tsx?

jsx의 x는 XML을 의미
XML: eXtensible Markup Language
HTML : HyperText Markup Language

타입스크립트에서는 .jsx = .tsx, 그 외 .ts 파일명을 명시해주어야한다.

타입 추론

처음 들어간 값으로 타입이 추론이 되어서 다음부터 다른 값으로 넣으면 에러가 난다.
let aaa = "안녕하세요" ->String 추론
aaa = 123 -> 에러

// 타입추론
let aaa = "안녕하세요"
aaa = 3

// 타입명시
// let bbb: string = "반갑습니다"

// 문자타입
let ccc: string
ccc = "반가워요"
ccc = 3

// 숫자타입
let ddd: number = 10
ddd = "asdf"

// 불린타입
let eee: boolean = true
eee = false
eee = "true" // true로 작동함

// 배열타입
let fff: number[] = [1, 2, 3, 4, 5, "안녕하세요"]
let ggg: string[] = ["철수", "영희", "훈이", 13] 
let hhh: (number | string)[] = [1, 2, 3, 4, 5, "안녕하세요"]

// 객체타입
interface IProfile {
    name: string
    age: string | number
    school: string
    hobby?: string // ?: 있어도 되고 없어도 된다
}

let profile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}
profile.age = "8살"
profile.school = 123

// 함수타입
const add = (money1: number, money2: number, unit: string): string => {
    return money1 + money2 + unit
}
const result = add(1000, 2000, "원")

add(1000, 2000, "원")