2022. 9. 14. 18:22ㆍFront-end/JavaScript
TypeScript는 널리 사용되는 오픈 소스 프로그래밍 언어로 JavaScript를 기반으로 하며 정적 타이핑을 언어에 추가한다.
개발자가 보다 유지 관리 및 확장 가능한 코드를 작성할 수 있도록 설계되었으며 최근 몇 년 동안 많은 주목을 받았다. 이 글에서는 JavaScript 프로젝트에서 TypeScript를 사용하려는 이유와 그에 따른 장단점을 살펴보자.
TypeScript 사용의 주요 이점 중 하나는 개발 프로세스 초기에 오류를 발견하는 데 도움이 된다는 것이다.
코드에 정적 타이핑을 추가하면 TypeScript는 코드를 실행하기 전에 타입 관련 오류를 포착할 수 있으므로 나중에 디버깅하는 데 드는 시간과 노력을 절약할 수 있다. 이는 문제가 되기 전에 문제를 식별하고 수정하는 데 도움이 되므로 크고 복잡한 프로젝트에 특히 유용할 수 있다.
TypeScript의 또 다른 장점은 코드의 가독성과 유지 관리성을 향상할 수 있다는 것이다.
보다 명확한 타입 정보를 제공함으로써 TypeScript는 나와 나의 팀이 코드를 이해하고 필요에 따라 변경하는 것을 더 쉽게 만들 수 있다. 이는 코드 베이스를 더 쉽게 탐색하고 확신을 가지고 변경하는 데 도움이 되므로 코드가 많은 프로젝트에서 작업할 때 특히 유용할 수 있다. 그 외에도 TypeScript에는 크고 활발한 개발자 커뮤니티가 있으므로 필요할 때 도움말과 리소스를 쉽게 찾을 수 있다는 장점이 있다.
이러한 이점에도 불구하고 TypeScript 사용에는 몇 가지 잠재적인 단점도 있다.
잠재적인 문제 중 하나는 특히 정적 타입에 익숙하지 않거나 JavaScript와 같은 순전히 동적 타입 언어만 사용해본 경우 배우기가 다소 어려울 수 있다는 것이다. 또한 코드에 대한 타입과 인터페이스를 정의해야 하므로 TypeScript 프로젝트를 설정하고 구성하는 데 더 많은 시간이 소요될 수 있다.
또 다른 잠재적인 단점은 TypeScript가 JavaScript보다 약간 덜 유연할 수 있다는 것이다.
정적으로 타입이 지정된 언어이기 때문에 JavaScript에서 할 수 있는 것처럼 표현력이 풍부하고 유연한 코드를 작성하는 것이 더 어려울 수 있다. 이는 관점에 따라 장단점이 될 수 있지만 JavaScript의 유연성을 중요하게 생각한다면 고려해 볼 가치가 있다.
결론적으로 TypeScript는 유지 관리 및 확장 가능한 코드를 작성하려는 개발자에게 유용한 도구가 될 수 있는 강력하고 인기 있는 프로그래밍 언어다. 몇 가지 잠재적인 단점이 있지만 TypeScript 사용의 이점은 무시하기 어렵다. 코드의 품질과 안정성을 개선하려는 경우 고려해 볼 가치가 있다.
그렇다면 어떻게 타입을 지정하고 에러를 사전에 방지할 수 있을까?
// sum.js
const sum = (a, b) => {
return a + b;
}
// sum.ts
const sum = (a: number, b: number) => {
return a + b;
}
두 코드 모두 두 숫자의 합을 구하는 함수로 하나는 JavaScript, 하나는 TypeScript로 작성했다.
sum(1, 2); // 3
sum 함수를 이용해 숫자 1과 2를 더하면 반환 값으로 3을 얻을 수 있다. 그런데 아래와 같이 문자열을 넣어 함수를 호출하면 어떻게 될까?
sum("1", "2"); // 12
숫자 대신 문자열을 더하기 때문에 3이 아닌 "12"라는 결과가 나온다. TypeScript는 이와 같이 의도하지 않은 코드의 동작을 예방할 수 있다.
// sum.ts
const sum = (a: number, b: number) => {
return a + b;
}
sum("1", "2"); // "1" 형식의 인수는 number 형식의 매개 변수에 할당될 수 없습니다.
TypeScript로 위 코드를 실행시키면 다음과 같이 에러가 발생한다.
TypeScript의 또 다른 장점은 코드를 작성할 때 vscode의 기능을 최대로 활용할 수 있다는 것이다. vscode는 내부가 TypeScript로 작성되어있어 TypeScript를 이용한 개발에 최적화되어 있다고 한다.
'Front-end > JavaScript' 카테고리의 다른 글
[JS] 값(value)에 의한 전달과 참조(reference)에 의한 전달 (0) | 2023.01.03 |
---|---|
[JS] 자바스크립트의 깊은 복사와 얕은 복사 (0) | 2023.01.02 |
FormData 값이 콘솔에서 안보이는 이유와 보는 방법 (0) | 2022.09.07 |
자바스크립트의 ES(ECMAScript)란? - ES5/ES6 (0) | 2022.08.15 |
자바스크립트(JavaScript) 언어의 특성 몇 가지 정리 (0) | 2022.08.11 |