[typescript] interface

interface(반복적인 사용을 원하는 경우)

타입스크립트의 여러 객체를 정의하는 일종의 규칙이며 구조이다

 

1. 객체의 타입정의

interface 인터페이스이름 {
         readonly key:key 타입;
         key?: key타입
}

2. 함수의 타입정의

interface 인터페이스 이름{
          호출 시그니쳐 정의
          (parameter: paremetertype): return type
}

 

3. 클래스의 타입정의

    implements 키워드 사용

실습

//객체는 프로퍼티에 대한 타입을 지정함
//옵셔널 프로퍼티 ?키워드 ---> 프로퍼티가 있어도되고 없어도됨  ?없으면 에러뜸
//읽기 전용 프로퍼티 ====> readonly키워드

//interface IUser {readonly name: string, age:number, isJob?:boolean}
interface IUser {
    readonly name: string, age:number, isJob?:boolean
}
let user1: IUser = {
    name: "green",
    age: 30,
    isJob: true
}

let user2: { readonly name: string, age:number, isJob?:boolean} = {
    name: "blue",
    age: 20,
    isJob: true
}

console.log(user1.name);
//user1.name = "dddd"  //읽기 전용이라 변경 불가능

numType = 30000;
// stringType = 20; 타입이 맞지않아서 오류

optional

?키워드는 사용하는 여러 선택적 개념

타입을 선언할 때 선택적으로 지정할 수 있음

위에 실습 내용에서 isJob를 ?키워드를 사용하여서 

isJob에 받을 인수가 없어도 에러가 안뜸

 

readonly 키워드는 읽기 전용

 

실습

interface Dog {
    readonly name: string,
    age: number
    color?:string
}
let dog1: Dog = {
    name: "구름",
    age: 3
}
let dog2: Dog = {
    name: "몽이",
    age: 2
}


type Score = "A" | "B" | "C" | "D" | "E" | "F" ;
interface Student {
    name: string;
    age: number;
    gender: string;
    [grade: number] : Score   //number 타입의 grade키가 옴
}
// 타입스크립트는  리터럴(값) 타입
//문자열 리터럴 타입 지정

let stu1: Student = {
    name: "창민",
    age: 30,
    gender: "남자",
    1: "A"
}

let stu2: Student = {
    name: "요한",
    age: 22,
    gender: "남자",
    1: "A"
}

//모든 파라미터 readonly
interface ReadUser  {
    name: String,
    age :Number,
    phone : String,
}

let readucer1: Readonly<ReadUser> = {
   name: "그린",
   age: 30,
   phone: "01012341234"
}
/* readucer1.name = "ddd";
readucer1.age = 50;
readucer1.phone = "Aa"; */

interface TV {
   turnOn(): Boolean;
   turnOff(): void;
}

const myTv: TV = {
   turnOn(){
       return true
   },
   turnOff(){
       console.log('off')
   }
}
interface SignUp {
   email: String;
   id: String;
   password: string
}

//클래스타입 인터페이스 !!!!!
//implements키워드
interface IStudent {
    name: string,
    getName(): String
}

class Student2 implements IStudent{
    name: string
    constructor(name:string){
        this.name = name;

    }
    getName(): string{
        return this.name
    }
}

const green = new Student2("green")
console.log(green.getName());

//인터페이스 확장
//인터페이스도 class 처럼 extends 키워드를 활용해 상속 할 수 있음
interface IAnimal {
    name: string;
}
interface ICat extends IAnimal {
    sound() : string;
}

class Cat implements ICat {
    name: string;
    constructor(name: string){
        this.name = name;
    }
    sound(): string {
        return "야옹";
    }
}

//같은 이름의 interface를 여러개 만들 수 있음.
//기존에 만들어진 interface에 내용을 추가할 때 유용함.
interface IName {
    name: string;
    age: number;
}

interface IName {
    color: string;
}
const iname: IName = {
    name: "a",
    age: 12,
    color: "Aa"
}