다시 시작하는 타입스크립트 - 기본 타입

가은·2023년 7월 15일
0

타입스크립트

목록 보기
1/4

죽어가는 블로그 소생 시작...

기본 타입

Boolean

let isDone: boolean = false;

Number

let decimal: number = 6;
let hex: number = 0xf00d;

16진수, 10진수, 8진수, 2진수 리터럴 지원

String

let exName: string = "boo";
let sentence: string = `Hello, my name is ${exName}`;

Array

// 1. 배열 요소를 나타내는 타입 뒤에 [] 표기
let list: number[] = [1, 2, 3];

// 2. 제네릭 배열 타입
let list: Array<number> = [1, 2, 3];

Tuple

요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

요소들의 타입이 모두 같을 필요는 없다.

let x: [string, number];
x = ["hello", 10]
// x = [10, "hello"] -> 오류

정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타난다.

console.log(x[0].substring(1));
// console.log(x[1].substring(1)); -> number 에는 substring이 없음

정해진 인덱스 외의 다른 인덱스에 있는 요소에 접근하면, 오류가 발생한다.

// x[3] = "world" -> [string, number] 타입에는 프로퍼티 3이 없음

Enum

값의 집합에 이름을 붙여줄 수 있다.

선언 후 변경이 불가, 속성 값으로 문자열 혹은 숫자만 허용한다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

enum은 0부터 시작하여 번호를 매긴다.
멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.

enum Color {Red = 1, Green, Blue}
// Green은 2, Blue는 3이 된다.

또는, 모든 값을 수동으로 설정할 수 있다.
고유 값은 문자, 숫자 혼합 할당이 가능하다.

enum Role { ADMIN = 5, READ_ONLY = 'READ_ONLY', AUTHOR = 250 };

매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다.

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName);  // Green

Any

알지 못하는 타입을 표현할 때 사용한다.

타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원하면 any 타입을 사용할 수 있다.

혹은 타입의 일부만 알고 전체는 알지 못할 때도 사용할 수 있다.

let notSure:any = 4;
notSure = "뭘 넣어도 오류가 안나요"
notSure = false

여러 다른 타입이 섞인 배열을 다룰 수 있다.

let list: any[] = [1, true, "free"];
list[1] = 100;

Void

어떤 타입도 존재할 수 없음을 나타낸다.

작업도 수행하고 코드도 실행하고 에러도 띄우지 않지만 아무것도 반환하지 않는다.

보통 함수에서 반환 문이 없음을 명시할 때 undefined가 아닌 void를 적는다.

function warnUser(): void {
  console.log("오류 메세지");
}

void를 타입 변수에 선언하는 것은 유용하지 않다.
void로 선언하면 그 변수에는 null과 undefined만 할당할 수 있게 된다.

Null / Undefined

기본적으로 null과 undefined는 다른 모든 타입의 하위 타입이다.
→ null과 undefined가 number 타입과 같은 타입에 할당할 수 있다.

--strictNullChecks 컴파일 옵션을 사용하면 null과 undefined는 any와 각자 자신들 타입에만 할당이 가능하다.

예외적으로 undefined는 void 타입에 할당 가능하다.

Never

절대 발생할 수 없는 타입을 나타낸다.

  • 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 사용
  • 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 반환

모든 타입에 할당 가능한 하위 타입이다.
하지만 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아니다.

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

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

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

never 타입을 사용할 수 있는 조건은 다음과 같다.

  1. 함수가 절대 return을 하지 않는다.
  2. 함수 실행이 끝나지 않아야 한다. (endpoint가 없다.)

Object

원시 타입이 아닌 타입을 나타낸다.
→ number, string, boolean, bigint, symbol, null, undefined를 제외한 나머지

const person: {
    // 키 : 타입 지정
    name: string;
    age: number;
} = {
    // 키 : 값 지정
    name: 'hi',
    age: 22,
};

const object: {} = {};  // 객체 기본 형태
const product: {
    id: string;
    price: number;
    tags: String[]; // 배열 안의 값이 무슨 타입인지 적어줌
    details: {
        title: string;
        description: string;
    }   // 객체 안에 객체 타입 다시 생성
} = {
    id: 'abc1',
    price: 12.99,
    tags: ['great-offer', 'hot-and-new'],
    details: {
       title: 'Red Carpet',
       description: 'A great carpet - almost brand-new!'
    }
}

Type assertions

타입 단언은 다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다.

이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용한다.

타입 단언을 하는 방법은 두가지이다.

let someValue: any = "문자열";

// angle-bracket
let strLength1: number = (<string>someValue).length;

// as
let strLength2: number = (someValue as string).length;
  • TypeScript와 JSX을 함께 사용할 때는, as 스타일의 단언만 허용된다.

❓ 뭐가 다른 거예요

void

void은 함수의 반환 값이 없음을 나타낸다.
→ 함수가 아무런 값을 반환하지 않는 경우에 사용된다.

null

null은 값이 없음을 나타내는 특별한 타입이다.
→ null은 변수에 할당될 수 있다.

undefined

undefined는 값이 할당되지 않은 상태를 나타낸다.
→ undefined도 변수에 할당될 수 있다.

unknown

unknown은 타입을 알 수 없거나 추론할 수 없는 경우에 사용된다.
→ unknown 타입의 변수는 다른 타입으로 할당되거나 사용되기 전에 타입을 명시적으로 확인해야 한다.

let userInput: unknown;
let userName: string;

userInput = "Hello";
// userName = userInput; -> error : 'unknown' 타입은 'string' 타입에 할당 불가
if (typeof userInput === "string") {
	userName = userInput;  // 타입 확인 후 할당 가능
}

never

never는 절대 발생하지 않는 값의 타입을 나타낸다.
→ 예외 처리나 무한 루프와 같은 상황에서 사용된다.

any

any는 모든 타입을 허용하는 동적 타입으로, 타입 검사를 우회할 수 있다.
→ 타입 안정성을 잃을 수 있으므로 사용을 자제 해야 한다.

  • void는 함수 반환 값이 없을 때 사용되는 타입이다.
  • null과 undefined는 값이 없음을 나타내지만, null은 명시적으로 할당되는 경우에 사용되고 undefined는 초기화되지 않은 변수에 자동으로 할당된다.
  • unknown은 타입을 알 수 없는 경우에 사용되며, 타입을 확인해야만 다른 타입에 할당할 수 있다.
  • never는 결코 발생하지 않는 값의 타입으로 주로 예외 처리나 무한 루프와 같은 상황에서 사용된다.
  • any는 모든 타입을 허용하는 동적 타입으로, 타입 검사를 우회할 수 있으나 타입 안정성을 잃을 수 있다.
profile
일이 재밌게 진행 되겠는걸?

0개의 댓글