[Typescript] TypeScript 문법

Jiwon Yoo·2023년 5월 31일

프론트엔드

목록 보기

27/38

인터페이스 (interface)

TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. JavaScript는 인터페이스를 따로 지원하지 않지만, TypeScript는 인터페이스를 지원한다. TypeScript의 예약어인 interface를 사용하여 TypeScript 인터페이스를 생성할 수 있다.

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

// 정상적으로 선언
const user: User = {
	name: "anna",
	age: 20
}

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러
const user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

위의 코드는 사용자 정보를 정의하기 위해 interface 예약어를 사용하여 User 인터페이스를 만들었다. 인터페이스를 만들 때 예약어를 작성하고, 인터페이스의 이름을 대문자로 작성하는 것이 네이밍 컨벤션이다.

인터페이스 내에는 name과 age가 정의되어 있기 때문에, User 인터페이스를 사용하여 변수를 선언할 때는 반드시 정의된 프로퍼티를 전부 작성해야 한다. 또한 interface로 정의된 속성만 지정할 수 있으며, 그 외 프로퍼티를 추가로 작성하고자 해도 인터페이스 내에 정의되어 있지 않기 때문에 추가로 프로퍼티를 더 작성하여 선언할 수 없다.

그러나 인터페이스 안의 모든 프로퍼티가 필요한 것은 아니며, 어떤 조건에서만 존재하거나 아예 없을 수도 있기 때문에 ? 연산자를 사용하여 선택적 프로퍼티를 작성할 수도 있다.

extends를 통한 상속

인터페이스는 extends라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다. 이렇게 하면 기존에 존재하던 인터페이스의 프로퍼티를 다른 인터페이스에 복사하는 것을 가능하게 해 주며, 인터페이스의 재사용성을 높여준다.

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

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

여러 인터페이스를 상속받아 확장할 수도 있습니다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount {
	   isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

타입 별칭 (Type Aliases)

타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것이다. 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미한다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성한다.

type MyString = string;

let str1: string = 'hello!';

// string 타입처럼 사용할 수 있습니다.
let str2: MyString = 'hello world!';

타입 별칭을 사용하면 코드를 더 간결하고 가독성 좋게 만들 수 있다. 또한 복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용하는 등 가독성을 높일 수 있다.

인터페이스 vs 타입 별칭

타입 별칭 또한 인터페이스와 같은 특징이 있기 때문에, 인터페이스의 역할을 타입 별칭이 수행할 수도 있다. 그러나 인터페이스와 타입 별칭에는 미묘한 차이점이 있다.

VSCode로 작성 시, type으로 작성한 객체에 마우스를 올리면 내부에 어떤 프로퍼티들이 정의되어 있는지 보이지만, interface 객체에 마우스를 올리면 내부에 어떤 프로퍼티들이 정의되어 있는지 보이지 않는다.
타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는 것에서 그치기 때문에 확장이 되지 않지만 인터페이스는 확장이 가능하다. 인터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입 둘 다 상속할 수 있기 때문에, 유연한 코드 작성을 위해서는 인터페이스로 만들어서 필요할 때마다 확장할 수 있다.

타입 추론 (Type Inference)

타입 추론(Type Inference)은 변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능이다.

장점

코드의 가독성 향상: 명시적으로 타입을 지정하지 않아도 코드에서 변수의 타입을 알 수 있기 때문에 코드의 가독성이 향상

개발 생산성 향상: 명시적으로 타입을 지정하지 않아도 TypeScript가 자동으로 타입을 추론하기 때문에 타입 추론을 사용하면 코드 작성 시간을 단축 가능

오류 발견 용이성: 타입 추론을 사용하면 코드의 오류를 발견하는 것이 쉬워짐