Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

intro. typescript playground

155 views

Published on

typescript playground

Published in: Software
  • Be the first to comment

  • Be the first to like this

intro. typescript playground

  1. 1. [TS] TypeScript Playground 만들기 by Jbee
  2. 2. 최소한의npm과 설정으로TypeScript playground 만들기를진행해보겠습 니다. 사실가장빠른playground 세팅은이저장소를clone하면됩니다!ㅎㅎ https://github.com/JaeYeopHan/typescript_playground
  3. 3. 우선적으로 TypeScript 님부터모셔오도록합시다:) $ npm install -g typescript
  4. 4. 프로젝트세팅 디렉토리를하나만들고  npm init 을통해 package.json 설정을해줍니 다. "start": "webpack-dev-server --open" $ mkdir typescript_playground && cd typescript_playground $ npm init # set configuration of npm
  5. 5. transpiler를태울webpack이필요한데그 config파일과 TypeScript 설정 파일인 tsconfig.json 파일을생성해줍니다. $ touch webpack.config.js tsconfig.json $ touch index.html $ mkdir src $ touch src/index.ts
  6. 6. 다음은개인취향에따른optional한세팅파일들입니다. # And create optional files... $ touch .editorconfig $ touch .gitignore $ touch README.md 이파일들의내용은repo를참고하세요!
  7. 7. 이젠필요한npm 모듈들을설치합니다. $ npm install webpack webpack-dev-server --save-dev $ npm install awesome-typescript-loader --save-dev 프론트엔드개발자의영원한친구  we1bpack 과 그 친구  webpack-dev- server 를설치해줍니다. 그리고 공식문서에는 ts-loader 를사용하던데 요, 저희는가볍게 무시하고  awesome-typescript-loader 를설치해줍니 다. 딱이만큼만설치하면됩니다. ES6를한번사용해보려고  babel 이며  babel-core 며 .babelrc 파일이며온갖 이상한npm파일과 설정파일을 생성한기억이한번쯤은있으실텐데요, 타입스크립트는여기까지가 끝입니다. (행복합니다.)
  8. 8. 설정파일작성하기 이제각종config 파일들을작성해봅시다. 물론설정파일또한최소한으로작 성합니다.
  9. 9. webpack.config.js const webpack = require('webpack'); const path = require("path"); const { CheckerPlugin } = require('awesome-typescript-loader'
  10. 10. webpack.config.js module.exports = { entry: './src/index.ts', output: { filename: './dist/bundle.js' }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] }, devtool: 'inline-source-map', module: { loaders: [ { test: /.ts?$/, loader: 'awesome-typescript-loader', include: path.resolve(__dirname, 'src') } ] }, plugins: [ new CheckerPlugin(), new webpack.HotModuleReplacementPlugin(), ], };
  11. 11. 이문서에서는webpack tutorial을다루지않습니다. webpack tutorial은여 기에서따라하실수있습니다. (깨알홍보!)  HotMoudleReplacementPlugin 이녀석은도저히포기할수없어서추가 했습니다. 이제본격적으로typescript 설정들어갑니다. https://github.com/JaeYeopHan/webpack2_tutorial
  12. 12. tsconfig.json { "compilerOptions": { "noImplicitAny": true, "removeComments": true }, "awesomeTypescriptLoaderOptions": { /* ... */ } }
  13. 13. ES6를처음시작하던때의 .babelrc 파일이기억나시나요? 그것과 비슷하 다고 볼수있는데요, 상당히간단합니다. 거의모든부분을 awesome- typescript-loader 에서cover하고 있고 입맛에맞게 customize할수있 도록 "awesomeTypescriptLoaderOptions" 라는이름으로인터페이스가 열려있습니다.
  14. 14. index.html javascript로transpile될typescript파일을브라우저개발자도구에서확인 하기 위해서 index.html 파일을간단히작성해줍니다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> Hello, TypeScript world!! <script src="/dist/bundle.js"></script> </body> </html>
  15. 15. 왠만한설정은모두끝났습니다. webpack에설정한loader를잘타는지확인 하기 위해index.ts에console한번찍어봅니다.
  16. 16. console.log(`hello typescript world`); 그리고 start! $ npm start
  17. 17. 브라우저가 자동으로실행될텐데요, 개발자도구를열어보면hello typescript world라는console이찍혀있을겁니다. 이제TypeScript로해볼 수있는것을이것 저것 해보면됩니다.
  18. 18. 감사합니다. Reference GitHub of awesome‑typescript‑loader GitHub of tslint‑loader Jbee's Webpack tutorial TypeScript Official Document GitHub of jest

×