그럼에도 불구하고

👨‍💻

[TypeScript] TypeScript의 기본 타입 본문

TypeScript/TypeScript basics

[TypeScript] TypeScript의 기본 타입

zenghyun 2023. 4. 28. 12:35

목차

    TypeScript의 기본 타입에 대해 알아보겠습니다.

     

     

    [ 타입스크립트 기본 타입 ]

    타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다.

    타입스크립트의 기본 타입에는 크게 다음과 같이 12가지가 있습니다.

     

    • Boolean
    • Number
    • String
    • Object
    • Array
    • Tuple
    • Enum
    • Any
    • Void
    • Null
    • Undefined
    • Never

     

     

    📌 String

     

    자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. 

     

    1
    let str:string ='Hello World!';
    cs

     

    💡 Tip 

     

    위와 같이   : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)이라고 합니다.

     

     

     

    📌 Number

     

    타입이 숫자이면 아래와 같이 선언합니다.

     

    1
    let num: number = 100;
    cs

     

     

     

    📌 Boolean

     

    타입이 진위 값인 경우 아래와 같이 선언합니다. 

     

    1
    let isCorrect: boolean = false;
    cs

     

     

     

    📌 Array

     

    타입이 배열인 경우 아래와 같이 선언합니다.

     

    1
    2
    let nunArr: number[] = [1,2,3];
    let strArr: string[] = ['javascript''typescript''react'];
    cs

     

    또는 아래와 같이 제네릭을 사용할 수 있습니다. 

     

    1
    let numArr: Array<number> = [1,2,3];
    cs

     

     

     

    📌 Tuple 

     

    튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.

     

    1
    let arr: [string, number] = ['Hello World'100];
    cs

     

    만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생합니다.

     

    1
    2
    arr[1].concat('!'); // Error, 'number' does not have 'concat'
    arr[3= 'hello'// Error, Property '3' does not exist on type '[string, number]'.
    cs

     

     

     

    📌 Enum 

     

    이넘은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미합니다. 

     

    1
    2
    enum Friends { Zenghyun, Joy, Anna }
    let people: Friends = Friends.Zenghyun;
    cs

    이넘은 인덱스 번호로도 접근할 수 있습니다.

     

    1
    2
    enum Friends { Zenghyun, Joy, Anna }
    let people: Friends = Friends[0];
    cs

    만약 원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있습니다.

     

    1
    2
    3
    4
    enum Friends { Zenghyun = 5 , Joy, Anna }
    let people: Friends = Friends[5]; // Zenghyun
    let people: Friends = Friends[6]; // Joy
    let people: Friends = Friends[7]; // Anna
    cs

     

     

    📌 Any

     

    기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입입니다. 단어 의미 그대로 모든 타입에 대해서 허용한다는 의미를 갖고 있습니다.

     

    1
    2
    3
    let str: any = 'hi';
    let num: any = 10;
    let arr: any = ['a'2true];
    cs

     

     

     

    📌  Void

     

    변수에는 undefinednull만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입입니다.

     

    1
    2
    3
    4
    let unuseful: void = undefined;
    function notuse(): void {
      console.log('sth');
    }
    cs

     

     

     

    📌 Never

     

    함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입입니다.

     

    1
    2
    3
    4
    5
    6
    // 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
    function neverEnd(): never {
      while (true) {
     
      }
    }
    cs

     

     

     

    ref: https://joshua1988.github.io/ts/guide/basic-types.html

    Comments