Rails6에서 typescript 사용

docker-compose로 Rails6 개발 환경의 절차에 따라 Rails6의 새로운 프로젝트가 시작된 상태를 가정합니다. 먼저 다음 명령으로 typescript를 설치합니다.

docker-compose exec web rails webpacker:install:typescript

마지막으로 다음과 같은 메시지가 나오면 OK입니다.

info All dependencies
├─ [email protected]
└─ [email protected]
Done in 99.53s.
Webpacker now supports typescript 🎉

샘플 파일이 app/javascript/packs에 있습니다.
여기에 TypeScript를 작성할 수 있습니다.

app/javascript/packs/hello_typescript.ts

// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.

console.log('Hello world from typescript');

코멘트란에 쓰여진 대로 레이아웃(erb) 쪽에 태그를 추가합니다.

app/views/layouts/application.html.erb

<%= javascript_pack_tag 'hello_typescript' %>

rails의 웹 서버를 시작한 상태에서 뭔가 적절한 페이지에 액세스하면 webpacker가 움직이기 시작하여 js 파일을 생성하고 있는지 확인할 수 있습니다.

web_1  | [Webpacker] Compiling...
web_1  | [Webpacker] Compiled all packs in /railsapp/public/packs
:
web_1  |     js/hello_typescript-a311f1059a83d1e0c165.js   4.12 KiB  hello_typescript  [emitted] [immutable]  hello_typescript
web_1  | js/hello_typescript-a311f1059a83d1e0c165.js.map   3.81 KiB  hello_typescript  [emitted] [dev]        hello_typescript

브라우저의 콘솔에 「Hello world」를 확인할 수 있으면 OK!