Typescirpt interface 정리

* 타입명시 

선언시 :      변수명 : 타입

사용시 :     :타입

 

* 타입스크립트 객체는  interface 생성가능, 꺼내쓰는 느낌으로 객체보다 먼저 선언 후

interface User { name : string ; age : number; } 
let user :User  { name : " kim " ; age : 17 }

이런식으로 사용 user 객체에 name만 있다거나 해서 짝이 맞지않을 경우 전부 다 오류.

+ ex) user 에 새로운 값 추가도 오류를 발생.

 

* 옵셔널 선택자 :  ?

입력을 해도되고 안해도되고 속성

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

이런식으로 gender는 선택적 속성으로 있어도되고 없어 도 된다.

 

* 읽기전용 프로퍼티 readonly

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

let user : User{name : " kim" ; age :19,  birthYear : 1999;}

user.birthYear = 2000;

   birthYear는 읽기전용이기 때문에 수정불가능

 

* 문자열인덱스 서명?

1?: a;2?:b;3?:c;4?:d.   =>  [grande:number] : Score; 의 뜻 number를 키로 하고 string 타입의 밸류를 갖게 할수 있음.
문자열리터럴타입? 팔레트같은거 type Score = "a" |  "b" |  "c" |  "d"  설정하면 number가 a,b,c,d 이외의 value를 갖을수 없음/

* 인터페이스 함수정의

 (num1:number, num2:number): number;  초록색 넘버는반환값의 타입 , 보라색은 받는 인자들의 타입.

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

아래처럼 사용가능.

const add : Add= function(x,y){return x+y};

 

당연히 에러나는 경우)  add(10,20,30); 또는 add(10,"20");

add(10,20,30); 
add(10,"20");

 

* 인터페이스로 클래스 정의

implements

inerface Car{
     color : string;
     wheels : number;
     start() : void;
}

class Bmw implements Car{ //클래스 선언하기
	color;
    constructor(c:string){ //생성될 당시에 색상 입력값으로 줘야함.
		this.color = c;
	}
    wheels : 4;
    start() : {c
    	console.log('go");
     }
}

//인스턴스 만들기
const my = new Bmv("green")

* 인터페이스의 확장 extends (여러개 가능)

intereface Benz extends Car{ //파레트
	//기존 Car가 가지고 있던 속성을 받아옴, 함수사용할땐 전부기입해야함
    door: number;
    stop : void; 
}

const benz : Benz ={ //실제사용
    color;
    wheels :4;
    start(){
    	console.log("go...");
    }
    door : 4;
    stop(){
    	console.log("stop");
    }
}

//여러개의 확장
interface Car{
	color : string;
    wheels : number;
    start() : void;
}
interface Toy{
	name : string;
}

//아래와 같이 두가지를 한번에 확장가능
interface ToyCar extends Car, Toy{
	price: number;
}