인터페이스는 엔티티가 따라야만하는 문법적인 약속이다. 인터페이스는 모든 엔티티가 준수해야하는 문법을 정의한다.
인터페이스는 인터페이스의 구성물인 속성, 메서드, 이벤트를 정의한다. 인터페이스는 오직 구성물의 선언을 포함한다. 구성물을 정의하는 것은 파생 클래스의 책임이다. 파생 클래스가 따르는 표준 구조를 제공하는 데 종종 도움이 된다.
객체를 살펴보면
var person = { FirstName:"Tom", LastName:"Hanks", sayHi: ()=>{ return "Hi"} };
객체의 시그니처를 보면
{ FirstName:string, LastName:string, sayHi()=>string }
객체들 간에 시그니처를 재사용하기 위해 인터페이스로 정의할 수 있다.
인터페이스 선언
interface 키워드는 인터페이스를 정의하기 위해 쓰인다.
문법
interface interface_name { }
인터페이스와 객체
interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } var customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Hi there"} } console.log("Customer Object ") console.log(customer.firstName) console.log(customer.lastName) console.log(customer.sayHi()) var employee:IPerson = { firstName:"Jim", lastName:"Blakes", sayHi: ():string =>{return "Hello!!!"} } console.log("Employee Object ") console.log(employee.firstName) console.log(employee.lastName)
위 예제를 설명하자면. customer 객체는 IPerson 타입이다. 따라서 인터페이스에 지정된 대로 모든 속성을 정의하기 위해 객체에 바인딩된다.
시그니처를 따르는 다른 객체는 객체가 크기 또는 시그니처로 간주되기 때문에 IPerson으로 간주된다.
var customer = { firstName: "Tom", lastName: "Hanks", sayHi: function () { return "Hi there"; } }; console.log("Customer Object "); console.log(customer.firstName); console.log(customer.lastName); console.log(customer.sayHi()); var employee = { firstName: "Jim", lastName: "Blakes", sayHi: function () { return "Hello!!!"; } }; console.log("Employee Object "); console.log(employee.firstName); console.log(employee.lastName);
출력
Customer object Tom Hanks Hi there Employee object Jim Blakes Hello!!!
인터페이스는 자바스크립트로 변환되지 않는다. 이건 타입스크립트의 일부다. 인터페이스는 런타임 자바스크립트에 영향을 주지 않는다.
union 타입과 인터페이스
interface RunOptions { program:string; commandline:string[]|string|(()=>string); } //commandline as string var options:RunOptions = {program:"test1",commandline:"Hello"}; console.log(options.commandline) //commandline as a string array options = {program:"test1",commandline:["Hello","World"]}; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline as a function expression options = {program:"test1",commandline:()=>{return "**Hello World**";}}; var fn:any = options.commandline; console.log(fn());
//commandline as string var options = { program: "test1", commandline: "Hello" }; console.log(options.commandline); //commandline as a string array options = { program: "test1", commandline: ["Hello", "World"] }; console.log(options.commandline[0]); console.log(options.commandline[1]); //commandline as a function expression options = { program: "test1", commandline: function () { return "**Hello World**"; } }; var fn = options.commandline; console.log(fn());
출력
Hello Hello World **Hello World**
인터페이스와 배열
인터페이스는 배열이 사용하는 키 종류와 그 배열에 들어있는 엔티티의 타입을 모두 정의할 수 있다. 인덱스는 문자열 또는 숫자 타입이 될 수 있다.
interface namelist { [index:number]:string } var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string interface ages { [index:string]:number } var agelist:ages; agelist["John"] = 15 // Ok agelist[2] = "nine" // Error
인터페이스와 상속
인터페이스는 다른 인터페이스에 의해 확장될 수 있다. 인터페이스는 다른 인터페이스로부터 상속할 수 있다. 타입스크립트는 인터페이스가 다른 여러 인터페이스들로부터 상속되는 걸 허용한다.
인터페이스 간에 상속을 구현하기 위해 extends 키워드를 쓴다.
단일 인터페이스 상속
Child_interface_name extends super_interface_name
다중 인터페이스 상속
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
interface Person { age:number } interface Musician extends Person { instrument:string } var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = "Drums" console.log("Age: "+drummer.age) console.log("Instrument: "+drummer.instrument)
var drummer = {}; drummer.age = 27; drummer.instrument = "Drums"; console.log("Age: " + drummer.age); console.log("Instrument: " + drummer.instrument);
출력
Age: 27 Instrument: Drums
interface IParent1 { v1:number } interface IParent2 { v2:number } interface Child extends IParent1, IParent2 { } var Iobj:Child = { v1:12, v2:23} console.log("value 1: "+this.v1+" value 2: "+this.v2)
Child 인터페이스는 IParent1과 IParent2를 상속받는다. 각 인터페이스에는 v1, v2에 대한 설정이 있다. Iobj 객체는 Child 인터페이스를 따른다.
var Iobj = { v1: 12, v2: 23 }; console.log("value 1: " + this.v1 + " value 2: " + this.v2);
출력
value 1: 12 value 2: 23
https://www.tutorialspoint.com/typescript/typescript_interfaces.htm
'JS > TypeScript' 카테고리의 다른 글
타입스크립트 튜토리얼 object (0) | 2018.12.25 |
---|---|
타입스크립트 튜토리얼 class (0) | 2018.12.24 |
타입스크립트 union (0) | 2018.12.24 |
타입스크립트 튜토리얼 tuple (0) | 2018.12.23 |
타입스크립트 튜토리얼 array (0) | 2018.12.22 |