타입스크립트] 타입 정의 및 인터페이스

타입스크립트는 자바스크립트에서 함수나 변수 값 등에 타입을 정의해주는 것이 가장 큰 포인트라고 볼 수 있다.

아래 코드 예제에서 타입스크립트는 어떤 식으로 변수나 함수에 타입을 정의해주는지 기록하도록 하겠습니다.

<타입을 정의하는 방법>
// 함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number) {
    return a+b;
}
sum(10,20);

// 함수의 반환 값에 타입을 정의하는 방식
function add(): number {
    return 10;
}

// 함수에 타입을 정의하는 방식
function sum2(a: number, b: number ): number {
    return a+b;
}
sum2(10,20,30); // 타입스크립트에서는 인자값 정의하면, 인자값이 많으면 그 많아진 값에 대해서는 오류가 뜸.

// 함수의 옵셔널 파라미터
function log(a: string, b: string, c?: string) {
    console.log(a,b,c);
}
log('hoya','dd','ffsadf');


<타입스크립트  인터페아스>
// 인터페이스를 정의하면 다른 변수에서 해당 인터페이스 사용 시, 인터페이스 폼에 맞추어 작성해야한다.
interface User {
    age: number;
    name: string;
}

// [1]: 변수에 인터페이스 활용
var rhksdud: User = {
    age: 10,
    name: '이관영',
};

// [2]: 함수에 인터페이스 활용
function getUser(user: User){
    console.log(user);

}
const cpat = {
    name: '캡틴',
    age: 100
}
getUser(cpat);

// [3]: 함수 구조를 정의하는 인터페이스
interface SumFunction {
    (a: number, b: number): number; // 뒤에 붙인 :number은 a,b 인자값을 받은 후 반환하는 타입을 말한다.
}

let sum: SumFunction;
sum = function(a: number, b:number ): number {
    return a+b;
}

// [4]: 인덱싱
interface StringArray {
    [index: number]: string;  // index는 배열을 뭐로 접근할지 타입에 대해 정의하는 것. 뒤에 :string은 배열 안에 어떤 타입이 들어갈지 정의하는 것
};

var arr: StringArray = ['a','b','c'];
console.log(arr[0]);

// [5]: 딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp
}
var obj: StringRegexDictionary = {
    cssFile: /\.css$/,
    jsFile: /\.js$/,
    //sth: /abc/,
}
Object.keys(obj).forEach(function (value){

})

// [6]: 인터페이스 확장
interface Person {
    name: string;
    age: number;
}
// extends 를 사용하면 Person의 구조를 가져다 쓰므로 Person과 똑같은 객체 선언할 필요 없음.
interface Developer extends Person{
    language: string;
}

var capt: Developer = {
    language: 'python',
    name: '이관영',
    age: 30
}
console.log(capt)