타입스크립트 기초1 - js와의 차이점, 타입의 비교와 종류

eeensu·2023년 7월 30일
0

typescript

목록 보기
3/22
post-thumbnail

js 타입 vs ts 타입

js에도 String, Number 등 기초적인 타입이 존재한다. js는 dynamic type, ts는 static type이라 칭한다. static type은 개발하는 중간에 타입을 체크한다. 하지만 dynamic type인 js는 개발할 때 타입을 알 수 없고, 실제 런타임에 적용시켜야만 타입의 실제 값을 확인할 수 있다. 이러한 문제는 개발자가 의도하지 않은 에러를 발생시킬 수 있으며, 이는 많은 js 개발자들이 ts를 사용하는 이유이기도 하다.

타입 체크

js에서는 type of number1 === 'number' 와 같은 형식으로 체크하여, 실제 변수가 number 인지 아닌지를 실행할 때 알 수 있지만, ts에서는 number1: number 로 지정하여 사용이 가능하고, 이는 코딩 중에 number1이라는 변수가 number 타입인지 아닌지 확인이 가능하다.


타입의 종류

ts에서는 js에서 제공하는 기본적인 타입을 포함하여 추가적인 타입이 제공되었다. ts에서 프로그래밍을 위해 기본적으로 제공하는 타입은 boolean, number, string, null, undefined, symbol, array 등이 있다. 이 7가지는 js도 기본 자료형으로 가지고 있다.

ts에서만 제공하는 특정한 타입은 any, void, never, unknown, enum, object 가 있다. 또한 js의 타입은 대문자로 시작하지만, ts는 대부분 소문자로 시작한다는 특징을 가지고 있다.

다음은 ts 타입의 종류이다.

  1. 기본 타입 (Primitive Types)

    • number : 숫자 타입을 나타낸다. 정수와 부동소수점 숫자 모두 포함한다.
    • string : 문자열 타입을 나타낸다.
    • boolean : true 또는 false 값을 가진다.
    • null : 값이 없거나 빈 값을 나타낸다.
    • undefined : 값을 아직 할당하지 않은 변수가 가지는 형태이다.
    • symbol : 고유하고 수정 불가능한 값을 나타낸다. Symbol() 의 타입이다.

  1. 객체 타입 (Primitive Types)

    • object : 객체를 나타내는 타입으로, 객체 리터럴 타입이나 class 의 인스턴스를 나타낸다
    • Array : 배열을 나타내는 타입이다. Array<number> 혹은 number[] 처럼 표현한다
    • Tuple - 길이가 고정된 배열들을 나타낸다.[number, string, string] 처럼
      사용하고 값으로는 [1, '안녕', 'hello'] 를 가질 수 있다.

  1. 기타 타입

    • any : ts의 타입 시스템에서 가장 유연한 타입 중 하나이다. 이 타입을 사용하면 변수나 매개변수, 반환 값 등에 대해 모든 타입의 값이 허용된다.

    • unknown : ts버전 3부터 도입된 타입으로, any와 달리 무분별한 할당이 불가 능하다. any보다 더 안전한 타입을 보장하고, 명시적인 타입 반환을 요구한다.

    • never : 절대로 발생하지 않는 값의 타입을 나타낸다. 함수의 반환값이나 throw 를 통해 절대로 값을 돌려주지 않는 경우에 사용된다.

    • void : 함수에서 반환값이 없음을 명시적으로 표현하는 타입이다.

profile
안녕하세요! 26살 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글