Typescript 기초2

Typescript 기초2 🔑

Literal Type

let 숫자: 123;
숫자: 456; // ERROR

정해진 값만 들어오게 타입을 선언할 수 있다.

let a = (x: '가위' | '바위' | '보'): ('가위' | '바위' | '보')[] => {
  return ['가위', '보'];
};

함수도 가능

var 자료 = {
  name: 'kim',
};

function 내함수(a: 'kim') {}

내함수(자료.name); // ERROR

에러가 뜨는 이유는 a: 'kim'의 뜻은 ‘kim’이라는 type만 받겠다는거다.

따라서 값이 ‘kim’인 자료.name을 넣으면 에러가 뜬다.

var 자료 = {
  name: 'kim',
} as const;

function 내함수(a: 'kim') {}

내함수(자료.name); // ERROR

이렇게 as const를 사용하면 Literal Type처럼 지정해주는데

name: ‘kim’ 이렇게 타입이 지정된다.

1. 키값을 타입으로 지정해줌
2. 키를 readonly로 지정하여 값이 변하지 않게해줌

---

methods 안에 타입지정하기

type Member = {
  name: string;
  age: number;
  plusOne: (x: number) => number;
  changeName: () => void;
};

let 회원정보: Member = {
  name: 'kim',
  age: 30,
  plusOne(x) {
    return x + 1;
  },
  changeName: () => {
    console.log('안녕');
  },
};
회원정보.plusOne(1);
회원정보.changeName();

메소드의 타입지정

type CutType = (x: string) => string;
type RemoveDash = (x: string) => number;

let cutZero: CutType = (x) => {
  let result = x.replace(/^0+/, '');
  return result;
};
let removeDash: RemoveDash = (x) => {
  let result = x.replace(/-/g, '');
  return parseFloat(result);
};

function allFunction(a: string, func1: CutType, func2: RemoveDash): void {
  let result = func1(a);
  let result2 = func2(result);
  console.log(result2);
}
allFunction('010-1111-2222', cutZero, removeDash);

---

class

class Person {
  name: string; // 필드값
  constructor(a: string) {
    this.name = a;
  }
}

필드값을 미리 선언해주어야 사용가능

class Word {
  num;
  str;

  constructor(...param) {
    let 숫자들: number[] = [];
    let 문자들: string[] = [];

    param.forEach((i) => {
      if (typeof i === 'string') {
        문자들.push(i);
      } else {
        숫자들.push(i);
      }
    });

    this.num = 숫자들;
    this.str = 문자들;
  }
}

let obj = new Word('kim', 3, 5, 'park');
console.log(obj.num); //[3,5]
console.log(obj.str); //['kim', 'park']

예시

---

interface

interface Square {
  color: string;
  width: number;
}
//type Square = { color: string; width: number };

let square: Square = { color: 'red', width: 100 };

object 타입지정시 interface 사용가능

interface Student {
  name: string;
}
interface Teacher {
  name: string;
  age: number;
}

//--------------------------------------------------------------------------------name 같으므로 합친다

interface Student {
  name: string;
}
interface Teacher extends Student {
  age: number;
}

class 문법과 비슷하게 사용가능

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

//--------------------------------------------------------------------------------name 같으므로 합친다

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

type도 위와같이 사용가능

interface Cart {
  product: string;
  price: number;
}

let 장바구니: Cart[] = [
  { product: '청소기', price: 7000 },
  { product: '삼다수', price: 800 },
];

배열안의 객체만들기

interface MathObj {
  plus: (a: number, b: number) => number;
  minus: (a: number, b: number) => number;
}

let 오브젝트: MathObj = {
  plus(a, b) {
    return a + b;
  },
  minus(a, b) {
    return a - b;
  },
};

interface 메서드

Interface vs Type

Interface는 중복선언 가능 Type 중복선언 불가능

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

이렇게 중복선언하면

type Student = { name: string, age: number}과 같다

즉, 자동으로 extends해준다.