TypeScript 간략하게 알아보기

TypeScript란 자바스크립트에 타입을 부여한 언어

사용하는 이유

• 사전에 에러 방지
  동적 타입인 js는 런타임에서 동작할 때 타입 오류 확인한다.
  반면 typescript는 정적 타입으로 컴파일 타임, 코드 작성 단계에서 오류를 확인한다.
  따라서 typescript를 사용하면 좀 더 안정성이 있다.

---

Types

Primitive types

• String: 문자열
• Number: 숫자 값
• Boolean: true / false
• Null: null이라는 하나의 값
• Undefined: undefined라는 하나의 값(초기화되지 않은 변수의 기본값)
• Symbol: 고유한 상수 값

Object types

• function: 함수

const getNumber = (i:number): void => {
 console.log(i)
}

• array: 배열

const arr: string[] = ['a','b','c']

• classes: 클래스

class Music { }
let music: Music = new Music()

• object: 객체

let point: { x: number; y: number} = { x: 20, y: 10}

추가 제공 types

• any
  알지 못 할 때 사용

• union
  둘 이상의 데이터 유형 사용
  ex) string | number

• enum
  값들의 집합 / 어려운 숫자 or 언어 대신 친숙한 이름을 사용 (객체와 유사)
  (객체와 차이점: 객체는 새로운 속성 자유롭게 추가, 모든 타입 가능 but
  enum은 선언 이유 변경 가능, 속성값을 문자열 or 숫자만 가능)

• void
  데이터가 없는 경우 - 함수가 값을 반환하지 않을 때(return이 없을 때)
  타입이 없는 상태, any와 반대의 의미

• never
  절대 발생하지 않을 값(확신할 때 사용)
  ex) 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않을 때 (=무한 루프)

---

type annotaion

typescript에서는 변수를 만들어 값을 할당하면 처음 할당된 값의 형식에 따라 그 변수의 형식이 지정된다. 이를 type annotaion이라 한다.
쉽게 말해 개발자가 타입을 타입스크립트에게 직접 말해주는 것이다.

const rate: number = 5

사용 시 장점

• 컴파일러가 type을 확인하는 데에 도움
• data type을 처리하는 오류 방지에 도움
• 협업을 할 때 읽기 쉬운 코드가 됨
• 유지보수에 장점

type inference

타입스크립트가 알아서 타입을 추론하는것

const rate = 5

타입을 추론x 타입 annotation을 꼭 해줘야하는 경우

1. any type을 리턴하는 경우

const json = '{"x": 4, "y": 7}'
const coordinates = JSON.parse(json)
console.log(coordinates)

2. 선언을 먼저하고 나중에 초기화하는 경우

let greeting
greeting = 'hello'

3. 변수에 대입될 값이 일정하지 못하는 경우

let num =[-7,-2,10]
let numAboveZero: boolean | number = false

for(let i = 0; i<num.length; i++) {
 if (num[i] >0 ) {
     numAboveZero = num[i]
 }
}

---

참고자료
패스트캠퍼스 - 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online (강의)
[TypeScript] Type Annotation velog
[TypeScript] Type Annotation tstory