[typescript]type과 interface의 차이점

코드깎는 노인·2021년 8월 10일
0
post-thumbnail

type

type변수,객체,함수에 대한 타입을 정의하는 키워드이다.

interface

interface는 오직 객체의 타입만을 정의하는 키워드이다.

유사성

타입확장

type

type NarutoCharacter={
name:string;
age:number;
ninjaNumber:string;
}

type Itachi = NarutoCharacter & {
skills:string[];
}

const itachi:Itachi = {
name:"Itache",
age:21,
ninjaNumber:"012110",
skills:["Sharingan","Izanami"]
}

interface

interface NarutoCharacter{
name:string;
age:number;
ninjaNumber:string;
}

interface Itachi extends NarutoCharacter & {
skills:string[];
}

const itachi:Itachi = {
name:"Itache",
age:21,
ninjaNumber:"012110",
skills:["Sharingan","Izanami"]
}

함수표현

type addNumber=(numberOne:number,numberTwo:number) => number

interface addNumber{
(numberOne:number,numberTwo:number): number
}

자바스크립트에서 함수도 엄밀히 말하면 객체이기 때문에 interface로 표현가능하다.

클래스 타입

type NarutoCharacter={
name:string;
age:number;
ninjaNumber:number;
}
interface NarutoCharacter{
name:string;
age:number;
ninjaNumber:number;
}

class SpecialCharacter implements NarutoCharacter {
name:string;
age:number;
ninjaNumber:string

constructor(name:string,age:number,ninjaNumber:string){
(this.name=name),(this.age=age),(this.ninjaNumber=ninjaNumber)
}
}

const itachi= new SpecialCharacter("itachi",21,"012110")

Intersection

type Name= {
 name:string
}

type Age= {
 age:number
}

type Person=Name & Age;
interface Name {
 name:string
}

type Age {
 age:number
}

type Person=Name & Age;

Intersection은 여러타입을 하나의 타입으로 병합시켜준다.
재밌는건 2개의 인터페이스로 하나의 타입을 만들 수도 있지만 2개의 타입을 병합하여 하나의 타입으로 생성하지는 못한다.

Unions

type Car = {
 name : string;
}

type Motocycle = {
 name: string;
} 

type vehicles = Car | Motocycle
interface Car = {
 name : string;
}

interface Motocycle = {
 name: string;
} 

type vehicles = Car | Motocycle

Union은 여러 타입을 단일값에 대해 여러가지 타입을 가질 수 있게 해준다.

차이점

type

단일 변수 타입

type Age=number; const myAge:Age =30;

Tuples

type Response=[string,number]

interface Response{
	value=[string,number]
}

튜플타입은 type에서만 가능하지만 interface에서 튜플타입을
사용할 수는 있다.

interface

Declaration merging

interface NarutoCharacter{
name:string;
}

interface NarutoCharacter{
age:number;
}
const itachi:NarutoCharacter = {
name:itachi,
age:21
}

타입스크립트는 같은이름의 interface를 병합하여 하나의 타입선언으로 만든다.type에서는 같은이름의 타입을 선언하면 에러를 발생시킨다

profile
내가 볼려고 만든 블로그

0개의 댓글