Typescript

Typescript란?

타입스크립트는 자바스크립트에 타입을 부여한 언어입니다.
자바스크립트의 확장된 언어라고 볼 수 있습니다.
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 합니다.
이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.

Why TypeScript?

타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있습니다.

• 에러의 사전 방지
• 코드 가이드 및 자동 완성(개발 생산성 향상)

TypeScript Basic 실습

// 타입추론 let str : string = "안녕하세요" :string 생략해도 처음 할당된 값에 의해 타입추론을 함
let str = "안녕하세요"
// str = 3 숫자타입 할당 불가

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

// 타입명시가 필요한 상황 number string 둘다 사용가능
let numStr: number | string = 1000
numStr = "1000원"

// 숫자타입
let num: number = 10

// 불린타입
let bool: boolean = true
bool = false
// bool = "false" 불가능

// 배열타입
let fff: number[] = [1, 2, 3, 4, 5]
let ggg: string[] = ["철수", "영희" , "훈이"]
let hhh: (string | number)[] = ["철수", "영희", 10] // 타입을 추론해서 어떤타입을 사용하는지 알아보기!


// 객체타입
const profile = {
    name : "철수",
    age : 8,
    school : "다람쥐초등학교"
}

profile.name = "훈이" // 타입 추론으로는 이것만 가능
// profile.age = "8살" number타입이기때문에 string 불가 
// profile.hobby = "수영" 타입 추론시 hobby 존재하지 않기 때문에 불가능

interface IProfile {
    name : string,
    age : number | string,
    school: string,
    hobby: string
}

// const profile2: IProfile = { hobby 속성이 없어서 에러
//     name : "철수",
//     age : 8,
//     school : "다람쥐초등학교"
// }

interface IProfile2 {
    name : string,
    age : number | string,
    school: string,
    hobby?: string
}

const profile2: IProfile2 = { // ? 사용하여 hobby없어도 가능
    name : "철수",
    age : 8,
    school : "다람쥐초등학교"
}

// any 타입
let qqq: any = "철수"   // 자바스크립트와 동일
qqq = 123
qqq = true

// 함수타입 => 어디서 누가 어떻게 호출할지 모르므로, 타입추론 할 수 없음(반드시, 타입명시 필요!!)
function add(num1: number, num2: number, unit: string): string {
    return num1 + num2 + unit
}

const result = add(1000,2000, "원") // 결과의 리턴 타입도 예측 가능!!

const add2 = (num1: number, num2: number, unit: string): string  => {
    return num1 + num2 + unit
}

const result2 = add2(1000,2000, "원") // 결과의 리턴 타입도 예측 가능!!

위 예제 코드처럼 타입스크립트는 타입이 명시되어 있기때문에 에러를 사전에 방지 할 수 있으며 또한 코드의 가이드 역할도 할 수 있다!