인터페이스

TypeScript에서 인터페이스를 선언하고 사용할 수 있다.

 

TypeScript 파일에서 인터페이스 선언 예제

interface Pesron1 {
  name: string;
  age: number;
}
// 일반적인 형식
function hello1(person: {name: string; age: number}): void{
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

// 인터페이스를 이용하여 매개변수입력을 진행하도록 설정
function hello2(person: Pesron1): void{
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

const p1: { name: string; age: number} = {
  name: 'Mark',
  age: 33,
};

// 변수에 대입되는 값을 인터페이스 타입으로 선언
const p2: Pesron1 = {
  name: 'Mark',
  age: 33,
};

hello1(p1);
hello2(p2);

 

JavaScript 파일에서 확인하면 인터페이스 선언 부분이 보이지 않는다.

"use strict";
function hello1(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4.");
}
function hello2(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4.");
}
var p1 = {
    name: 'Mark',
    age: 33,
};
var p2 = {
    name: 'Mark',
    age: 33,
};
hello1(p1);
hello2(p2);

 

콘솔창 확인

 

 

인터페이스 변수를 입력받지 않아도 되는 값 지정

TypeScript 파일

interface Pesron2 {
  name: string;
  // 입력받지 않아도 상관 없는 값이면 ?표를 붙여준다.
  age?: number;
}

function hello3(person: Pesron2){
  if(person.age === undefined){
    person.age = 0;
  }
  console.log(`안녕하세요! ${person.name} 입니다. 나이는 ${person.age} 입니다`);
}

hello3({name: "Mark", age: 30});
hello3({name: "Anna"});

 

JavaScript 파일

"use strict";
function hello3(person) {
    if (person.age === undefined) {
        person.age = 0;
    }
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4. \uB098\uC774\uB294 " + person.age + " \uC785\uB2C8\uB2E4");
}
hello3({ name: "Mark", age: 30 });
hello3({ name: "Anna" });

 

콘솔창 확인

 

 

파라미터값을 사용자가 지정하는 방법(어떤값이던지 넣는 방법)

typescript

interface Person3 {
  name: string;
  age?: number;
  [index: string]: any;
}

function hello4(person: Person3): void{
  console.log(`안녕하세요! ${person.name}, ${person.age}, ${person.systers} ${person.father} ${person.mater} 입니다.`);
}

const p31: Person3 = {
  name: 'Mark',
  age: 22,
}

const p32: Person3 = {
  name: 'Anna',
  systers: ["Sung", "Chan"],
}

const p33: Person3 = {
  name: "Bokdaengi",
  father: p31,
  mater: p32,
};

hello4(p31);
hello4(p32);
hello4(p33);

 

javascript

"use strict";
function hello4(person) {
    console.log("\uC548\uB155\uD558\uC138\uC694! " + person.name + ", " + person.age + ", " + person.systers + " " + person.father + " " + person.mater + " \uC785\uB2C8\uB2E4.");
}
var p31 = {
    name: 'Mark',
    age: 22,
};
var p32 = {
    name: 'Anna',
    systers: ["Sung", "Chan"],
};
var p33 = {
    name: "Bokdaengi",
    father: p31,
    mater: p32,
};
hello4(p31);
hello4(p32);
hello4(p33);

 

콘솔