[TS] 타입스크립트의 기본 Type

JavaScript With Syntax For Types.

 

1️⃣  타입스크립트의 기본 Type

 

-  JavaScript 코드에 변수나 함수 등 Type을 정의

-  Type을 나타내기 위해서 타입 표기(Type Annotation)를 사용

 

 

기본 자료형 (primitive type)

:  object 와 reference 형태가 아닌 실제 값을 저장하는 자료형

 

일반적으로 Java와 같은 다른 언어에서는 기본 자료형은 시스템 자원이 많이 소모된다는 단점이 있어서 내장함수를 제공하지 않는다. 반면, 자바스크립트는 처리 방식이 달라서 primitive type에서  내장함수를 제공하여 사용이 가능하다.

 

string	문자열을 저장하는 타입
boolean	참/거짓을 저장하는 타입
number	부동 소수 값을 저장하는 타입 2진수, 8진수, 10진수, 16진수 사용 가능
null	값이 의도적으로 비어 있는 상태를 저장하는 타입
undefined	아무 값이 할당되지 않은 상태를 저장하는 타입
symbol (ES6 추가)

 

let str: string = "hi";

let isSucceeded: boolean = true;

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

let n: null = null;

let u: undefined = undefined;

 

💡 참고

null과 undefined는 비슷한 것 같지만 다른 값이다.

typeof null    // 'object'
typeof undefined    // 'undefined'

null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

 

 

 

 

참조 자료형 (reference type)

:  객체, 배열, 함수 등과 같은 Object형식의 타입

 

메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력한다.

 

object	기본 자료형에 해당하지 않는 타입 string, boolean, number, null, undefined를 제외한 타입
array	배열을 저장하는 타입
function	함수를 저장하는 타입

function create(o: object): void{}

create({ prop: 0 }) // 성공
create([1, 2, 3]) // 성공
create("string") // error
create(false) // error
create(42) // error
create(null) // error
create(undefined) // error


let arr: number[] = [1, 2, 3]

// 제네릭을 사용한 타입 표기 가능
let arr: Array<number> = [1, 2, 3]

 

 

 

추가 제공 자료형

:  TypeScript에서 개발자의 편의를 위해 추가로 제공하는 타입

 

tuple	길이와 각 요소의 타입이 정해진 배열을 저장하는 타입
enum	-  특정 값(상수)들의 집합을 저장하는 타입 -  코드가 단순해지며 가독성이 좋고, 인스턴스 생성과 상속을 방지하여 상수값의 타입안정성이 보장된다.
any	-  모든 타입을 저장 가능 -  컴파일 중 타입 검사를 하지 않는다
void	-  보통 함수에서 반환 값이 없을 때 사용 -  any의 반대 타입 -  일반적으로 변수에는 undefined와 null만 할당하고, 함수의 반환 값이 없을 때는 void를 사용
never	-  발생할 수 없는 타입 -  항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입 -  종료되지 않는 함수

let arr: [string, number] = ["Hi", 6];

arr[1].concat("!");    // Error, 'number' does not have 'concat’

// 정의하지 않은 index 호출 시 오류 
arr[3] = "hello";    // Error, Property '3' does not exist on type '[string, number]'

enum Car { BUS, TAXI, SUV };

let bus: Car = Car.BUS;
let bus: Car = Car[0];    // 인덱스 번호로 접근

enum Car { BUS = 1, TAXI = 2, SUV = 3 };    // 인덱스를 사용자 편의로 변경
let taxi: String = Car[2];

enum Car { BUS = 2, TAXI, SUV };
let taxi: String = Car[3];

let str: any = "hi";
let num: any = 10;
let arr: any = ["a", 2, true];

let unknown: void = undefined;

function sayHi(): void {
    console.log("hi");
}

// 종료되지 않는 함수
function neverEnd(): never {
    while (true) {}
}

// 함수가 종료되어서 never타입이 아니라 오류 발생
// Error: A function returning 'never' cannot have a reachable end point.ts(2534)
function neverEnd(): never {
    while (true) {
        break;
    }
}

// 항상 오류를 발생시키는 함수
function error(message: string): never {
    throw new Error(message);
}

 

 

 

 

 

2️⃣  Utility types

 

-  TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.

-  유틸리티 타입은 전역으로 사용 가능하다.

-  타입스크립트가 버전 업되면서 지속적으로 uility type이 추가되고 있다.

 

 

 

Partial<T>

-  프로퍼티를 선택적으로 만드는 타입을 구성.

-  주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환.

