TypeScript 시작하기

Why TS?

자바스크립트만으로 충분히 멋진데 타입스크립트가 왜 필요한가요?

JS의 경우

예를 들어 봅시다! js로 간단하게 sum 함수를 작성해보겠습니다.

sum함수로 선언하고 사용하려고 하는 부분에서 sum 안에 어떤 데이터가 들어가야 할 지 알 수 없습니다.

sum(1, 2) // 3
sum(1, '2') // 12

이것이 유연한 js의 특성이지만, 때로는 의도치 않은 방식으로 작동하게 될 수도 있습니다.

그리고 선언할때에는 a,b 두개의 parameter만 받도록 되어있지만

sum함수를 실행하면서 5개의 parameter를 넣어도 아무런 에러 메세지가 나지 않습니다.

TS의 경우

TS는 JS보다 엄격하게 타입을 검사합니다.

sum함수를 선언할 때 parameter에 들어올 값의 타입을 지정하고, return 타입도 지정해주었을 때

사진처럼 함수를 실행할 때에도 어떤 타입의 값이 인자로 들어가야하는지 나타나게 됩니다.

그리고 JS와 달리 parameter의 수도 따집니다.

이런 식으로 TS는 JS보다 다소 엄격하게 검사하면서, 버그를 애초부터 차단해주는 엄청나게 멋진 일을 해주게 됩니다!

TS의 기본 타입

TS핸드북을 참고했습니다. 자세한 내용은 여기로!

TS에서 타입을 지정해주는 방법은 해당 변수 뒤에 : 를 붙이고 타입을 적어주는 것입니다.

이제부터 각 타입별로 어떤 식으로 명시해주면 되는지 알아봅시다!

Boolean 참/거짓

let isValid: boolean = true

Number 숫자

let decimal : number = 6;
let hex : number : 0xffff;
let binary : number = 0b1010;
let octal : number = 0o744;

10진수 뿐만 아니라 16, 2, 8진수도 지원한다고 하네요..신기방기

String 문자열

let color: string = 'grey'
let sentence: string = `My name is ${name}, ${age} years old`

템플릿 리터럴도 사용 가능합니다!

Array 배열

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

배열을 선언하는 방법은 두가지입니다.

제네릭을 사용하는 경우 array의 a가 대문자인 것을 유의해야 할 것 같네요!

Tuple 튜플

let person: [string, number] = ['mengkki', 25]

Object 객체

let myobj: object = {}
let person: { name: string; age: number } = {
  name: 'mengkki',
  age: 25,
}

Any

let foo: any = 21
foo = 'string이 될 수도 있고'
foo = true

any는 조커같은 느낌입니다. 어떤 타입의 데이터가 들어올 지 알 수 없을 때,

타입 검사를 하고 싶지 않을 때 이를 사용합니다.

너무 남발하는 것은 좋지 않겠죠..?

Void

function hello(): void {
  console.log('hello, world!')
}

void는 주로 함수가 return하는 값이 없을 때 사용합니다. 뭘까..이 그리운 느낌은..

Void 타입 변수에는 null과 undefined만 할당할 수 있습니다!