타입스크립트 기초

기본타입

• string

let str: string = 'hello, typeScript!';

• number

let num: number = 11;

• boolean

let bool: boolean = true;

• array

let arr1: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3]; // Generic

• tuple

배열의 원소의 갯수와 각 원소의 타입을 지정

let tuple: [string, number] = ['hello', 11];

• enum

enum Avengers {
  Capt,
  IronMan,
  Thor,
}

console.log(Avengers[0]); // 'Capt'
console.log(Avengers.Cpat); // 0

enum Color {
	RED = 'red',
  GREEN = 'green',
  BLUE = 'blue',
}

const color = Color.BLUE;
console.log(color); // 'red'

• any

모든 타입을 허용하는 타입

let age: any = '19';

• void

undefined, null만을 허용, 함수에서는 반환값을 설정할 수 없는 타입

let unused: void = undefined;
function notReturn(): void {
  console.log('not return');
}

• never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입

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

인터페이스

객체의 타입을 정의

interface Company {
  name: string;
  age: number;
  address?: string; // optional
}

const kakao: Company = {
  name: 'kakao',
  age: 22,
}

// 함수정의
interface login {
  (username: string, password: string): boolean;
}

let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

// extends
// 특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.
interface Time {
  hour: number;
  minute: number;
  second: number;
}

interface DateTime extends Time {
  year: number;
  month: number;
  day: number;
}

interface OffsetDateTime extends DateTime {
  offset: number;
}

interface ZoneDateTime extends DateTime {
  zoneId: number;
}

interface TimeFormat extends Pick<Time, 'hour' | 'minute'> {
  ampm: 'am' | 'pm';
}

const timeFormat: TimeFormat = {
  hour: 10,
  minute: 30,
  ampm: 'am',
};

함수

function sum(a: number, b?: number): number {
  return a + b;
}

sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 10

연산자 타입

• Union Type

A이거나 B이다 라는 의미의 타입

function logText(text: string | number) {
  // ...
}

• Intersection Type

모두 만족하는 하나의 타입

interface Person {
  name: string;
  age: number;
}

interface Developer {
  name: string;
  skill: number;
}

type Capt = Person & Developer;
// {
//   name: string;
//   age: number;
//   skill: string;
// }

제네릭

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

interface Value<T> {
  value: T;
}

const value1: Value<number> = {
  value: 123,
};

const value2: Value<string> = {
  value: '123',
};

function toString<T>(a: T): string {
  return `${a}`;
}
console.log(toString<number>(4));
console.log(toString<string>('4'));
console.log(toString('4')); // 제네릭을 생략해줄 수 있다. 생략하면 제네릭은 타입을 추론한다.

Partial, Required, Pick, Omit

// 예제
interface User {
  id: number;
  name: string;
  age: number;
  address: string;
  created?: string;
  updated?: string;
}

• Partial

모든 필드가 Optional이 된다.

const partial: Partial<User> = {
  name: 'younoah',
};

• Required

모든 필드가 Required이 된다.

const required: Required<User> = {
  id: 123,
  name: 'younoah',
  age: 12,
  address: '주소',
  created: '생성', // 옵셔널 필드지만 필수 필드로 바뀌었다.
  updated: '수정', // 옵셔널 필드지만 필수 필드로 바뀌었다.
};

• Pick

특정 필드만 골라서 사용할 수 있다.

const pick: Pick<User, 'name' | 'age' | 'address'> = {
  name: 'younoah',
  age: 123,
  address: '주소',
};

• Omit

특정 필드만 빼고 사용할 수 있다.

const omit: Omit<User, 'id' | 'created' | 'updated'> = {
  name: 'younoah',
  age: 12,
  address: '',
};

• 복합사용

  User 인터페이스에서 name은 필수 age, address는 옵셔널

const mixed: Omit<User, 'id' | 'address' | 'age' | 'created' | 'updated'> &
  Pick<Partial<User>, 'address' | 'age'> = {
  name: 'younoah',
};