TypeScript 간략하게 알아보기

Wynter24·2023년 10월 3일
0

TypeScript

목록 보기
1/1

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

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)
  1. 선언을 먼저하고 나중에 초기화하는 경우
let greeting
greeting = 'hello'
  1. 변수에 대입될 값이 일정하지 못하는 경우
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

profile
내가 다시 보려고 쓰는 개발.log

0개의 댓글

관련 채용 정보