Post

타입스크립트 - 타입스크립트 - 함수/인덱스시그니처

호출 시그니처 생성

객체 인덱스 시그니처 함수를 다시 사용하기 위해 별도로 타입을 관리할 때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
interface Post {
  id: number;
  title: string;
  getLikeNumber: (like: number) => number;
}

const post1: Post = {
  id: 1,
  title: "post1",
  getLikeNumber(like: number) {
    return like;
  }
};

getLikeNumber를 별도의 타입으로 지정해서 사용하기

1
2
3
interface 타입명 {
     (매개변수: 매개변수 타입): return-type
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface GetLikeNumber {
  (like: number): number;
}
interface Post {
  id: number;
  title: string;
  getLikeNumber: GetLikeNumber;
}

const post1: Post = {
  id: 1,
  title: "post1",
  getLikeNumber(like: number) {
    return like;
  }
};

처음에 선언한 타입 이외의 속성들을 넣을 때 확실하게 타입을 작성할 수 있는 부분은 타입을 선언하고,
그 외의 것들은 시그니처를 사용하여 타입을 지정

post2의 타입에는 description이 없기 때문에 타입 오류가 발생함!

1
2
3
4
5
6
7
8
9
10
interface Post2 {
  id: 1;
  title: "post1";
}
const post2: Post2 = {
  id: 1,
  title: "post1"
};

post2["description"] = "description 1";

객체 시그니처를 사용하여 다른 속성들도 타입 지정하기
[key: key_타입]: 값의_타입

1
2
3
4
5
6
7
8
9
10
11
12
interface Post2 {
  [key: string]: unknown;
  id: 1;
  title: "post1";
}

const post2: Post2 = {
  id: 1,
  title: "post1"
};

post2["description"] = "description 1";

배열에서의 시그니처

1
2
3
4
interface Names {
  [item: number]: string;
}
const userNames: Names = ["Kim", "Lee", "Joe"];

여기서의 item은 array의 index 값

This post is licensed under CC BY 4.0 by the author.