[TypeScript] Typescript Interface

Typescript의 Interface

Interface

인터페이스는 타입을 정의한 규칙을 의미

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

변수와 함수에 활용한 인터페이스

var person: User = {
 age: 30,
 name: 'aa'
}

function getUser(user: User) {
 console.log(user);
}

인덱싱

interface StringArray {
 [index: number]: string;
}

var arr2: StringArray = ['a', 'b', 'c'];
arr[0] = 10 //Error;

딕셔너리 패턴

interface StringRegexDictionary {
 [key: string]: RegExp
}

var obj: StringRegexDictionary = {
 cssFile: /\.css$/,
 jsFile: 'a' //Error
}

obj['cssFile'] = /\.css$/;
obj['jsFile'] = 'a' //Error

인터페이스 확장

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

interface User extends Person{
 language: string;
}

오퍼레이터

- Union 타입

자바스크립트의 OR 연산자와 같은 의미의 타입

Union 타입으로 지정하면 각 타입의 공통된(보장된) 속성에만 접근 가능합니다.

function askSomeone(someone: Developer2 | Person) {
 console.log(someone);
}

- Insersection 타입

자바스크립트의 AND 연산자와 같은 의미의 타입

각각의 모든 타입이 포함된 객체를 넘기지 않으면 에러가 발생합니다.

function askSomeone(someone: Developer & Person) {
 console.log(someone);
}

제네릭

한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다.

function logText <T> (text: T):T {
 return text;
}

logText<string>('aa');
logText<number>(100);

타입추론

타입스크립트가 코드를 해석하는 과정

var a = true;

a = 100; //Error - boolean타입으로 추론했기 때문에 number를 할당하면 에러!

- 가장 적절한 타입(Best Common Type):

배열에 담긴 값들을 추론하여 Union타입으로 묶어 나가는 것

var arr = [1, 2, true];

-인터페이스와 제네릭을 이용한 타입 추론 방식

interface Dropdown<T>{
 value: T,
 text: 'String'
}

var items: Dropdown<boolean> {
 value: true,
 text: 'aa'
}

타입 단언

타입스크립트가 해석하는 것보다 더 확실한 목적을 가지고 개발자가 해당 코드에 타입을 직접 지정하는 것을 의미

var a;
a = 10;
a = 'string';
var b = a as string;

Dom API 조작에서 많이 사용

//타입추론시 HTMLDivElementㅣnull로 반환
var div = document.querySelector('div') as HTMLDivElement;
div.innerText;

타입 호환

특정 타입이 다른 타입에 잘 호환되는지를 의미

-구조적 타이핑

코드 구조 관점에서 타입이 서로 호환되는지를 판단하는 것

구조적으로 더 큰 타입은 작은 타입을 호환할 수 없음

interface Developer {
 name: string;
 age: string;
}
interface Person {
 name: string;
}

var developer: Developer;
var person: Person;

developer = person; //Error
person = developer;

Reference

https://www.samsungsds.com/kr/insights/typescript.html