TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처

🐳Type Alias , Interface

type alias타입 별칭과 interface는 타입의 이름을 지정하는 방법으로 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있다.

interface People {
  name : string
  age : number
}
const me: People ={
  name: 'john',
  age:50,
}

💥차이점

- interface 확장 : extends 사용

interface Animal {
  name : string;
}

interface Bear extends Animal {
  honey:boolean;
}

const bear1:Bear = {
  name:'honey bear',
  honey:true
}

- type 확장 : intersection 사용

type Animal {
  name : string;
}

type Bear = Animal & {
  honey:boolean;
}

const bear1:Bear = {
  name:'honey bear',
  honey:true
}

- interface 에서만 선언 병합이 가능하다(Declaration Merging)

interface Animal {
  name : string;
}

interface Animal {
  honey:boolean;
}

const bear1:Animal = {
  name:'honey bear',
  honey:true
}

Type 에서는 Declaration Merging 불가

💥공통점

- type과 interface 모두 클래스에 implements사용

interface IArticle{
  category:string;
  content:string;
}

class Article implements IArticle{
  public category= "";
  public content = "";

- union

union을 사용하면 개발자가 타입 A, 타입 B가 될수 있는 새 type을 만들 수 있다.
| 연산자를 사용해서 Type과 interface 모두사용해 새로운 union생성
그러나 선언은 항상 type이여야 한다!!

interface Animal{
name:string;
}
interface Bear{
honey:boolean;
}
//type Animal{
//  name:string;
//}
//type Bear{
//  honey:boolean;
//}
type NewType = Animal | Bear;

const bear1 : NewType ={
name:'honey bear',
honey:true
}

🐳호출 시그니처

interface Post{
  id:number ;
  title:string;
  getLikeNumber : (like:number) => number
  //이 함수의 타입을 재사용하고 싶다면????
}
const post1:Post = {
  id:1,
  title:'post 1',
  getLikeNumber(like:number){
    return like;
  }
}
post1.getlikeNumber(1);

함수의 타입을 재사용하고 싶다면 interface 생성

interface getLikeNumber {
	(like:number):number;
}

interface Post{
  id:number ;
  title:string;
  getLikeNumber : (like:number) => number
  //이 함수의 타입을 재사용하고 싶다면????
}
const post1:Post = {
  id:1,
  title:'post 1',
  getLikeNumber(like:number){
    return like;
  }
}
post1.getlikeNumber(1);

interface getLikeNumber {
	(like:number):number;
}

이런식으로 소괄호 안에 매개변수를 넣어주고 : 과 함께 반환 타입을 주면된다.

🐳인덱스 시그니처

속성의 모든이름을 미리 알지 못하는 경우가 있지만, 값의 형태는 알고있을때
index signature를 사용하여 가능한 값의 type을 지정할 수 있다.

객체 인덱스 시그니처

interface Post {
  id: number;
  title:string;
}
const post1:Post = {
  id:1,
  title:'post 1',
}
post1['description'] = 'post1 description';
post1['pages']=300;

이렇게 계속 속성이 더해져서 post1의 객체에 모든 속성의 이름을 알지 못할때는 인덱스 시그니처 사용

interface Post{
  [key:string]:unknown
  //위에서 키값들은 전부 string인걸 알수있고 값으로 어떤데이터가 올지 몰라서.. unknown사용
  id:number;
  title:string;
}

배열 인덱스 시그니처

interface Names{
  [item:number]:string;
}

const userNames:Names = ['john','kim','joe'];
console.log(userNames);