Typescript

wony·2022년 3월 24일

Typescript란?

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

기존의 자바스크립트는

let aaa = "안녕하세요"

aaa = 3

이렇게 문자열 변수에 숫자를 할당 해줘도 문제가 되지 않았다
이렇게 되면 장점도 있겠지만 서비스가 커짐에 따라 문제가 발생할 가능성이 매우 높아진다 그래서 그 단점을 보완하는 것이 Typescript이다.

let bbb:string = "반갑습니다"

타입스크립트에서는 변수의 자료형을 정해주어 같은 자료형만 재할당이 가능하다.

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

//숫자타입
    let ddd : number = 10
    ddd = 20

//불린타입
    let eee : boolean = true
    eee = false
    eee = "false"  //오해하기 쉽지만 ""이 있어 문자열이이다

배열에서도 사용되는데 그 예시를 보면은

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

fff는 숫자형의 배열 인데 "안냥하세여" 가 있어 오류가 발생하고
ggg는 문자열의 배열 인데 13이 있어 오류가 발생한다
그것을 보완한 것이 바로 hhh이다 number | string

typescript에서는
or 연산자가 | 이고
and 연산자가 & 이다

객체타입

객체타입 선언시에는 interface 를 사용해서 타입을 지정해준다

//객체타입
    interface IProfile{
        name: string
        age: string | number
        school: string
        hobby?: string
    }

    let profile : IProfile ={
        name: "철수",
        age: 8,
        school: "다람쥐초등학교"
    }
    profile.age = "8" 
    profile.school= 123 // school: string이므로 오류 발생

hobby?

객체선언시 꼭 있어도 되고 없어도 된다는 것을 hobby 뒤에 ? 를 붙여주여 나타낸다

함수타입

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