TypeScript: Type & Interface

양성진·2022년 10월 25일
0

TypeScript

목록 보기
6/9

Type Alias

타입에 이름을 부여하는것이다.
이것은 새로운 타입을 만드는 것은 아님

TypeAlias 사용되는 경우

    1. 타입에 이름 즉 의미를 부여하는 가독성 향상
    1. 객체 타입, 유니언 타입 등에 활용
    1. 반복되는 코드를 간결하게 표현

이렇게 지정해놓고 여러곳에서도 사용할수 있다는 장점이 있어서 좋다.

type MyString = string;

type MyType = string | number;

type Person = {
    name:string;
    age:number;
} 

타입들의 지정을 해놓고 그 모임들의 이름을 지정해준다고 보면 된다.

type Music ={
    lyrics: string;
    duration :number;
    artists:Person[];
}

interface

함수나 객체 클래스의 스펙에 대한 정의하는것이다. 어떤 속성을 가지고 있어야 하는지에 대한 정의를 한다.

인터페이스는 새롭게 만들어서 정의하는것이다.

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


위에 지정된 프로퍼티의 스펙이 맞다면 

function logMan(mans:man){
    console.log(mans.name, mans.age,mans.height) // Yang,31,180
}

뒤에 뭐가 붙어도 상관없다.


let mans = {
    name:"yang",
    age:31,
    height:180,
}

logMan(mans)

선택적 프로퍼티

객체 타입에서의 선택적 프로퍼티와 유사 프로퍼티가 있어도 되고 없어도 될때,

interface woman {
    name:string;
    age?:number;
}

function logWoman(womans:woman){
    console.log(womans.name, womans.age) // jang undefined
}

let womans = {
    name:"jang",
}

logWoman(womans)

읽기 전용 프로퍼티 (readOnly)

객체가 처음 생성될때만 수정 가능한 프로퍼티 처음 생성이후 재할당 불가


interface Pet {
    name:string;
    readonly age:number;
}

function logPet(pets:Pet){
    console.log(pets.name, pets.age)
}

let pets:Pet = {
    name:"Sa",
    age:10
}
pets.age = 30 // 값을 절대 다시 재할당할수 없음

// logPet(pets)

동적인 할당 프로퍼티

interface LiverpoolPlayerProps{
    name:string;
    age:number;
    [key:string]:string|number;
}

function showPlayer(player:LiverpoolPlayerProps){
    console.log(player.name,player.age,player.position) // mo salah, 30, fw
}

let player ={
    name:"mo salah",
    age:"30",
}

showPlayer({
    name:"mo salah",
    age:30,
    position:"fw"
})

인터페이스 확장(extends)


// 다른 인터페이스를 참조해서 확장을 할수 있다.
// 재사용을 가능하게 쪼개고 조합해서 유연하게 사용가능하다.

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

interface Developer extends Person1{
    field: string;
}
interface Design extends Person1{
    lever: "junior"|"senior";
}

Type 과 인터페이스의 차이점

Type: 부를 이름을 정의! / 확장 불가능
인터페이스: 새로운 인터페이스를 정의 / 확장 가능

profile
프론트엔드 개발자를 꿈꾸는 돼지

0개의 댓글