TypeScript (3)

인터페이스를 // 사용법과 사용이유

인터페이스를 알기 전에 user라는 간단한 객체를 만들어보자

let user:object;

user = {
	name: 'Joonyoung',
    age: 26
}

console.log(user.name);

Property 'name' does not exist on type 'object'.라는 에러가 발생하는데,
객체에 특성 속성 값에 대한 정보가 없기 때문이다.
따라서 프로퍼티를 정의해서 객체를 표현하고자 할때는 인터페이스를 사용해야 한다.

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

let user:User = {
	name: 'Joonyoung',
    age: 26
}

인터페이스 // 옵셔널 처리

인터페이스에서 명시하지 않거나, 명시했는데 user객체에서 프로퍼티를 정의하지 않으면 에러가 날 것이다.

인터페이스에서 명시x의 경우

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

let user:User = {
	name: 'Joonyoung',
    age: 26
    gender: "male" // 에러!!
}

객체에서 프로퍼티 정의x의 경우

interface User {
	name: string;
  	age: number;
  gender: string
}

let user:User = { // user 객체에 에러!!
	name: 'Joonyoung',
    age: 26
}

인터페이스에서 옵셔널 처리

🤔 그렇다면 중간에 프로퍼티를 추가해 주고 싶을 때는 어떻게 해야할까??
옵셔널로 처리를 해주면 된다. (입력을 해거나 안해도 될 수 있게)

interface User {
	name: string;
  	age: number;
 	gender?: string
}

뒤에 ?를 붙여주면 끝이다.
이제 gender는 있어도 없어도 상관이 없는 옵션이 된 것이다.

interface User {
	name: string;
  	age: number;
    gender?: string
}

let user:User = { 
	name: 'Joonyoung',
    age: 26,
}

user.gender = 'male' // 에러였던 것이 이제는 쌉가능

인터페이스 // readonly처리 (접근은 ok, 수정은 no)

제목 그대로 접근은 가능하지만 수정이 불가능하게 해주는 것이다.
인터페이스에서 birthY에 readonly처리를 해보자

interface User {
	name: string;
  	age: number;
 	gender?: string
	readonly birthY: number;
}

let user:User = { 
	name: 'Joonyoung',
    age: 26,
  	birthY: 1997,
}

readonly처리를 했다면 다음과 같은 경우에서는 에러가 날 것이다.

user.birthY = 2022; // readonly처리에 의한 에러!!

읽기 전용 속성이기 때문에 수정할 수 없어졌기 떄문이다.

• 🙋🏻‍♂️ 최초 생성할 때만 할당이 가능하다!

인터페이스 // 문자열 인덱스 설명 추가하기

grade는 학년을 나타내고 성적이 어떤지를 A,B,C와 같이 등급을 받는다. 📍ex) 1: 'A'
하지만 그런식이면 1,2,3,4,5...처럼 학년별로 전부 인터페이스에 명시하는 것은 노가다에 불과하다.
그럴떤 number를 받는 학년에 설명을 추가해주면 해결되는 문제이다!

interface User {
	name: string;
  	age: number;
 	gender?: string
	readonly birthY: number;
    [grade:number] : string;
}

let user:User = { 
	name: 'Joonyoung',
    age: 26,
  	birthY: 1997,
    1: 'A',
  	2: 'B', // 에러 발생 없이 정보를 이렇게 추가할 수 가 있다!!
}

grade라는 단어가 의미가 있는것은 아니다. 어떤걸 뜻하는지만 알려줄 뿐이다.
number를 키로하고 string을 값으로 받는 프로퍼티를 여러개 받을 수 있다는 의미이다.

인터페이스 // 문자열 리터럴 타입으로 입력 범위 좁히기

🤔 하지만 성적을 나타내기에는 string으로는 범위가 너무 넓다. 이럴 때 사용할 수 있는게 바로 문자열 리터럴 타입이다.

Score라는 새로운 타입을 선언하고, string으로 입력할 수 있는 값의 범위를 좁혀주자!

type Score = 'A' || 'B' || 'C' || 'F';

interface User {
	name: string;
  	age: number;
 	gender?: string
	readonly birthY: number;
    [grade:number] : Score;
}

이렇게 해주면 string으로 아무리 이것저것 입력을 해도 에러를 뱉어낸다.
따라서 Score에서 정의한 값 외에는 입력 할 수가 없다. (소문자도 에러를 뱉어냄!!)

인터페이스 // 함수를 정의하기

인터페이스는 함수도 정의 할 수가 있는데, 내부에 괄호를 만들고 인자값과 리턴값을 적어주면 된다.

interface Add {
	(num1: number, num2: number): number; 
}

const add: Add = function(a, b){
	return a + b;
}

add(1, 2); // return => 3

🙋🏻‍♂️ 앞서 배워서 알겠지만, 리턴값이 없으면 끝에 : number가 아닌 : void이다!!

• 인터페이스에서는 num1, num2로 정의했지만 함수에서 a, b를 사용해도 전혀 상관이 없다!!

인터페이스 // 클래스(class)를 정의하기

class가 뭔지 모르겠다면 여기로..

인터페이스는 클래스도 정의 할 수가 있다. implements라는 키워드를 사용한다.

Car라는 인터페이스를 정해서 Bmw라는 클래스를 만들어 보려고 한다.

interface = Car {
	color: string;
  	wheel: number;
  	start(): void;
}

class Bmw implements Car {
	color = "red";
  	wheels = 4;
  	start(){
    	console.log("move");
    }
}

construct를 사용히면 이렇게 바뀐다.

class Bmw implements Car {
  	wheels = 4;
  constructor(c:string){
  	this.color = c;
  }
  	start(){
    	console.log("move");
    }
}

const b = new Bmw('red');
console.log(b)
/*
Bmw: {
	"wheels": 4,
    "color": "red"
}
*/
b.start(); // "move"