본문 바로가기

JavaScript/TypeScript

타입스크립트 인터페이스 (구현과 상속)

반응형
let user:object; //객체 생성

user ={
    name : 'xx',
    age : 30
}
//console.log(user.name);
//에러발생 - object에는 특정 속성값에 대한 정보가 없기 때문에
//: 프로퍼티를 사용해 객체를 사용하기 위해서는 인터페이스 사용해야 한다.

interface User{
    name : string;
    age : number;
    gender? : string;
    readonly birthYear? : number;
}
let user2 : User={
    name : 'xx',
    age : 30
}
let user3 : User={
    name : 'xx',
    age : 30,
    gender : 'male'
}
let user4 : User={
    name : 'xx',
    age : 30,
    gender : 'male',
}
//타입 명시, 프로퍼티 반드시 필요
console.log(user2.age);
//존재하는 프로퍼티를 보여줌
user2.age=10;
//user2.gender="male"
//에러발생 
user3.gender="male"
//입력을 해도 되고 안해도 되는 속성은 옵셔널
//user4.birthYear : 1990;
//읽기전용은 최소 선언시 할당한 값을 수정 불가

//학생유저
interface User2{
    name : string;
    age : number;
    gender? : string;
    readonly birthYear? : number;
    1? : string;
    2? : string;
    3? : string;
    4? : string;
}

//문자열 인덱스 서명 추가
interface User3{
    name : string;
    age : number;
    gender? : string;
    readonly birthYear? : number;
    [grade:number] : string;
    //학년은 숫자, 학점은 문자 -> 키는 숫자, 값은 문자
}

let user5 : User3={
    name : 'xx',
    age : 30,
    gender : 'male',
    1 : 'A',
    2 : 'B'
}

//학점은 한 글자 -> 문자열 리터럴 타입 이용
type Score = 'A' | 'B' | 'C' | 'F';
interface User4{
    name : string;
    age : number;
    gender? : string;
    readonly birthYear? : number;
    [grade:number] : Score;
    //학년은 숫자, 학점은 문자 -> 키는 숫자, 값은 문자
}
let user6 : User3={
    name : 'xx',
    age : 30,
    gender : 'male',
    1 : 'A',
    2 : 'B'
}

//인터페이스를 이용한 함수정의
interface Add{
    //(인자) :리턴 타입
    //(num1:number, num2:number) :void
    (num1:number, num2:number) :number;
}

const add :Add = function(x,y){
    return x+y;
}
//인터페이스로 정의한 함수와 형태가 같아야 한다.

add(10,20);
//add('10','20');
//add(10,20, 1);
//형태가 다르면 에러 발생

interface IsAdult{
    (key:number):boolean;
}
const c:IsAdult = (age) => {
    return age > 19;
}
c(33);

//인터페이스를 이용한 클래스 정의 -implements로 구현
interface Car{
    color: string;
    wheels: number;
    start(): void;
}
//구현
class Bmw implements Car{
    color ="red";
    wheels = 4;
    start(){
        console.log('go...');
    }
}

//생성자 이용한 구현
class Benz implements Car{
    color;
    wheels = 4;
    constructor (c:string){
        this.color=c;
    }
    start(){
        console.log('go...');
    }
}
const bmw = new Bmw();
const benz = new Benz('red');

//인터페이스의 확장 : extends로 상속
interface Audi extends Car{
    door: number;
    stop(): void;
    //상속한 속성 외에 추가로 정의
}
class Audi implements Audi{
    color;
    wheels;
    constructor (c:string, w:number){
        this.color=c;
        this.wheels=w;
    }
    stop(){
        console.log('stop...');
    }
}

const audi = new Audi('white', 4);
const audi2 : Audi= {
    color :"red",
    wheels : 4,
    door: 4,
    stop(){
        console.log('stop');
    },
    start(){
        console.log('go...');
    }
}

//다중 상속
interface Toy{
    color : string;
    name: string;
}
interface ToyCar extends Car, Toy{
    price : number;
}
반응형

'JavaScript > TypeScript' 카테고리의 다른 글

타입스크립트 클래스  (0) 2024.02.05
타입스크립트 리터럴, 유니온/교차타입  (0) 2024.02.02
타입스크립트 함수  (0) 2024.02.01
타입스크립트 DOM  (0) 2024.02.01
타입스크립트 기본타입  (0) 2024.01.31