타입스크립트 #2 인터페이스

12881 단어 typescripttypescript
let a:object;

a = {b:1, c:2};

console.log(a.b)//error

'object에는 "b"라는 속성이 없습니다.'라면서 오류가 뜹니다.
이처럼 타입스크립트에서 객체에 타입을 지정할때에는 인터페이스를 사용합니다.


객체 사용 인터페이스

interface A {
	a : string;
  	b : number;
}

let a : A = {b:1, c:2};

console.log(a.b)//1

a.b = 3//문제없음
a.d = 4//error 인터페이스땜에 막힘ㅋ

앞으로 A인터페이스를 타입으로 지정한 변수는 A안에 있는 속성들만 사용할 수 있습니다.
그리고 인터페이스 안에있는 속성들을 전부 작성해야 에러가 발생안합니다.

interface A {
	a : string;
  	b : number;
  	y? : string;
  	readonly h : number;
  	[k:number] : string;
}

let a : A = {b:1, c:2, h:6};// y를 작성 안해도 오류안남

a.h = 77//error readonly라서 안됨
  • 만약 인터페이스 속성에 '?'를 작성하면 있어도 되고 없어도 되는 옵션프로퍼티가 됩니다.
  • readonly은 읽을 수는 있지만 변경은 안됩니다.
interface A {
  	[k:number] : string;
}

let a : A = {1: "1", 2: "2"};

///////////////////
type TT = "A" | "B" | "C"

interface B {
  	[k:number] : TT;
}

let b : B = {1: "A", 2: "B"};//TT안에있는 값들만 사용 가능
  • 만약 인터페이스에서 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 [변수:타입] : 타입을 사용합니다..
  • 타입스크립트에서 타입을 따로 만들고 싶을땐 "type"이라는 속성을 사용합니다. 타입을 사용하면 본인만의 타입을 사용할 수 있습니다.

함수 사용 인터페이스

interface Add {
  	(num1:number, num2:number):number;
  //숫자를 타입으로한 2개의 파라미터와 반환값으로 숫자를 반환하는 함수를 정의
}

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

인터페이스에서 함수도 지정할 수 있습니다.


클래스 사용 인터페이스

클래스에도 인터페이스를 사용할 수 있습니다. 이때에는 implements라는 키워드를 사용합니다.

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

class Bmw implements Car {
	color;
  	wheels = 4;
  
    //타입스크립트 클래스에서는 멤버변수의 타입을 미리 지정해야합니다!(하지만 이 클래스에서는 인터페이    스로 미리 지정해서 할 필요가 없습니다.)
  	constructor(c:string){
    	this.color = c;
    }
  
  	start(){
    	console.log("GO!")
    }
}

인터페이스의 확장

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

interface Bike {
  	a : number
}

interface Sport extends Car {
  	speed = 100;
}

interface Sport2 extends Car, Bike {
  	speed = 120;
}

인터페이스도 클래스 처럼 확장할 수 있습니다. 한번에 여러개도 확장이 가능합니다.

좋은 웹페이지 즐겨찾기