230811 TypeScript: Interface

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

user라는 객체를 만들어보자

let user:object;

user = {
	name: 'mimi',
    	age: 28
}

여기서 console.log를 찍으면 아래 이미지처럼 에러가 난다.

TypeScript object에러

object에는 특정속성 값에 대한 정보가 없기 때문이다.
이를 위해 interface를 사용한다. 인터페이스(interface) 객체의 구조를 정의하고, 해당 객체가 가져야 하는 속성과 메서드를 명시적으로 선언하는 방법 중 하나이다. 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다.

1.interface 추가

TypeScript interface

user라는 변수의 타입을 User로 선언하자 name과 age프로퍼티가 없다는 에러가 발생한다.

객체에 interface 프로퍼티 추가

user 객체에 User interface에 들어있는 name과 age를 추가해주자 error가 없어졌다.

이제 console.log를 찍으면 아래이미지 처럼 작은 창에 user객체에 들어가있는 정보들이 나온다.

user object의 property출력

---

2. interface optional

위 내용에선 User로 타입을 선언하게 되면 그 안의 프로퍼티들을 무조건적으로 사용해야 에러가 발생하지 않았다. 그럼 옵셔널을 하려면 어떻게 해야할까

interface optional

add optional property

이런식으로 property에 물음표를 추가해 필수가 아닌 옵셔널로 선언해 줄 수 있다. 때문에 user 객체에 gender가 없고 그 밖에서 gender를 선언해도 에러가 발생하지 않는다.

3. interface read-only

interface에는 read-only라는 키워드를 선언할 수 있는데, 말그대로 읽기전용이라 한 번 값이 할당되면 변경할 수 없도록 제한하는 역할을 한다.

interface read-only선언 전

birthYear라는 프로퍼티에 read-only를 선언하기 전에는 1959에서 1995로 변환을 해도 에러가 일어나지 않는다. 하지만,

read only error

birthYear라는 프로퍼티에 read-only를 선언하자 user객체 안에 적은 1959를 1995로 바꿀 수 없게 된다. 이렇게 최초에 생성할 때만 할당이 가능하고 수정은 불가한것이 read-only이다.

---

4. index signature

TypeScript엔 인덱스 시그니처(index signature) 라고 불리는 것이 있다. 이것은 객체의 속성 이름과 값의 타입을 동적으로 정의하는 데 사용된다.

인덱스 시그니처(index signature)

"grades"라는 이름의 속성이 있고, 해당 속성의 값은 문자열(string) 타입이어야 함을 나타낸다. 하지만 string이라고 하면 소문자든 한글이든 들어갈 수 있기 때문에 Score라는 type 선언해 해당 문자열만 할당이 가능하도록 했다. 여기서 "grades"는 인덱스라고 부르며, 인덱스의 값은 숫자(number)여야 한다.

---

5. 함수선언

interface로 함수 또한 선언 할 수 있다.

interface Add {
    // (인자값):리턴값
    (num1: number, num2: number): number
}

// add라는 함수를 Add interface로 정의를 한 후 값을 넣어주기
const add: Add = function (a, b) {
    return a + b
}

add(10, 15)

나이를 받아 성인인지 아닌지 알려주는 함수를 만들어보자

interface IsAdult {
	(age: number):boolean
}

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

age(33) // true