interface Todo {
    title: string;
    description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});

 

 

 

Readonly<T>

-  프로퍼티를 읽기 전용(readonly)으로 설정한 타입 을 구성.

interface Todo {
    title: string;
}

const todo: Readonly<Todo> = {
    title: 'Delete inactive users',
};

// 사용 예: frozen 객체의 프로퍼티에 재할당 방지
todo.title = 'Hello';    // Error: Cannot as sign to 'title' because it is a read-only property

 

 

 

Record<T>

-  프로퍼티의 집합 K로 타입을 구성.

-  타입의 프로퍼티들을 다른 타입에 매핑시키는데 사용.

interface PageInfo {
    title: string;
}

type Page = 'home' | 'about' | 'contact';

const x: Record<Page, PageInfo> = {
    about: { title: 'about' },
    contact: { title: 'contact' },
    home: { subTitile: 'home' },    // Error: '{ subTitile: string; }' is not assignable
    main: { title: 'home' },        // Error: main is not assignable to type 'Page'.
};

 

 

 

Pick<T, K>

-  프로퍼티 K의 집합을 선택해 타입을 구성.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
    description: 'description'    // Error: 'description' is not assignable to type
};

 

 

 

Omit<T, K>

-  모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성.

interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Omit<Todo, 'description'>;

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
    description: 'description'    // Error: 'description' is not assignable to type
};

 

 

 

Exclude<T, U>

-  T에서 U에 할당할 수 있는 모든 속성을 제외 한 타입을 구성.

type T0 = Exclude<"a" | "b" | "c", "a">;          // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;    // "c"
type T2 = Exclude<string | number | (() => void), Function>;     // string | number

 

 

 

Extract<T, U>

-  T에서 U에 할당 할 수 있는 모든 속성을 추출 하여 타입을 구성.

type T0 = Extract<"a" | "b" | "c", "a" | "f">;    // "a"
type T1 = Extract<string | number | (() => void), Function>;    // () => void

 

 

 

NonNullable<T>

-  null 과 undefined를 제외한 타입.

type T0 = NonNullable<string | number | undefined>;    // string | number
type T1 = NonNullable<string[] | null | undefined>;    // string[]

 

 

 

Parameters<T>

-  함수 타입 T의 매개변수 타입들의 튜플 타입을 구성.

declare function f1(arg: { a: number, b: string}): void
type T0 = Parameters<() => string>;           // []
type T1 = Parameters<(s: string) => void>;    // [string]
type T2 = Parameters<(<T>(arg: T) => T)>;     // [unknown]
type T4 = Parameters<typeof f1>;              // [{ a: number, b: string }]
type T5 = Parameters<any>;                    // unknown[]
type T6 = Parameters<never>;                  // never
type T7 = Parameters<string>;                 // 오류
type T8 = Parameters<Function>;               // 오류

 

 

 

ConstructorParameters<T>

-  생성자 함수 타입의 모든 매개변수 타입을 추출.

-  모든 매개변수 타입을 가지는 튜플 타입(T가 함수가 아닌 경우 never)을 생성.

type T10 = ConstructorParameters<ErrorConstructor>;     // [(string | undefined)?]
type T1 = ConstructorParameters<FunctionConstructor>;   // string[]
type T2 = ConstructorParameters<RegExpConstructor>;     // [string, (string | undefined)?]

interface I1 {
    new(args: string): Function;
}

type T12 = ConstructorParameters<I1>;    // [string]

function f1(a: T12) {
    a[0]
    a[1]    // Error: Tuple type '[args: string]' of length '1' has no element at index '1'.
}

 

 

 

ReturnType<T>

-  함수 T의 반환 타입으로 구성된 타입을 생성.

declare function f1(): { a: number, b: string }
type T0 = ReturnType<() => string>;          // string
type T1 = ReturnType<(s: string) => void>;   // void
type T2 = ReturnType<(<T>() => T)>;          // {}
type T3 = ReturnType<(<T extends U, U extends number[]>() => T)>;    // number[]
type T4 = ReturnType<typeof f1>;    // { a: number,b: string }
type T5 = ReturnType<any>;          // any
type T6 = ReturnType<never>;        // any
type T7 = ReturnType<string>;       // 오류
type T8 = ReturnType<Function>;     // 오류

 

 

Required<T>

-  T의 모든 프로퍼티가 필수로 설정된 타입을 구성.

interface Props {
    a?: number;
    b?: string;
};

const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5 };    // Error: Property 'b' is missing in type '{ a:number; }'

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.