타입스크립트 기본

beomjin_97·2022년 12월 13일
0

typescript

목록 보기
2/7

1. 기본 타입


1.1 기본 자료형

1.1.1 string

const str: string = 'hello';

1.1.2 boolean

const condition: boolean = true;

1.1.3 number

부동 소수를 저장
binary, octal, decimal, hexadecimal 가능,

const num: number = 9;

1.1.4 null

const n: null = null;

1.1.5 undefined

const u: undefined = undefined;

1.1.6 symbol (수정)

const key: symbol = Symbol("key");

1.2 참조 자료형

1.2.1 object

기본 자료형을 제외한 타입

const obj: object = { a: 1, b: 2 };

1.2.2 array

제네릭을 사용해서 표현 가능

const arr: number[] = [1, 2, 3, 4, 5];
const arr: Array<number> = [1, 2, 3, 4, 5];

1.2.3 function

// 뒤에서 자세하게 명시

1.3 추가 자료형

1.3.1 tuple

길이와 요소의 타입이 정해진 배열

const arr: [string, number, boolean] = ['1', 2, true]

1.3.2 enum

열거형

enum Car {
  BUS,
  TAXI,
  SUV = 2,
}

const taxi: Car = Car.TAXI;
console.log(taxi); // 1

1.3.3 any

타입 검사를 하지 않아 모든 타입을 저장

let random: any = 'string'
random = 123;
random = [1,2,3]

1.3.4 void

보통 함수에서 반환값이 없을 때 지정

function sayHi(): void {
  console.log('h1');
}

1.3.5 never

함수가 항상 오류를 발생시키거나 종료 되지 않아 반환되지 않을 때 사용

function neverEnd(): never {
  while (true) {}
}

function alwaysError(): never {
  throw new Error();
}


2. 유틸리티 타입


공통 타입 변환을 용이하게 하기 위해 전역으로 사용 가능한 타입

2.1 Partial<T>

주어진 타입의 부분 집합

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

const des: Partial<Todo> = { content: "having dinner" };

2.2 Readonly<T>

객체의 프로퍼티의 재할당 금지

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

const des: Readonly<Todo> = { title: "todos", content: "having dinner" };
des.content = 'having lunch'; // Error

2.3 Record<T,K>

타입의 프로퍼티들을 다른 타입에 매핑시킨다.

interface Contents {
  title: string;
}

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

const obj: Record<Page, Contents> = {
  home: { title: "home" },
  about: { title: "about" },
  contact: { title: "contact" },
};

2.4 Pick<T,K>

타입을 선별적으로 구성한다.

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

const todo: Pick<Todo, 'title'|'completed'> = {
  title: 'title123',
  completed: false
}

2.5 Omit<T,K>

K를 제거한 T타입

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

const todo: Omit<Todo, "completed"> = {
  title: "title123",
  des: "say hello",
};

2.6 Exclued<T,U>

U에서 할당하가능한 타입을 T에서 제외한 타입

type T1 = Exclude<"A" | "B" |"C", "C"|"D">
let a:T1 = 'A'
let b:T1 = "B"

2.7 Extract<T,U>

T에서 U에 할당할 수 있는 모든 속성을 추출한 타입

type T1 = Extract<"A" | "B" | "C", "C" | "D">;
let a: T1 = "C";

2.8 NonNullable<T>

null 과 undefined를 제외한 타입

type T0 = NonNullable<string | boolean | null | undefined>
const a: T0 = null // Error
const b: T0 = undefined // Error

2.9 Parameters<T>

함수 타입 T의 매개변수 타입들의 튜플 타입

type T1 = Parameters<(foo:string, bar: number ) => void>
//[foo: string, bar: number]

2.10 ConstructorParameters<T>

생성자 함수 타입T의 모든 매개변수 타입들의 튜플 타입

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

type T1 = ConstructorParameters<I1>;
// [args: string, args2: number]

2.11 ReturnType<T>

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

declare function f1(): { a: number; b: string };
type T1 = ReturnType<typeof f1>;
// { a: number; b: string;}

2.12 Required<T>

모든 프로퍼티가 required 된 타입을 생성

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

const obj1: Props = {a: 5}
const obj2: Required<Props> = {a: 5, b: 'A'}

3. 함수

매개변수와 반환값에 대한 타입을 지정한다.

function world(name: string): string {
  return `hello ${name}`;
}

const world2 = function (name: string) {
  return `hello ${name}`;
};

const world3 = (name: string) => `hello ${name}`;

3.1 함수에서의 타입 추론

방정식의 한쪽에만 타입이 있어도 타입을 추론할 수 있다.

let f2 = (x: number, y: number): number => x + y

type t1 = (x: number, y: number) => number
let f1: t1 = (x,y) => x + y 

3.2 매개변수

기본적으로 함수에 주어진 매개변수의 개수를 일치시키야 한다.
주어진 매개변수의 개수를 지키지 않아도 타입에러가 나지 않는 경우가 있다.

3.2.1 optional parameter

변수명 뒤 ?로 선택적으로 매개변수를 사용할 수 있다.

const f2 = (x: number, y?: number): number => y === undefined ? x : x+ y

f2(1)  // 1
f2(1,2)  // 3

3.2.2 기본값 할당

기본값을 할당하여 값이 전달되지 않았을 때도 에러가 발생하지 않는다.

let f2 = (x: number, y: number = 0): number =>  x + y;

f2(1); // 1
f2(1, 2);  // 3

Rest parameter

...을 사용하여 무한히 많은 인자를 받을 수 있다.
받은 인자는 배열로 빌드되어 함수에서 사용할 수 있다.

let f2 = (x: number, y: number, ...arr: number[]): void => {
  console.log(arr);
};

f2(1, 2, 3, 4, 5); // [3, 4, 5]
profile
Rather be dead than cool.

0개의 댓글