FrontEnd_Study/TYPESCRIPT

[TypeScript] 01. 기본타입

J_hannah 2023. 6. 18. 22:03

1. 기본타입

1-1 불리언 (Boolean) :

true, false 참/거짓값

let isDone: boolean = false;

1-2 숫자 (Number) :

모든 숫자값이며 10진수, 16진수 (0x), 2진수(0b), 8진수 (0o) 등을 사용할 수 있다.

let decimal: number = 6;
let hex: number = 0xf00d; (16진수)
let binary: number = 0b1010; (2진수)
let octal: number = 0o744;  (8진수)

1-3 문자열 (String) :

텍스트 데이터 타입을 표현하며 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용한다.

let color: string = "blue";
color = 'red';

또한 여러줄에 걸쳐 문자열을 작성하거나 표현식을 포함시키고 싶은 경우 백틱/백쿼트 ( ` ) 문자로 감싸면 사용이 가능하다.

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

1-4 배열 (Array) :

배열 타입은 두 가지 방법으로 쓸 수 있다.

  1. 배열 요소들을 나타내는 타입 뒤에 []를 쓴다
  2. 제네릭 배열 타입을 쓴다 ex) Array<elemType>
  3. let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];

1-5 튜플 (Tuple) :

튜플 타입을 사용하면, 타입과 개수가 고정된 배열을 표현할 수 있다. (타입이 모두 같을 필요 x)

또한 초기화 진행 후 개별 재선언이 가능하다.

-- 오류 발생경우 --

  1. 타입을 순서대로 값을 넣어줘야한다.
  2. 정해진 개수 외의 접근시도할 때 오류
  3. 정해진 타입과 개수를 지키지 않고 선언한 경우
  4. // 튜플 타입으로 선언 let x: [string, number]; // 초기화 x = ["hello", 10]; // 성공 // 잘못된 초기화 x = [10, "hello"]; // 1. 오류 x = ["hello", 10, 3]; // 2. 오류 console.log(x[2]) // 2. 오류 x = ["hello"]; // 3. 오류
  5. 정해진 타입의 순서를 지켜서 메서드를 사용하지않으면 오류가 난다
  6. console.log(x[0].substring(1)); // 성공 console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.

1-6 열거 (Enum) :

*enum 이란? : enumerated type의 줄임말로 열거형이라고 부르기도 한다.
열거형은 요소, 멤버라 불리는 명명된 값의 집합을 이루는 자료형이다.

여기서 열거자(요소, 멤버)들은 일반적으로 해당 언어의 상수 역할을 하는 식별자를 뜻한다.

이처럼 여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입이라고 할수 있다.

사용예시 :

사용자를 권한별로 관리해야할 때와 게시물을 예시의 활용 코드이다.

// 회원 권한을 enum으로 정의
enum Auth {
    admin = 0, // 관리자
    user = 1,  // 회원
    guest = 2  // 게스트
}

// Auth.admin(==0) 으로 의미있게 값 체크 가능
if (userType !== Auth.admin) {
    alert("관리자 권한이 없습니다");
}

// 게시물 종류를 enum으로 관리
enum Articles {
    notice,  // 0: 공지사항 (값 생략시, 0 할당됨)
    board,   // 1: 일반글 (이전값에 1을 더한 1이 할당됨)
    comment  // 2: 댓글 (이전값에 1을 더한 2가 할당됨)
}

// 게시물 등록 분기 처리에 enum 사용
switch(articleType){
    case Articles.notice:
        // DB에 공지로 등록 작업
        break;
    case Articles.board:
        // DB에 일반글로 등록 작업
        break;
    case Articles.comment:
        // DB에 댓글로 등록 작업
        break;
    default:
        break;
}

1-7. Any :

알지 못하는 타입을 표현해야 할 때 사용되며 이 경우 타입검사를 하지 않고 통과한다.

let notSure: any = 4;  //4
notSure = "maybe a string instead";  // 성공
notSure = false; // 성공
console.log(notSure)

* any 타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하다.
예를 들어, 여러 다른 타입이 섞인 배열을 다룰 수 있다.

  let list: any[] = [1, true, "free"]
  list[1] = 100
  console.log(list) // [ 1, 100, 'free' ]

하지만 어떤 값이든 그 변수에 할당할 수 있게 해주지만 실제로 메서드가 존재하더라도, 임의로 호출할 수 없다.

let notSure: any = 4;
notSure.toFixed(); // 성공, toFixed는 존재합니다. (하지만 컴파일러는 검사하지 않음)

notSure = "maybe a string instead"
notSure.toFixed() // 에러

1-8. Void :

어떤 타입도 존재할 수 없음 (any의 반대 타입)
보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다.

void는 null( --strictNullChecks 사용 안하는 경우 ) 또는 undefined 만 할당가능

  let unusable: void = undefined;
  unusable = null; // 성공  `--strictNullChecks` 을 사용하지 않을때만

함수 사용 예시 :

    function warnUser(): void {
        console.log("This is my warning message");
    }

1-9. Null and Undefined :

TypeScript는 undefined 과 null 둘 다 각각 자신의 타입 이름으로 사용하기에 void처럼 사용하는 경우는 드물다.

이들은 다른 모든 타입의 하위 타입이다.
즉, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 뜻한다.

하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하여 에러방지에 도움 (예외적으로 undefined는 void에 할당 가능)

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;

1-10. Never :

없는 값이 집합인 타입으로 any타입을 포함해 어떤 값도 가질 수 없다 즉 empty 타입과 같다고 생각하면 된다.

대부분 어떤값도 가질 수 없는 빈타입으로 다음과 같다

  • 제네릭 및 함수에서 허용되지 않는 파라미터
  • 호환 되지 않는 타입 교차
  • 빈 유니언 타입 (유니언 했지만 아무것도 안되는 경우)

사용하는 경우의 예시 :

  1. 함수가 항상 예외를 던지거나 절대로 반환하지 않을 때 ** throwError는 항상 예외를 던지므로 결코 반환되지 않고 infiniteLoop 함수는 무한 루프를 돌기 때문에 종료되지 않는다. 이 함수들을 never 타입으로 선언된다.
  2. function throwError(message: string): never { throw new Error(message); } function infiniteLoop(): never { while (true) { // ... } }
  3. 모든 가능한 경우를 처리하고 있지 않을 때 ** 이처럼 never를 통한 함수로 처리되지 않은 값을 식별하거나 오류방지를 하여 컴파일 에러 발생을 방지 할수 있다. any처럼 모든 값을 허용하지만 다른점은 타입 안정성이 any 보다 강화한 타입으로 더욱 안전하다.let anyValue:any = 123
    anyValue:unknown = [1,2]let testResult:number = anyValue
    let testResul2t:number = unknownValue
    console.log(testResult) // 정상 작동
    console.log(testResult2) //에러
    unknownValue -1 // 에러
  4. let unknownValue:unknown = 123
    unknownValue:unknown = {}
  5. 특징 : 어떤 값이어도 할당할수 있지만 그 값에 대한 타입 안정성을 보장하지 않는다.
  6. 1-11 unknown:
  7. function processStatus(status: "pending" | "inProgress" | "completed"): void { switch (status) { case "pending": // 처리 로직 break; case "inProgress": // 처리 로직 break; default: const exhaustiveCheck: never = status; // 모든값이 처리되었는지 검사하고 처리되지않은 값은 never 타입을 할당하여 컴파일 오류 방지 // "completed"을 처리하지 않았으므로 exhaustiveCheck 로 처리 } }

unknown 주의점 : 사용할 때는 명시적인 타입 체크와 타입 변환이 필요

예제코드

  let anyValue:any = 123

  let unknownValue:unknown = 1223
  console.log(anyValue.length) // undefiend
  console.log(unknownValue.length) // // error: 'unknownValue' is of type 'unknown'.

  let testResult: number;

  if (typeof unknownValue === 'number') {
    testResult = unknownValue;
  } else {
    testResult = 0; // 숫자가 아니면 기본값 0으로 할당
    // 예외처리를 하지 않으면 Variable 'testResult' is used before being assigned.  라는 에러가 발생 
  }
  console.log(testResult); // 정상작동
저작자표시