TypeScript 코드를 JavaScript 코드로 변환

Migel Hewage Nimesha 2023년6월21일
  1. 온라인 편집기를 사용하여 TypeScript를 JavaScript 코드로 변환
  2. 코드 편집기를 사용하여 TypeScript를 JavaScript 코드로 변환
  3. TypeScript를 전역적으로 설치하여 TypeScript를 JavaScript 코드로 변환
TypeScript 코드를 JavaScript 코드로 변환

여러 가지 방법으로 TypeScript 파일을 JavaScript 파일로 변환하여 필요할 때마다 효과적으로 사용할 수 있습니다. 웹 브라우저는 .ts 또는 TypeScript 파일 실행을 허용하지 않습니다. 따라서 웹 브라우저에서 실행하려면 TypeScript 파일을 일반 JavaScript 파일로 변환하는 것이 필수적입니다.

TypeScript는 웹 브라우저에서 사용하기 전에 변환해야 하지만 React.js 및 Angular와 같은 프레임워크와 라이브러리도 프로그래머가 코드를 개발할 때 일반 JavaScript를 사용하는 대신 TypeScript를 사용하도록 권장합니다.

일반 JavaScript를 사용하는 것보다 코드를 작성할 때 TypeScript가 훨씬 더 권장되는 주된 이유는 TypeScript 코드가 JavaScript에 대한 정적 유형 정의를 추가하기 때문입니다. TypeScript는 또한 코드가 올바르게 작동하고 모든 웹 브라우저 및 플랫폼과 호환되는지 확인하고 여러 테마에서 유지 관리할 수 있는지 확인합니다.

drag.js 및 Angular를 사용하는 경우 Webpack 또는 다른 번들을 사용하여 백그라운드에서 수행되므로 TypeScript를 JavaScript로 변환할 필요가 없습니다. 단, 독립형 JavaScript만 사용하는 경우에는 TypeScript를 JavaScript로 변환해야 하며 여러 가지 방법을 사용하여 변환할 수 있습니다.

다음은 세 가지 주요 방법입니다.

온라인 편집기를 사용하여 TypeScript를 JavaScript 코드로 변환

첫 번째이자 가장 쉬운 방법은 온라인에서 TypeScript를 JavaScript 코드로 변환하는 것입니다. TypeScript 웹사이트나 다른 온라인 편집기 또는 온라인 도구를 사용하여 이 작업을 수행할 수 있습니다.

TypeScript 웹사이트 이용 시 도구에서 플레이그라운드 도구를 이용하거나 TypeScript 플레이그라운드로 바로 이동합니다. 여기서 유일한 단계는 코드를 복사하여 지정된 편집기에 붙여넣는 것입니다. 그러면 코드가 JavaScript로 직접 변환됩니다.

또한 코드를 실행하고 예상대로 작동하는지 확인할 수 있습니다.

코드 편집기를 사용하여 TypeScript를 JavaScript 코드로 변환

사용할 수 있는 또 다른 방법은 Microsoft Visual Studio Code와 같은 우수한 코드 편집기를 사용한 다음 TypeScript를 JavaScript로 변환하는 데 사용할 수 있는 확장을 설치하는 것입니다. 예를 들어 Compile Hero 확장을 사용하여 위의 기능을 달성할 수 있습니다.

TypeScript를 전역적으로 설치하여 TypeScript를 JavaScript 코드로 변환

세 번째 방법은 컴퓨터와 NodeJS에 TypeScript를 전역으로 설치하는 것입니다. npm 또는 yarn과 유사하게 패키지 관리자용으로 설치됩니다.

그런 다음 터미널을 사용하여 TypeScript 유틸리티에 액세스할 수 있으며 명령을 사용하여 TypeScript 파일을 JavaScript로 변환할 수 있습니다. 또한 이 방법을 사용하여 변경 사항에 대해 TypeScript 파일을 볼 수 있습니다.

또한 이 유틸리티는 TypeScript 구성 파일을 생성하라는 명령을 제공합니다.

yarn을 사용하여 TypeScript를 설치하려면 먼저 원하는 폴더에서 명령줄을 열고 yarn global add typescriptEnter를 입력하거나 npm 패키지 유형 npm install -g typescript를 설치합니다. 명령줄에 입력하고 Enter 키를 누릅니다. 그런 다음 TypeScript 구성 파일을 생성하려면 명령줄에서 tsc --init를 사용하고 Enter를 누르면 tsconfig.json이 생성됩니다.

구성 파일이 생성되면 루트 수준에 존재하게 됩니다. 따라서 구성 파일의 설정은 사용자의 취향에 맞게 변경할 수 있으며 TypeScript에서 JavaScript로의 변환은 구성 파일을 기반으로 합니다.

TypeScript를 JavaScript로 변환하려면 TypeScript 파일이 있는 폴더에서 터미널을 열고 tsc FileName.ts를 입력합니다. 여기서 위 코드에서 언급한 FileName은 JavaScript로 변환되는 TypeScript 파일의 파일 이름이어야 합니다.

위의 코드가 실행되면 같은 폴더에 새로운 JavaScript 파일이 생성되는데, 이것이 바로 TypeScript 파일의 변환입니다.

Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.