[Typescript] 기본 타입 이해하기

 

목표

타입스크립트에서 사용되고 있는 기본 타입에 대해 정리하고, 이해하는 것

불리언 (Boolean)

가장 기본적인 데이터 타입으로 참/거짓 값을 나타낸다.

활용 예시) 

let isComeIn: boolean = false; // 기숙사 입소 여부 확인 변수

숫자 (Number)

모든 숫자 값에 쓸 수 있는 타입으로 10진수, 16진수, 2진수, 8진수 다 가능함

활용예시)

let personCount: number = 0; // 사람 숫자 세는 변수

let crc: number = 0xffff; // crc 기본 값 초기화(16진수)

let binary: number = 0b1010; // 2진수
let octal: number = 0o725; // 8진수

문자열 (String)

텍스트 데이터를 다룰 때 사용하는 타입으로 " (큰 따옴표)나 ' (작은 따옴표)를 활용해 데이터를 감싼다.

const user: string = "admin"; // 사용자 변수 선언 및 초기화
const version: string = '1.0' // 버전 변수 선언 및 초기화

 

템플릿 문자열

여러 줄에 걸쳐 문자열을 작성할 수 있고, 표현식을 포함시킬 수 있다.

`(백틱) 으로 감쌀 수 있고, ${ 변수명 }과 같은 형태로 표현식을 포함시킬 수 있음.

// 입소 시간 안내 변수
const month: string = '7'
const day: string = '31'

const hour: number = 2
const minute: number = 13

const formatDate: string = `${month}월 ${day}일,
${hour}시 ${minute}분`;

 

아래와 같은 의미이다.

// 입소 시간 안내 변수
const formatDate: string = month + '월' + day + '일,\n' +
hour +'시' + minute + '분';

 

개인적으로 가독성 측면에서 봤을 때 위에가 더 보기 좋다고 생각한다.

배열 (Array)

배열 타입을 나타낼때 사용하고, 두 가지 방법이 있다.

1. 타입 뒤에 []를 사용.

const headerFixValue: number[] = [0, 13, 0, 13, 10]; // 파일데이터 header 고정 값 초기화

 

2. 제네릭 배열 타입을 쓰는 것

const headerFixValue: Array<number> = [0, 13, 0, 13, 10]; // 파일데이터 header 고정 값 초기화

 

* 제네릭이란

>> 타입을 마치 함수의 파라미터 처럼 사용하는 것.

참고자료 : 타입스크립트 핸드북[캡틴판교]

튜플(Tuple)

배열 요소의 타입과 개수를 고정할 수 있다. 이때 모든 요소들의 타입이 같을 필요는 없음.

// 고정 값 finish 선언 및 초기화
const finishFixValue: [string, number, number];
finishFixValue = ['&COMPANYName',13,10];

// 잘못된 예시
const finishFixValue: [number, string, number];
finishFixValue = ['&COMPANYName',13,10];

 

열거(Enum)

특정 값들의 집합을 의미하는 자료형

>> 비슷한 특징을 가진 변수를 모아서 하나의 타입으로 지정해 사용할 수 있도록 함.

기본값으로 0이 들어감.

enum JinState {
  WorkHour,
  PlayHour,
  StudyHour,
}

let wHour: JinState = JinState.WorkHour;

console.log(JinState)

 

 

값을 일부 혹은 전체를 원하는대로 수정할 수 있음.

enum JinState {
  WorkHour = 7,
  PlayHour,
  StudyHour,
}

 

enum JinState {
  WorkHour = 7,
  PlayHour = 2,
  StudyHour = 3,
}

 

enum의 유용한 부분

배열 처럼 사용할 수 있다. 위치와 값이 매칭되지 않을 때 확인할 수 있음.

enum JinState {
  WorkHour = 7,
  PlayHour = 2,
  StudyHour = 3,
}

let jinHour: number = JinState[2];

console.log(jinHour); // 'PlayHour'가 출력됨

Any

알지 못하는 타입을 표현할 때 쓰인다.

// 랜덤 값 서버로부터 받아오기

const handleData = async (data: string) => {
    const response: any = await axios.post("/api/random", { qrstring: data });

    if (response.data.message === "fail") {
      alert("인증 시간이 지났습니다");
      router.push("/qrscan");
    } else {
      alert("인증이 완료되었습니다");
      router.push("/main")
    }
 };

 

// 랜덤 값 서버로부터 받아오기

const handleData = async (data: string) => {
	// `AxiosResponse` 라는 타입을 추가
    const response: AxiosResponse = await axios.post("/api/random", { qrstring: data });

    if (response.data.message === "fail") {
      alert("인증 시간이 지났습니다");
      router.push("/qrscan");
    } else {
      alert("인증이 완료되었습니다");
      router.push("/main")
    }
 };

 

Void

어떠한 타입도 존재할 수 없다. 즉, any와 반대된다. 보통 함수에서 반환 값이 없을 때 사용한다.

function printUser(): void {
  console.log("User name is Jin");
}

 

void 타입 변수가 유용하지 않은 이유

그 변수에는 null 혹은 undefined만 할당 가능

** 특히 null은 --strictNullChecks을 사용하지 않을때만 할당할 수 있음

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

Null and Undefined

Typescript에서 이름 그대로 타입을 사용함.

let undefinedType: undefined = undefined;
let nullType: null = null;

 

모든 타입의 하위 타입이다.

 

** --strictNullChecks

• -strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하다.
• (예외적으로 undefined는 void에 할당 가능하다) 이는 많은 에러를 방지하는 데 도움을 준다.
• string 또는 null 또는 undefined를 허용하고 싶은 경우, 유니언 타입인 string | null | undefined를 사용할 수 있음.

Never

절대 발생할 수 없는 타입이다.

예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.

변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있음

never타입은 모든 타입에 할당 가능한 하위 타입이다. <-> 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아니며 심지어 any도

예외가 아니다. (자신은 제외)

 

 

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

 

객체 (Object)

원시 타입이 아닌 타입을 나타낸다. number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지를 의미.

 

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

타입단언 (Type assertions)

컴파일러에게 "날 믿어, 난 내가 뭘 하고 있는지 알아"라고 말해주는 방법으로 형 변환과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다. 런타임에 영향을 미치지 않고, 온전히 컴파일러만 이를 사용하고, 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지한다.

 

angle-bracket

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

 

as

 

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

 

**JSX와 함께 사용할 때는, as 만 허용

 

참고 자료

https://typescript-kr.github.io/pages/basic-types.html#null-and-undefined

https://yamoo9.gitbook.io/typescript/types/enum

https://sambalim.tistory.com/142

https://joshua1988.github.io/ts/guide/enums.html#%EC%9D%B4%EB%84%98-enums