타입스크립트 기본타입

타입스크립트의 타입지정

변수 & 함수: 타입 형식으로 타입을 지정해준다.

const num: number = 0;
function strFunc(str: string): string /* 리턴값 타입지정 */{
  return '문자열'
}

let age: undefined; // undefined는 값이 정해지지 않은 상태
let old: null; // null은 값이 없는 상태
/* undefined와 null 은 단독으로 사용하지 않고 옵셔널 체인형식
ex:) age: number | undfefined 형식으로 지정*/

타입스크립트만의 타입

• unknown: 알수없는 타입
• any: 어떤것이든 담을수 있는 타입
• void: 함수에서 return 값이 없을 때 사용
• never: 절대 return되지 않을때 명시하는 타입 (error, 무한루프)
• object: 원시타입을 제외한 모든 object타입 (추상적)

함수 타입 이용

optional function

optional paratmeter: 인자를 전달해도 되고 전달하지 않아도되는 함수
parameter 앞에 question mark '?'를 붙여준다.

function fullName(firstName: string, lastName?: string) {
  return firstName + lastName;
}

fullName('woong','tack');
fullName('woong');
fullName('woong', undefined);

default parameter

parameter를 전달하지 않을때 기본값 지정

function getMessage(message: string = 'default message') {
 return message; 
}

getMessage();

rest parameter

paramter 갯수에 상관없이 동일한 타입의 데이터를 함수에 전달할때 사용

function addNumbers(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b);
}

Array & Tuple

Array 타입을 지정할 때 사용할수있는 형식

// 배열타입을 지정할때 사용되는 두가지 형식
const fruits: string[] = ['str', 'str2'];
const scroes: Array<number> = [1, 3, 4];

function printArray(furits: readonly string[]) {
  /* 전달된 인자를 함수 내부에서 변경할수 없게 할때 사용되는 readonly
  string[] 형식만  readonly 사용가능
  Array<number> 형식은 사용안됨*/
}

Tuple: 서로다른 타입을 함께 가질수 있는 배열

데이터를 접근할때 index로 접근하는것은 가독성이 떨어지므로 비추천
interface, type alias, class로 대체해서 사용!
react의 useState가 tuple을 잘 사용한 예

let student: [string, number];
student = ['name', 123];
student[0]; // name
student[1]; // 123

Type alias

새로운 타입을 직접 정의해서 사용

type Text = string;
const name: Text = 'woong';

type Student = {
  name: string;
  age: number;
};
const student: Student = {
  name: 'woong',
  age: 27
}

String Literal Types

지정한 문자열타입만 할당 가능

type Woong = 'woong';
let woongName: Woong;
woongName = 'woong';
woongName = 'tack'; // compile error

Union Type: OR

발생할수 있는 모든 케이스중 하나만 할당할때 사용

type Direction = 'left' | 'right' | 'up' | 'down';
function move(direction: Direction) {
  console.log(direction);
}

Discriminated Union

공통된 속성을 이용하여 구분하기 쉽게 직관적인 코드를 작성

type SuccessState = {
  result: 'success'; // 공통된 속성
  response: {
    body: string;
  }
}

type FailState = {
  result: 'fail'; // 공통된 속성
  reson: string;
}

type LoginState =  SuccessState | FailState;

function login(): LoginState {
  return {
    result: 'success',
    response: {
      body: 'logged in'
    }
  }
}

function printLoginState(state: LoginState): void {
  // 공통된 속성을 이용하여 구분
  if (state.result === 'success') {
  } else {
  }
}

Intersection: AND

다양한 타입을 하나로 묶어서 사용할수 있다.

type Student = {
  name: string;
};

type Worker = {
  work: () => void;
};

function interWork(person: Student & Worker) {
  ...
}

interWork({
  name: 'woong',
  work: () => {},
})

Enum

상수값들을 하나로 모아서 사용
첫글자만 대문자로 작성
enum 타입으로 지정된 변수는 어떤 숫자값으로도 할당이 가능하다.
타입보장이 안되기때문에 TS에서 잘사용되지 않는다.
Union 타입으로 enum을 대체해서 사용하자

enum Days {
  Monday, // 값을 지정 안할시 0부터 시작
  Tuesday,
  Wednseday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

그 외

추천하지 않는 TS 방식들

Type Inference 타입추론

타입을 명시하지 않아도 TS가 알아서 타입을 추론하는 것

Type Assertions

타입을 1000% 장담할때 사용