typescript를 사용해야하는 이유 | 프론트엔드개발

오늘은 javascript에서 typescript로 바꿔야할 이유를 코드를 통해 알아보도록 할게요!

 

Javascript vs Typescript 차이점

1. JavaScript는 동적 타입 언어 / TypeScript는 정적 타입 언어로 대표적인 차이점!

2. 이 두 언어 사이의 주요 차이점은 타입 시스템에 있어요. TypeScript는 개발자가 변수, 함수 매개변수, 반환값 등에 명시적인 타입 정보를 제공할 수 있도록 해줘요. 이는 코드의 가독성을 높이고 오류를 사전에 감지하여 개발자의 실수를 줄일 수 있게 됩니다!

 

이제 JavaScript 코드를 TypeScript로 변환해야하는 몇 가지 예시를 살펴보겠습니다.

 

Typescript로 변환 예시

1. 변수 및 매개변수의 타입 명시

JavaScript에서는 변수를 선언할 때 타입을 명시하지 않아요. TypeScript에서는 변수의 타입을 명시하여 코드를 더 명확하게 만들 수 있답니다.

let age = 25; // javascript

let age: number = 25; // typescript

2. 함수의 매개변수 및 반환값 타입 명시

함수의 매개변수와 반환값에 대한 타입을 명시하면 코드의 의도를 더 잘 전달할 수 있어요!

// javascript
function greet(name) {
    return "Hello, " + name;
}

// typescript
function greet(name: string): string {
    return "Hello, " + name;
}

 

3. 객체와 인터페이스 활용

TypeScript에서는 인터페이스를 사용하여 객체의 구조를 정의할 수 있습니다. 이를 통해 개발자는 어떤 속성과 메서드가 있는지 미리 파악할 수 있습니다.

// javascript
const user = {
    name: "John",
    age: 30
};

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

const user: User = {
    name: "John",
    age: 30
};

4. 타입 에러 사전 방지

TypeScript는 정적 타입 검사를 수행하여 컴파일 단계에서 에러를 감지할 수 있습니다. 이로 인해 런타임에 발생하는 예기치 않은 동작을 방지할 수 있습니다.

// javascript
function add(a, b) {
    return a + b;
}
console.log(add(5, "10")); // "510" (문자열 연결)

//typescript
function add(a: number, b: number): number {
    return a + b;
}
console.log(add(5, "10")); // 컴파일 에러

 

결론적으로!

이처럼 TypeScript를 사용하면 코드의 가독성을 높이고 버그를 사전에 방지할 수 있어요. 하지만 모든 프로젝트에 TypeScript를 도입하는 것이 항상 필요한 것은 아니에요.

프로젝트의 규모와 복잡도, 팀의 선호도 등을 고려하여 적절한 언어를 선택해야 합니다. 그렇지 않다면 규모에 맞지않은 너무나도 어려운 개발 난이도를 갖게 될 수도 있고, 처음 프로젝트에 적용하는 것도 완성도를 떨어뜨리는 안좋은 방향이 될 수도 있어요!

 

그렇지만 typescript를 이용하여 더 견고한 프로젝트를 만들어야할 곳에선 도입하는게 좋다고 생각합니다!