놀랍도록 짧은 개발 기간을 거쳐 1995년에 처음 출시된 자바스크립트는 이후 많은 사이트와 앱에서 필수적인 요소로 자리 잡았습니다. 오늘날 자바스크립트는 클라이언트 및 서버 측 애플리케이션에서 모두 사용되고 있습니다. 수년에 걸쳐 많은 변화가 있었음에도 불구하고 개발자들은 여전히 많은 기능을 요청하고 있습니다.
TypeScript는 오랫동안 기다려온 많은 기능으로 JavaScript를 확장하는 스크립팅 언어입니다. 유형 주석, 사용자 지정 타이핑 및 인터페이스는 모두 주요 구성 요소이며 생산성을 향상시키는 더 나은 도구도 있습니다.
왜 전환해야 할까요?
주요 프로젝트에서 언어를 전환하는 것은 스트레스가 될 수 있습니다. 다행히도 프로젝트를 자바스크립트에서 타입스크립트로 포팅하는 과정은 매우 간단합니다.
JavaScript는 지난 몇 년 동안 주요 프로그래밍 언어로 각광받았습니다. 원래 웹 사이트의 프런트엔드 스크립팅에만 사용되던 자바스크립트는 Node.js의 출시로 서버 측에서도 사용할 수 있게 되면서 그 인기가 더욱 높아졌습니다.
자바스크립트는 최근 훨씬 더 대중화되었지만 최신 구현인 ES6에는 여전히 부족한 기능이 많이 있습니다. 많은 개발자에게 이러한 기능 부족은 자바스크립트의 언어로서의 유용성을 제한합니다.
TypeScript는 JavaScript를 추가 기능으로 래핑한 다음 사용자 코드를 트랜스파일링하여 이러한 문제를 해결하는 것을 목표로 합니다. 그 결과 자바스크립트의 편리함과 유용성을 갖춘 타입 안전 언어가 탄생했습니다.
이미 TypeScript를 완벽하게 지원하는 여러 도구와 프레임워크가 나와 있습니다. Angular는 오랫동안 사용해 왔으며, 심지어 React에도 TypeScript를 구현하는 방법이 있습니다.
타입스크립트는 자바스크립트와 비슷하다
타입스크립트는 개발자가 자바스크립트에서 자주 요청하는 많은 기능을 구현합니다. 타입스크립트는 타입 검사, 안전성, 암시적 타이핑과 같은 기능을 포함하여 구현하는 전체 타입 시스템의 이름을 따서 명명되었습니다. 타입스크립트를 사용하면 사용자 정의 네임스페이스를 정의하고 사용할 수도 있습니다.
TypeScript에는 인터페이스, 열거형 및 유형 추론도 포함되어 있습니다. TypeScript는 레거시 기능과 함께 최신 JavaScript 구현의 기능에 대한 지원을 유지하며 새로운 기능을 추가합니다.
전반적으로 TypeScript는 코더를 지원하는 강력한 도구로 보다 안전한 개발 프로세스를 만드는 데 중점을 두고 있습니다.
타입 안전 코드를 장려합니다
타입스크립트는 내장된 타입 검사 시스템을 사용하여 변수 타입의 유효성을 검사합니다. 여기에는 자체 클래스 및 유형을 정의할 수 있는 옵션과 함께 표준 유형 세트가 포함되어 있습니다. 유형은 명시적으로 선언하거나 할당을 기반으로 추론할 수 있습니다.
타입스크립트에는 문자열, 숫자, 부울, 튜플 등 여러 표준 데이터 유형이 있습니다. 또한 알 수 없음 및 임의와 같은 변수 유형도 있어 약하게 입력된 코드를 사용할 수 있습니다.
TypeScript의 유형 추론을 사용하면 TypeScript의 트랜스파일러를 통해 실행하여 표준 JavaScript 코드에서도 유형 검사를 실행할 수 있습니다.
사용하기 쉬운 트랜스파일링
개발자 관점에서 TypeScript의 가장 큰 특징 중 하나는 바닐라 자바스크립트를 출력한다는 점입니다. 컴파일과 유사한 트랜스파일레이션이라는 프로세스를 통해 타입스크립트 코드를 실행할 수 있습니다.
트랜스파일링의 결과는 실행 파일이 아니라 코드의 원래 언어가 아닌 다른 언어로 된 스크립트입니다.
타입스크립트 코드를 자바스크립트로 트랜스파일하여 서버나 클라이언트에서 실행할 수 있습니다. 이를 통해 거의 모든 플랫폼에서 실행할 수 있는 코드를 빠르고 쉽게 작성할 수 있습니다.
개발자의 생산성을 돕는 타입스크립트
자바스크립트에 타입을 추가하면 코드가 안전하게 실행될 뿐만 아니라 개발자에게 코딩을 더 쉽게 해주는 도구도 제공됩니다. 대부분의 최신 IDE는 IntelliSense와 같은 코드 완성 도구가 코드에 추가 컨텍스트를 제공할 수 있도록 TypeScript 지원을 제공합니다. 또한 작성하는 동안 유형 검사를 제공하여 오류를 더 빠르게 발견할 수 있도록 도와줍니다.
또한 TypeScript의 추가 데이터 구조와 구문은 코드 가독성을 높이기 위해 설계되었습니다. 이러한 기능을 사용하면 고품질 코드를 더 빠르고 쉽게 작성하고 문제가 발생하기 전에 잠재적인 문제를 발견할 수 있습니다.
코드를 어떻게 포팅할 수 있나요?
새로운 프로젝트를 시작하는 경우 새 TypeScript 프로젝트를 만드는 것은 매우 간단합니다. 그러나 기존 프로젝트를 TypeScript로 변환하는 것은 조금 더 복잡합니다.
대부분의 일반적인 상황에서 프로젝트를 한 언어에서 다른 언어로 변환하는 것은 두려운 일입니다. 하지만 자바스크립트에서 타입스크립트로 변환하는 것은 의외로 간단합니다.
자바스크립트의 상위 집합으로서의 타입스크립트
타입스크립트는 자바스크립트의 상위 집합으로 간주됩니다. 즉, TypeScript는 자바스크립트의 핵심 기능을 변경하거나 제거하지 않고 구문과 기능의 추가 레이어를 추가합니다.
개발자에게 이는 JavaScript에서 제대로 실행되는 모든 코드가 TypeScript에서도 자동으로 올바르게 실행된다는 것을 의미합니다. 해당 스크립트가 NodeJS에서 실행되도록 작성된 웹 서버이든, 웹 페이지의 프런트엔드 스크립트 세트이든 상관없이 전환은 매우 간단합니다.
타입스크립트 트랜스파일러를 설치한 후 다음 내용으로 간단한 tsconfig.json 파일을 생성할 수 있습니다:
{
"compilerOptions": {
"outDir": "./build",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
해당 파일을 src 디렉터리로 이동하고 트랜스파일러를 실행합니다. 그러면 빌드 디렉터리에 결과 JavaScript 파일이 생성됩니다.
이렇게 빠르고 간단하게 변경하면 표준 자바스크립트 프로젝트가 타입스크립트 프로젝트로 변환됩니다. 이제부터는 TypeScript가 제공하는 새로운 기능을 자유롭게 사용할 수 있습니다. 변수에 타입 주석을 달고, 사용자 정의 타입을 구현하고, 인터페이스를 정의할 수 있습니다.
각 트랜스파일링 후에는 평소와 마찬가지로 파일을 프로젝트에 추가하여 필요에 따라 빌드 디렉터리의 출력을 사용할 수 있습니다. 트랜스파일러는 표준 JavaScript를 유형 검사하고 새로운 기능을 유효한 ES5 스크립트로 변환합니다.
JS에서 TS로 전환하기 위해 알아야 할 사항
프로젝트를 JavaScript에서 TypeScript로 변환하는 과정은 매우 쉽습니다. 디렉토리 구조를 바꾸고, 설정 파일을 추가하고, 트랜스파일러를 설치하기만 하면 변환이 완료됩니다.
그러나 새로운 언어의 모든 이점을 활용하려면 프로젝트가 훨씬 더 길어질 수 있습니다. TypeScript는 프로젝트의 모든 변수의 유형을 유추할 수 있지만, 이러한 유형은 명시적으로 선언해야 합니다. 다시 돌아가서 프로젝트에 사용자 정의 유형을 추가하고, 적절한 주석을 추가하고, 인터페이스를 만드는 데 시간이 많이 걸릴 수 있습니다.
그러나 프로젝트에 이러한 기능을 추가하면 적절한 유형 검사 및 확장된 도구와 함께 제공되는 이점을 누릴 수 있습니다. 주요 프로젝트를 더 빠르고 쉽게 빌드할 수 있고, 오류를 더 일찍 식별할 수 있으며, 새로운 개발자가 코드를 더 쉽게 읽을 수 있습니다.