본문 바로가기
개발/TypeScript

[TypeScript] 타입스크립트 인터페이스 :: 마이자몽

by 마이자몽 🌻♚ 2018. 9. 23.

이번글에서는 TypeScript인터페이스에 대해 배워본다.

Java개발을 해봤다면, code만 보고도 바로 이해를 할 수 있을것이다.

조금 다른것은, 인터페이스의 용도인데... 주로 타입검증을 위해 사용된다.


1.Basic use

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const printLabel1 = (labelledObj: {label: string}) => {
    console.log(labelledObj.label);
}
let myObj1 = {size: 10, label: "Size 10 Object"};
printLabel1(myObj1);  //Size 10 Object
 
 
interface LabeledValue1 {
    label: string;
}
const printLabel2 = (labelledObj: LabeledValue1) => {
    console.log(labelledObj.label);
}
printLabel2(myObj1);    //Size 10 Object
cs


기본 사용은 위와 같이 사용해준다.




2.Optional Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface SquareConfig {
    color?: string;
    width?: number;
}
 
const createSquare = (config: SquareConfig): {color: string; area: number} => {
    let newSquare = {color: "white"area100};
    if(config.color){
        newSquare.color = config.color;
    }
    if(config.width){
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}
let mySquare = createSquare({color: "black"});
console.log(mySquare);  //{color: 'black', area: 100}
cs


'?'를 존재여부를 확인해서 사용이 가능하다.

TypeScript Documentation에서는 Optional Properties사용을 권장하느다는 내용이 있다.

이유는 오타를 방지할 수 있기 때문?? JavaScript와 달리 TypeScript는 자동완성기능과 Syntax error를 잡아주는 기능들이 있어서

오타에대한 방지를 Optional Properties를 사용하여 방지하라고 한다.




3.ReadOnly Properties

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface Point {
    readonly x: number;
    readonly y: number;
}
 
let point1: Point = {x: 10, y:20};
//error //point1.x = 5;
 
let a: number[] = [1,2,3,4];
let ro: ReadonlyArray<number> = a;
/* errors
ro[0] =12;
ro.push(5);
ro.length = 100;
a = ro;
*/
 
//type assertionㅇ으로 override는 가능
= ro as number[];
a[0= 12;
cs


ReadOnly Properties를 사용해서 수정을 불가능하게 만들수 있다.

단, type assertion을 사용해서 override는 가능하다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Excess Property Checks
console.log({colour: "red", width:100} as SquareConfig);    //{colour: 'red', width: 100}
//error colour not expected in type SquareConfig //let mySquare2 = createSqaure({colour: "red", width: 100});
 
//type assertion으로 허용 가능
let mySquare2 = createSquare({colour: "red", width: 100} as SquareConfig);
console.log(mySquare2);     //{color: 'white, area: 10000}
 
interface SquareConfig{
    color?: string;
    width?: number;
    [propName: string]: any;
}
let mySquare3 = createSquare({colour: "red", width: 100});
console.log(mySquare3);     //{color: 'white, area: 10000}
 
cs


type assertion으로 다른 인자값을 받아줄수 있다.

다른 방법으로는 any타입의 배열을 interface에 추가해줘서 허용을하는 것이다.




4.readonly vs const

1
2
3
4
5
6
7
//변수선언
const carName: string = "스포츠카";
 
//properties
interface CarNames {
    readonly names: string;
}
cs


readonly의 특징을 살펴보면, const와 유사한다는 것을 느꼈을것이다.

그렇다면 이두가지의 차이점은? 사용용도에 따라 달라진다.

readonly는 properites에 사용되고, const는 변수선언할때 사용한다.




5.Function Types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
interface searchFunc {
    (source: string, subString: string) : boolean;
}
 
let mySearch1: searchFunc;
mySearch1 = (source: string, substring: string): boolean => {
    let result = source.search(substring);
    return result > -1;
}
console.log(mySearch1("안녕하세요 자몽입니다","자몽")); //true
 

let mySearch2: searchFunc;
mySearch2 = (src, sub) => {
    let result = src.search(sub);
    return result > -1;
}
console.log(mySearch2("안녕하세요 자몽입니다","자몽")); //true
cs


함수형태로 사용이 가능하다.

mySearch2같은 경우는 이미 Parameter들과 return type이 인터페이스에서 정해져 있기에, 타입선언없이 사용이 가능하다.




6.Indexable Type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
interface StringArray {
    //number type으로 접근하게되면 string타입으로 돌려준다.
    [index: number]: string;    //when a StringArray is indexed with a number, it will return a string
    //[index: string]: string; 이렇게하면 아래 에러남. myArray의 배열의 index는 number이기때문이다.
}
 
let myArray1: StringArray;
myArray1 = ["Bob""Fred",'1'];
let myStr1: string = myArray1[0];
console.log(myStr1);    //Bob
 
interface NumberDictionary {
    [index: string]: number;
    length: number;
    //error because its a string //name: string;
}
 
//indexable Type은 타입확인용으로 사용된다.
interface IndexObject {
    [index: string]: string | number | boolean//index가 string이면 value값이 string 이거나 number 이거나 boolean 타입이다.
    name: string;
    age: number;
    isMale: true;
}
  
cs


글의 시작에 TypeScript에서의 인터페이스는 타입검사를위해 사용된다고 했었는데, 필자의 생각으로는 indexable Type에서 그 특징이 나타난다.

StringArray 인터페이스를 보면, 인덱스 시그니처를 사용한다.

해석하면, index가 number이면 string으로 반환한다는 뜻이다.

index가 number인 것은 배열을 예시로 들수 있다.


NumberDictionary 인터페이스는 인덱스 시그니처가 [index: string]: number로 되어있다.

string 타입으로 접근하여 number타입으로 반환을한다.

그래서, 인터페이스 내에 string타입을 선언하게되면 인덱스 시그니처와 타입이 안맞아 error가 뜬다.


여러 타입들을 선언하기위해 '|'를 사용해서 인덱스 시그니처를 작성한다.

IndexObject 인터페이스에서처럼 string, number, boolean타입을 반환할수 있도록 설정해준다.




7.Class Type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
interface Fruits {
    name: string;
    price: number;
}
 
interface FruitsConstructor {
    new (name: string, price: number): Fruits;
}
 
class Jamong implements Fruits{
    name: string;
    price: number;
 
    constructor(name: string, price: number){
        this.name = name;
        this.price = price;
    }
}
 
class Mango implements Fruits{
    name: string;
    price: number;
 
    constructor(name: string, price: number){
        this.name = name;
        this.price = price;
    }
}
 
const createFruits = (fruit: FruitsConstructor, name: string, price: number): Fruits => {
    return new fruit(name, price);
}
let jamong2 = createFruits(Jamong,'자몽',3000);
let mango = createFruits(Mango,"망고",2900);
console.log(jamong2);   //Jamong { name: '자몽', price: 3000 }
console.log(mango);     //Mango { name: '망고', price: 2900 }
cs


Class에 대해서는 아직 글을 작성하지 않았지만, Java개발을 해봤다면 코드를보고 쉽게 이해할 수 있을것이다.




7.Extending Interfaces

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface Shape {
    color: string;
}
 
interface PenStroke {
    penWidth: number;
}
 
interface Square extends Shape, PenStroke{
    sideLength: number;
}
 
let square = <Square>{};
square.color = "blue";
square.penWidth = 5.0;
square.sideLength = 10;
cs


다른 인터페이스를 상속받아서 유연하게 코드를 작성할 수 있다.


필자는 TypeScript 공식 홈페이지를 참조하여 글을 작성했다.

자세한 내용을 확인하고 싶으면 아래 링크를 참조한다.

https://www.typescriptlang.org/index.html

태그

댓글0