[TypeScript] 02 - Types

🌟 타입스크립트를 학습하면서 배운 내용들을 블로그에 기록합니다 (feat. 드림코딩)

✐ 타입이란? (타입의 원칙)

• 변수는 데이터를 담을 상자와 같다. 타입을 지정해준다는 것은 이 상자에 라벨을 붙여서 안에 들어가야할 내용물을 명시하는 것이라고 이해할 수 있다.
• 변수 뿐만 아니라 객체의 키와 값, 함수의 Input, ouput에서도 타입을 명시해주는 것이 좋다
• 최대한 타입이 보장되는 방식으로 선택해서 프로그래밍 하는것이 중요하다!

✐ Basic Types

• number | string | boolean

const num: number = -6;  // number

const str: string = 'hello';  // string

const boal: boolean = false;  // boolean

• undefined | null | unkwown | any

/* undefined */ 

let name: undefined; // 💩 이런식으론 잘 쓰이지 않음

let age: number | undefined // number타입 혹은 undefined
age = undefined;
age = 1;  

/* null */

let person: null; // 💩
let person: string | null;

/* unknown : 💩 모든 타입이 허용되므로 잘 쓰이지 않음 */

let notSure: unknown = 0;
notSure = 'he';
notSure = true;

/* any : 💩 모든 타입이 허용되므로 잘 쓰이지 않음 */

let anything: any = 0;
anything = 'hello';

• void | never | object

/* void : 아무것도 리턴하지 않는 함수의 타입 (생략 가능) */

function print(): void {
  console.log('hello');
  return;
}

let unusable: void = undefined; // 💩

/* never : 절대 리턴되지 않는 함수에 대해 명시하기 위해 쓰임 (에러, 무한루프 등)  */

function throwError(message: string): never {
  throw new Error(message);
  // while (true) {}
}

/* object : function, array 모두 object에 포함되므로 보다 더 정확하게 명시해야함 */ 

let obj: object; //💩
function acceptSomeObject(obj: object) {}
acceptSomeObject({ name : 'Mason' })

✐ Function

• Basic

function add(num1: number, num2: number): number {
  return num1 + num2;
}

/* Promise 리턴하는 경우 */
function fetchNum(id: string): Promise<number> {
  // fetch code...
  return new Promise((resolve, reject) => {
    resolve(100);
  });
}

• 인자를 옵셔널하게 받는 경우 ( Optional Parameter )

function printName(firstName: string, lastName?: string) {
  console.log(firstName);
  console.log(lastName);
}

printName('Steve', 'Jobs');  // 'Steve', 'Jobs'
printName('Mason'); // 'Mason', 'undefined'

• 인자에 디폴트 값을 추가하는 경우 ( Default Parameter )

function printMessage(message: string = 'default message') {
  console.log(message);
}

printMessage(); // 'default message'

• 인자 개수가 정해져 있지 않은 경우 ( Rest Parameter )

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

addNumbers(1, 2); // 3
addNumbers(1, 2, 3, 4, 5); // 15

✐ Array

• array

// 첫 번째 방법 - elementType[]
const fruits: string[] = ['apple', 'banana'];

// 두 번째 방법 - Array<elementType>
const scores: Array<number> = [1, 3, 4];

// immutable 배열 인자로 받기
function printArray(fruits: readonly string[]) {}

• tuple

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

const [name, age] = student;

// Tuple은 인덱스로 접근해야 하므로 가독성이 떨어지는 편..
// 주로 interface, type alias, class 방식으로 대체하여 사용

✐ Type Alias

• 커스텀 타입 만들기 ( Type Alias )

type Text = string; // Text 라는 타입을 생성
const name: Text = 'Mason' // name 변수에 Text 타입 적용

// 객체에 type alias 적용하기
type Student = {
  name: string,
  age: number
}

const me: Student {
  name: 'Mason',
  age: 29
}

• 값 자체를 타입으로 결정할 수 있음 ( String Literal Types )

type JSON = 'json';
const json: JSON = 'json';
const json: JSON = 'others' // Error!

✐ Union

• 여러 값을 타입으로 지정 할 수 있음 ( Union Types )

  활용도가 높다 👍

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

type TileSize = 8 | 16 | 32;
const tile: TileSize = 16;

• 실전 로그인 예제

// Discriminated Union
// 동일한 키(result), 다른 값을 가지게 함 
// -> printLoginState 함수 내에서 state.result 에 접근할 수 있음

type SuccessState = {
  result:'success';
  response: string;
}
type failState = {
  result: 'fail';
  reason: string;
}
type LoginState = SuccessState | FailState;

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

function <printLoginState(state: LoginState) {
  if(state.result) {
    console.log(`🎉 ${state.response.body}`);
  } else {
    console.log(`😭 ${state.reason}`)
  }
}

✐ Intersection Types

• 다양한 타입들을 묶어서 선언할 수 있음

type Student = {
  name: string;
  score: number;
}

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

function internWork(person: Student & Worker) {
  console.log(person.name, person.employeeId, person.work());
}

internWork({
  name: 'mason',
  score: 1,
  employeeId: 123,
  work: () => {}
})

✐ Enum

• 여러가지 상수 값들을 한 곳에 모아서 정의할 수 있도록 도와주는 타입

// JavaScript
const MAX_NUM = 6;
const MAX_STUDENTS_PER_CLASS = 10;
const DAYS_ENUM = Object.freeze({"MONDAY": 0, "TUESDAY": 1, "WEDNESDAY": 2});
const dayOfToday = DAYS_ENUM.MONDAY;

// TypeScript
enum Days {
  Monday, // enum에 값을 할당 할 수 있다. ex) Monday = 'mon'
  Tuesday,
  Wednesday,
}

// 값이 할당 되지 않으면 0부터 차례대로 할당된다
let day = Days.Monday
console.log(day) // -> 0 .. 

// enum에 값이 할당된 뒤 다른 값을 할당할 수 있다 (타입이 정확하게 보장되지 않음)
day = 10

// 따라서 타입스크립트에서 enum을 가급적 쓰지 않는 것이 좋으며 Union 타입으로 대체 가능하다
type dayOfWeek = 'Monday' | 'Tuesday' | 'Wednesday'

✐ Inference

• 타입 추론 ( Type Inference )

let text = 'hello';
text = 1 // Error!

// 인자에 타입을 명시하지 않으면 any로 추론
function print(message = 'hello') {
  console.log(message);
}
print('hello');
print(1);

function add(x: number, y: number) {
	return x + y;
}
// 리턴 타입을 명시하지 않아도 number로 추론
const result = add(1, 2) // type: number

그래도 타입은 정확하게 명시해 주는게 좋다 😭

✐ Type Assertion

• 정말 있다고 장담할 수 있을 때 사용하기 ( ! )

function jsStrFunc(): any {
    return 2;
  }
  const result = jsStrFunc();
  console.log((result as string).length);
  console.log((<string>result).length);

  const wrong: any = 5;
  console.log((wrong as Array<number>).push(1)); // 😱

  function findNumbers(): number[] | undefined {
    return undefined;
  }
  const numbers = findNumbers()!;
  numbers.push(2); // 😱

  const button = document.querySelector('class')!;