[TS] 2. 기본 타입 마스터 하기

22.09.01 목

Basic:

JS type

• Primitive: number, string, boolean, bigint, symbol, null, undefined
• Object: function, array

 

number / string / boolean

  // number
  const num: number = -6;

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

  // boolean
  const boal: boolean = false;

 

 

undefined / null / unknown / any

• undefined: 값 있는지 없는지 결정되지 않은 상태
• null: 비어있다!
• unknown: 어떤 타입이 담길 지 알 수 없다!
• any: 어떤 타입이든 담길 수 있다!

  // undefined
  let name: undefined; // 💩
  let age: number | undefined;
  age = undefined;
  age = 1;
  function find(): number | undefined {
    return undefined;
  }

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

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

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

 

 

void / never

  // : void 생락 가능
  function print(): void {
    console.log('hello');
    return;
  }
  let unusable: void = undefined; // 💩

  // never
  function throwError(message: string): never {
    // message -> server (log)
    throw new Error(message);
    while (true) {}
  }
  let neverEnding: never; // 💩

 

 

object

  // 어떤 object 형태든 가능
  let obj: object; // 💩
  function acceptSomeObject(obj: object) {}
  acceptSomeObject({ name: 'ellie' });
  acceptSomeObject({ animal: 'dog' });

 

 

---

Function:

JS vs TS

  // JavaScript 💩
  function jsAdd(num1, num2) {
    return num1 + num2;
  }

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

 

  // JavaScript 💩
  function jsFetchNum(id) {
    // code ...
    // code ...
    // code ...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

  // TypeScript ✨
  function fetchNum(id: string): Promise<number> {
    // code ...
    // code ...
    // code ...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

 

Optional parameter

  function printName01(firstName: string, **lastName?: string**) {
    console.log(firstName);
    console.log(lastName); // undefined
  }

  printName01('Steve', 'Jobs');
  printName01('Ellie');
  printName01('Anna');

 

  function printName02(firstName: string, **lastName: string | undefined**) {
    console.log(firstName);
    console.log(lastName); // undefined
  }

  printName02('Steve', 'Jobs');
  printName02('Ellie', undefined); //undefined 명시해줘야함
  printName02('Anna', undefined);

 

 

Default parameter

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

 

 

Rest parameter

  function addNumbers(**...numbers: number[]**): number {
    return numbers.reduce((a, b) => a + b);
  }
  console.log(addNumbers(1, 2));
  console.log(addNumbers(1, 2, 3, 4));
  console.log(addNumbers(1, 2, 3, 4, 5, 0));

 

 

---

Array:

Array

const fruits: string[] = ['🍅', '🍌'];
const scores: Array<number> = [1, 3, 4];

• string[]: readonly 가능
• Array<number>: readonly 불가능

function printArray(fruits: **readonly string[]**) {}

 

 

Tuple

• interface, type alias, class로 대체해서 사용하는게 좋음!
• 튜플 권장X
  • 인덱스로 접근 힘듦
  • 가독성 떨어짐
  • object, class 같은 경우 student.name 이런 식으로 접근 가능 (권장)

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

  const [name, age] = student;
  console.log(name); //name
  console.log(age); //123

 

 

---

Type Aliases:

type 커스텀 하기

  type Text = string;
  const name: Text = 'ellie';
  const address: Text = 'korea';

  type Num = number;

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

  const student: Student = {
    name: 'ellie',
    age: 12,
  };

 

 

String Literal Types

  type Name = 'name';
  let ellieName: Name;
  ellieName = 'name';
  type JSON = 'json';
  const json: JSON = 'json';

  type Boal = true; // 이런 식으로도 가능은 함

 

 

---

Union types: | (OR)

  type Direction = 'left' | 'right' | 'up' | 'down';

  function move(direction: Direction) {
    console.log(direction);
  }
  move('down');

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

 

ex)

  // function: login -> success, fail ⏱
  type SuccessState = {
    response: {
      body: string;
    };
  };
  type FailState = {
    reason: string;
  };
  type LoginState = SuccessState | FailState;

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

  // printLoginState(state: LoginState)
  // success -> 🎉 body
  // fail -> 😭 reason
  function printLoginStatee(state: LoginState) {
    // state.response or state.reason 안됨!
    // 상태가 Success인지 Fail인지 알 지 못하기 때문
    if ('response' in state) { ⭐️
      console.log(`🎉 ${state.response.body}`);
    } else {
      console.log(`😭 ${state.reason}`);
    }
  }

 

 

Discriminated:

  // function: login -> success, fail ⏱
  type SuccessState = {
    result: 'success'; // 공통 property ⭐️
    response: {
      body: string;
    };
  };
  type FailState = {
    result: 'fail'; // 공통 property ⭐️
    reason: string;
  };
  type LoginState = SuccessState | FailState;

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

    // printLoginState(state: LoginState)
  // success -> 🎉 body
  // fail -> 😭 reason
  function printLoginState(state: LoginState) {
    if (state.result === 'success') { ⭐️
      console.log(`🎉 ${state.response.body}`);
    } else {
      console.log(`😭 ${state.reason}`);
    }
  }

 

 

---

Intersection Types: & (AND)

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

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

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

  internWork({
    name: 'ellie',
    score: 1,
    empolyeeId: 123,
    work: () => {},
  });

 

 

---

Enum:

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

  // TypeScript
  enum Days {
    Monday, // 0
    Tuesday, // 1
    Wednesday, // ...
    Thursday, // string 타입 지정 가능! > 모두 명시해줘야함
    Friday,
    Saturday,
    Sunday,
  }

    console.log(Days.Monday); // 0

• union type 사용 권장
  • TS는 타입 추론 가능이 가능 하기에 타입 보장 불가능

  let day: Days = Days.Saturday;
  **day = Days.Tuesday; // 1 (number)
  day = 10; // 임의의 숫자 지정 가능**
  console.log(day);

  // union type 사용 하자..!
  type DaysOfWeek = 'Monday' | 'Tuesday' | 'Wednesday';

  let dayOfweek: DaysOfWeek = 'Monday';
  dayOfweek = 'Wednesday';

 

 

---

Type Inference:

타입 추론

• void 제외하고는 명시해주는게 좋음!
• but 회사 규칙에 따르자 ,,

let text = 'hello';
function print(message = 'hello') {
  console.log(message);
}
print(); // return string

function add(x: number, y: number) {
  return x + y;
}
const result = add(1, 2); // return number

 

 

Type Assertions 💩

  function jsStrFunc(): any {
    // return 'hello';

    return 2;
  }
  const result = jsStrFunc();
  console.log((result as string).length); // 런타임 error 발생 하지는 않음,,but undefined
  console.log((<string>result).length);

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

 

  function findNumbers(): number[] | undefined {
    return undefined;
  }
  const numbers = **findNumbers()!**;

  numbers.push(2); // 😱
  numbers!.push(5);

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