WIL : 23.05.14

23.05.04~ / TypeScript Study_interface

interface

◼︎ 객체의 정의

JS에서 아래와 같이 선언했을때, TS에서는 interface를 사용해 변환할 수 있다.

  const [initial, setInitial] = useState (
    {
      id:0, 
      title : '', 
      content :'', 
      isDone : false
    }
  )

1. 만들고자 하는 component의 function과 별개로 interface를 선언한다. interface의 이름을 initial이라 하자.

   interface initial{
   
   }
   
   ...
   
   function App() {
   	..내용중략
   }

2. JS에서 useState로 관리한 값들을 살펴보면 배열이며, `id, title, content, isDone`을 가지고 있다. 이때 각각은 `number, string, string, boolean`값이므로 type을 지정해 interface안에 선언한다.

>```
interface Initial {
  id: number;
  title: string;
  content: string;
  isDone: boolean;
}
>
...
>
function App() {
	..내용중략
}

3. App() 안에서 선언한 interface를 호출해 사용한다.

interface Initial {
  id: number;
  title: string;
  content: string;
  isDone: boolean;
}

...

function App() {
  let initial : Initial = {

  }
}

4. interface Initial은 id, title, content, isDone을 가지고 있으므로 let initial안에서도 같은 인자를 호출해주어야 한다.

   interface Initial {
     id: number;
     title: string;
     content: string;
     isDone: boolean;
   }
   
   ...
   
   function App() {
     let initial : Initial = {
         id: 0,
       title: "",
       content: "",
       isDone: false,
     }
   } 

※ 만약 interface 내에서 변경하고 싶지 않은 값이 있을 경우 readonly를 객체명 앞에 선언하여 사용할 수 있다. (ex. readonly id : 1234)
※ A,B,C,D 중 해당하는 문자에만 값을 선언하고 싶을때는 각 문자에 옵셔널을 걸거나 다음과 같이 쓸 수 있다.
[Alphabet:string] : number = Alphabet이라는 key는 string으로 받고, 그에 해당하는 value의 type은 number로 받겠다는 의미이다. (ex. 학년별로 점수를 입력할때 등)
더 나아가 number값이 만약 1~5로 지정이 되어있다면 let Score = 1 | 2 | 3 | 4 | 5; 로 선언하고 [Alphabet:string] : Score 로 지정할 수 있다.

◼︎ 함수의 정의

간단한 연산함수를 다음과 같이 정의할 수 있다.
인자값을 interface ADD 에 정의하고 덧셈함수를 add라 선언하면 다음과 같이 작성할 수 있다.
add(숫자1, 숫자2)를 입력하게 되면 number 타입의 return 값이 나오게 되는 것이다.

  interface ADD {
    (num1: number, num2: number): number;
  }
  let add: ADD = function (x, y) {
    return x + y;
  };
  console.log(add(10, 20));

마찬가지로 대소비교를 이용한 함수도 동일하게 작성할 수 있다.
인자값을 interface ADULT에 정의하고, 19세 이상판별에 대한 식을 function adult에 정의하면 들어오는 인자값에 대한 boolean 값을 return 하게 된다.

  interface ADULT {
    (age: number): boolean;
  }
  let adult: ADULT = (age) => {
    return age > 19;
  };
  console.log(adult(20));

◻︎ 함수 확장 (extends)

어떤 interface가 다른 interface를 참조하게 될 경우, extends를 사용해 참조하는 interface의 인자값을 사용할 수 있다. 다음 예시를 살펴보자.

  interface A {
    A: string;
  }
  
  interface B {
    B : number;
  }

두 interface와 같이 A, B를 인자로 가지며 추가로 C를 포함하는 interface C가 있을때 다음과 같이 작성할 수 있다.

  interface A {
    A: string;
  }
  
  interface B {
    B : number;
  }
  
  interface C extends A, B{
	C : boolean;  
  }

이렇게 C는 A, B, C인자를 갖는 interface가 되는 셈이다.