프론트엔드 개발에서 Typescript 도입하는 이유와 장점

결론부터 말하자면, TS를 도입하는건 개발 효율성과 프로젝트의 품질향상을 위해서다.

개발자가 더 명확하고 정확한 코드를 작성할수 있게 도와주기 때문. 따라서 대규모 프로젝트일수록 타입스크립트 도입은 필수적이다. 

타입스크립트의 기본개념과 특징에 대해 알아보고, 프론트엔드 세계에 도입했을시 장점을 세세하게 살펴보자! 

---

1. 타입스크립트 기본 개념과 특징

- 타입스크립트는 마이크로소프트가 개발한 자바스크립트에 타입 시스템만 추가한 오픈소스 언어이다. 

- 정적 타입 지정: 컴파일 시점에 타입 오류를 잡아낼 수 있어 코드의 안정성을 높여준다. 이는 런타임 오류를 줄이고, 개발자가 더 안정적인 코드를 작성할 수 있게 돕는다. 

 

2. 타입스크립트 도입 시 얻는 장점

- 향상된 코드품질: 정적 타입 검사를 통해 잠재적인 오류를 컴파일 시점에 발견할 수 있다. 

- 변수, 함수의 매개변수, 반환값의 타입을 명시적으로 선언할수있어서 개발자가 코드를 명확히 알아볼수있게 해주며 특히 팀 내에서의 협업을 용이하게 해준다. 

 

3. React 프로젝트에서의 타입스크립트와 자바스크립트 비교 

리액트를 사용한 프로젝트를 예시로, 자바스크립트와 타입스크립트를 사용하는 경우를 비교해보고 차이점을 알아보자. 

JavaScript and React

// UserComponent.js
import React from 'react';

const UserComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default UserComponent;

 

TypeScript and React 

// UserComponent.tsx
import React from 'react';

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

const UserComponent: React.FC<UserProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default UserComponent;

 

주요 차이점과 장점

1. 타입 안정성: TypeScript는 UserProps 라는 인터페이스를 통해 컴포넌트의 props 타입을 명시하여, 잘못된 타입의 props가 전달되는걸 미리 방지할 수 있다. 

2. 명시적인 타입 선언: 다른 개발자가 코드를 이해하기 쉽게해준다. 

3. 백엔드와의 데이터 연동에 유리: 프론트엔드에서 props의 타입 정의가 백엔드에서 데이터를 전달할때 변환값 타입을 명확히 해주어, 전체적인 데이터 흐름을 한눈에 파악하게 만들어준다. 

 

4. 결론

타입스크립트 도입은 초기 학습비용이 들지만, 장기적으로 봤을때 유지보수성과 코드 품질을 크게 향상시키는 선택이다. 

실제로 사용해보니, Java 에서 타입 지정하는것처럼 미리 틀을 다 정해두고 약속된 규칙에 따라라! 라고 말하는것같다. 자유로운 자바스크립트를 엄격하게 제한시키는 거라 생각하면 되겠다.