2023 05 17

2023-05-17¶

TypeScript¶

기본 타입
- string : 문자열
- boolean : t/f
- number : 숫자
- Array : 숫자배열
- number[] : 숫자배열
- void : 아무것도 반환하지 않음
- never : 절대 끝나지 않음
- enum : TS에서만 제공
```
enum OS {
    Window = 'win',
    Ios = 'ios',
    Android = 'and'
}
```
- null
- undefined
- object
- 타입 정의는...
  - 변수, 함수 뒤에 하자!

인터페이스

object에는 없는 속성들을 컴파일 타임에 잡아내고 휘뚜루마뚜루 할 수 있도록 인터페이스를 정의해두자

type Score = 'A' | 'B' | 'C' | 'F'

interface User {
    name : String;
    age : number;
    gender? : string;
    readonly birthYear : number;
    [grade:number] : Score;
}

let user : User = {
    name: 'xx',
    age: 30,
    birthYear: 2000,
    1: 's',
    2: 'a'
}

함수도 인터페이스로 추출할 수 있다!

interface Add {
  (num1: number, num2: number): number;
}

const add: Add = function(x, y) {
    return x + y;
}

add(10, 20);

interface IsAdult {
  (age: number): boolean;
}

const a: IsAdult = (age) => {
    return age > 19;
}

a(33)

클래스도 인터페이스로 휘뚜루 마뚜루

interface Car {
  color: string;
  wheels: number;

  start(): void;
}

interface benz extends Car {
    // 확장 가능!
}

class Bmw implements Car {
  color;
  wheels = 4;

  constructor(c:string) {
    this.color = c;
  }

  start() {
      console.log("GO!")
  }
}

const b = new Bmw("Green")
b.start()

리터럴, 유니온/교차 타입

let: 변할 수 있는 값
const: 변할 수 없는 값

놀랍게도 이런게 된다... 교차타입

interface Car {
    name: string;
    start(): void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

const toyCar: Toy & Car = {
    name: "타요",
    start() {},
    color: "blue",
    price: 1000, 
}

클래스

접근 제한자

public: 자식 클래스, 클래스 인스턴스 모두 접근 가능 - default
protected: 자식 클래스에서 접근 가능

private: 해당 클래스 내부에서만 접근 가능

class Car {
  protected name: string = "car";
  color: string;

  constructor(color: string) {
    this.color = color;
  }

  start() {
    console.log("start");
    console.log(this.name)
  }
}

class Bmw extends Car {
  constructor(color: string) {
    super(color);
  }

  showName() {
    console.log(super.name);
  }
}

추상 클래스도 있어 abstract 클래스 + abstract 메서드 넣어주세요~

제네릭

타입이 달라도 공통된 로직 휘뚜루 마뚜루 처리할 수 있어야겠지?

function getSize<T>(arr: T[]): number {
    return arr.length;
}

const arr1 = [1, 2, 3];
getSize(arr1);

const arr2 = ["a", "b", "c"]
getSize(arr2)

const arr3 = [false, true, true]
getSize(arr3)

const arr4 = [{}, {}, { name: "Tim" }]
getSize(arr4)

extends 도 가능하겠지?

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

interface Car {
    name: string;
    color: string;
}

interface Book {
    price: number;
}

const user: User = { name: "a", age: 10 }
const car: Car = { name: "bmw", color: "red" }
const book: Book = { price: 3000 }

function showName<T extends { name: string}>(data: T): string {
    return data.name;
}

showName(user);
showName(car);

유틸리티 타입
- 필요할 때 찾아쓰자
- keyof
- Partial
- Required
- ReadOnly
- Record
- Pick
- Omit
- Exclude
- NonNullable