TypeScript : 런타임 에러를 줄일 수 있다!

정재헌·2023년 2월 13일
0

TypeScript

자바스크립트 코드에 타입 시스템을 도입하여 런타임 에러가 발생할 가능성이 있는 코드를 정적 분석으로 찾아 준다! 다만, Java, C++ 처럼 컴파일을 해줘야 하는 일이 추가되긴 했다. 대신에 런타임에 발생하는 오류를 컴파일 타임에 잡아주기 때문에 더 좋다고 생각한다.

TypeScript에서 지원하는 타입 및 타입 정의

  • 기본 타입 (primitive value)
  • 객체형 (Object)
  • 함수형 (Function)
  • any / unknown / never / generic ...

예시를 통해 타입을 정의하여 사용한 것에 대해서 확인해보자.

const user: {
	name: string,
    age: number
}

const user = {
	name: 'Ts',
    age: 22
}

변수에 객체를 바로 할당하지 않고, interface를 통해 User에 대한 타입을 선언할 수도 있다.

interface User {
	name: string,
    age: number
}

const user: User = {
	name: 'Ts',
    age: 22
}

class로 선언하여 사용할 수도 있다. constructor에 선언된 변수는 클래스의 멤버 변수가 된다. 여기에는 접근 제한자(private, public, protected)로 접근에 대해서 설정할 수도 있다. 접근제한자가 없으면 public 변수로 인지한다. 멤버 변수를 사용하고자 할 때는 this와 함께 사용한다.

class User{
	constructor(
    	name: string,
        age: number
    ){}
}

const user: User = new User('Ts', 22);

또한, 변수가 가질 수 있는 값을 제한하기도 하고, 반드시 있어야 하는 변수와 있어도 되고 없어도 되는 변수에 대해서도 설정해 줄 수 있다. 아래의 예시를 보면 User 타입에는 name은 반드시 있어야 하지만, age는 있어도 되고 없어도 된다.

interface User {
	name: string,
    age?: number
}

const user1: User = {
	name: "user 1",
    age: 22
}

const user2: User = {
	name: "user 2",
}

또한, Java나 C#에서의 제네릭과 유사한 기능을 하는 제네릭 타입도 있는데, 이는 어떠한 타입이든 정의될 수 있으며 호출되는 시점에 타입이 결정된다. 한 번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.

function reverse<T>(items: T[]): T[] {
  return items.reverse();
}

const arg = [{ name: 'Lee' }, { name: 'Kim' }];
// 인수에 의해 타입 매개변수가 결정된다.
const reversed = reverse(arg);
console.log(reversed); // [ { name: 'Kim' }, { name: 'Lee' } ]

[참고]
https://www.typescriptlang.org/docs/handbook/generics.html
https://poiemaweb.com/typescript-generic

profile
백엔드 개발자

0개의 댓글