Soumettre la recherche
Mettre en ligne
intro. typescript playground
•
1 j'aime
•
1,024 vues
H
Han JaeYeab
Suivre
typescript playground
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 18
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Gruntjs
Gruntjs
Chan-uk Son
Deploying flask with nginx & uWSGI
Deploying flask with nginx & uWSGI
정주 김
코분투메뉴얼 10.04 Cobuntu Manual
코분투메뉴얼 10.04 Cobuntu Manual
Ubuntu Korea Community
d.ts 만들기
d.ts 만들기
DaeSeon Jeong
[0618구경원]초보 게임프로그래머를 위한 c++
[0618구경원]초보 게임프로그래머를 위한 c++
KyeongWon Koo
Grunt 사용법 간단정리
Grunt 사용법 간단정리
SuHyun Jeon
Docker
Docker
Huey Park
AWS EC2 flask_uwsgi_nginx install guide korean
AWS EC2 flask_uwsgi_nginx install guide korean
Jinsoo Park
Recommandé
Gruntjs
Gruntjs
Chan-uk Son
Deploying flask with nginx & uWSGI
Deploying flask with nginx & uWSGI
정주 김
코분투메뉴얼 10.04 Cobuntu Manual
코분투메뉴얼 10.04 Cobuntu Manual
Ubuntu Korea Community
d.ts 만들기
d.ts 만들기
DaeSeon Jeong
[0618구경원]초보 게임프로그래머를 위한 c++
[0618구경원]초보 게임프로그래머를 위한 c++
KyeongWon Koo
Grunt 사용법 간단정리
Grunt 사용법 간단정리
SuHyun Jeon
Docker
Docker
Huey Park
AWS EC2 flask_uwsgi_nginx install guide korean
AWS EC2 flask_uwsgi_nginx install guide korean
Jinsoo Park
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
OnGameServer
카산드라를 설치해서 테스트 해보자 with virtualbox
카산드라를 설치해서 테스트 해보자 with virtualbox
떠리 이
Start groovy
Start groovy
Sukjin Yun
RZDESK-Docker hackday
RZDESK-Docker hackday
Hyeong-Kyu Lee
Dockerfile과 Bash
Dockerfile과 Bash
pyrasis
랩탑으로 tensorflow 도전하기 - tensorflow 설치
랩탑으로 tensorflow 도전하기 - tensorflow 설치
Lee Seungeun
Macro for Game
Macro for Game
Jeong-Hoon Mo
caanoo Ernice
caanoo Ernice
jumiss
효과적인 임베디드 디버깅 환경구축
효과적인 임베디드 디버깅 환경구축
guest0ad316e
1.intro to k8s
1.intro to k8s
Hongmin Park
Ninja
Ninja
Ji Hun Kim
Docker설치
Docker설치
Yujin Hwang
Cassandra 멘붕기 | Devon 2012
Cassandra 멘붕기 | Devon 2012
Daum DNA
docker-based remote desktop
docker-based remote desktop
Hyeong-Kyu Lee
[설치의 정석] EC2에서 워드프레스 설치하기
[설치의 정석] EC2에서 워드프레스 설치하기
Jay Park
16. Install - Nutch
16. Install - Nutch
merry7
Ch7,8. Configmaps, Secrets and API
Ch7,8. Configmaps, Secrets and API
Hongmin Park
Ansible
Ansible
DaeMyung Kang
[Gpg2권]1.1 c++ 게임의 최적화
[Gpg2권]1.1 c++ 게임의 최적화
KyeongWon Koo
Hm10 Research sheets
Hm10 Research sheets
yyooooon
How to Grunt.js
How to Grunt.js
Sunghyun Hwang
도커없이 컨테이너 만들기 1편
도커없이 컨테이너 만들기 1편
Sam Kim
Contenu connexe
Tendances
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
OnGameServer
카산드라를 설치해서 테스트 해보자 with virtualbox
카산드라를 설치해서 테스트 해보자 with virtualbox
떠리 이
Start groovy
Start groovy
Sukjin Yun
RZDESK-Docker hackday
RZDESK-Docker hackday
Hyeong-Kyu Lee
Dockerfile과 Bash
Dockerfile과 Bash
pyrasis
랩탑으로 tensorflow 도전하기 - tensorflow 설치
랩탑으로 tensorflow 도전하기 - tensorflow 설치
Lee Seungeun
Macro for Game
Macro for Game
Jeong-Hoon Mo
caanoo Ernice
caanoo Ernice
jumiss
효과적인 임베디드 디버깅 환경구축
효과적인 임베디드 디버깅 환경구축
guest0ad316e
1.intro to k8s
1.intro to k8s
Hongmin Park
Ninja
Ninja
Ji Hun Kim
Docker설치
Docker설치
Yujin Hwang
Cassandra 멘붕기 | Devon 2012
Cassandra 멘붕기 | Devon 2012
Daum DNA
docker-based remote desktop
docker-based remote desktop
Hyeong-Kyu Lee
[설치의 정석] EC2에서 워드프레스 설치하기
[설치의 정석] EC2에서 워드프레스 설치하기
Jay Park
16. Install - Nutch
16. Install - Nutch
merry7
Ch7,8. Configmaps, Secrets and API
Ch7,8. Configmaps, Secrets and API
Hongmin Park
Ansible
Ansible
DaeMyung Kang
[Gpg2권]1.1 c++ 게임의 최적화
[Gpg2권]1.1 c++ 게임의 최적화
KyeongWon Koo
Hm10 Research sheets
Hm10 Research sheets
yyooooon
Tendances
(20)
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
카산드라를 설치해서 테스트 해보자 with virtualbox
카산드라를 설치해서 테스트 해보자 with virtualbox
Start groovy
Start groovy
RZDESK-Docker hackday
RZDESK-Docker hackday
Dockerfile과 Bash
Dockerfile과 Bash
랩탑으로 tensorflow 도전하기 - tensorflow 설치
랩탑으로 tensorflow 도전하기 - tensorflow 설치
Macro for Game
Macro for Game
caanoo Ernice
caanoo Ernice
효과적인 임베디드 디버깅 환경구축
효과적인 임베디드 디버깅 환경구축
1.intro to k8s
1.intro to k8s
Ninja
Ninja
Docker설치
Docker설치
Cassandra 멘붕기 | Devon 2012
Cassandra 멘붕기 | Devon 2012
docker-based remote desktop
docker-based remote desktop
[설치의 정석] EC2에서 워드프레스 설치하기
[설치의 정석] EC2에서 워드프레스 설치하기
16. Install - Nutch
16. Install - Nutch
Ch7,8. Configmaps, Secrets and API
Ch7,8. Configmaps, Secrets and API
Ansible
Ansible
[Gpg2권]1.1 c++ 게임의 최적화
[Gpg2권]1.1 c++ 게임의 최적화
Hm10 Research sheets
Hm10 Research sheets
Similaire à intro. typescript playground
How to Grunt.js
How to Grunt.js
Sunghyun Hwang
도커없이 컨테이너 만들기 1편
도커없이 컨테이너 만들기 1편
Sam Kim
[온라인교육시리즈] 네이버 클라우드 플랫폼 init script 활용법 소개(정낙수 클라우드 솔루션 아키텍트)
[온라인교육시리즈] 네이버 클라우드 플랫폼 init script 활용법 소개(정낙수 클라우드 솔루션 아키텍트)
NAVER CLOUD PLATFORMㅣ네이버 클라우드 플랫폼
postgres_빌드_및_디버깅.pdf
postgres_빌드_및_디버깅.pdf
Lee Dong Wook
Python Korea 2014년 6월 세미나 - Windows 환경에서 Python 개발환경 세팅하기
Python Korea 2014년 6월 세미나 - Windows 환경에서 Python 개발환경 세팅하기
Joongi Kim
Tensorflow service & Machine Learning
Tensorflow service & Machine Learning
JEEHYUN PAIK
[Tizen Talk 2016 in Seoul] 바닥서부터 만들어보는 타이젠
[Tizen Talk 2016 in Seoul] 바닥서부터 만들어보는 타이젠
SangJung Woo
Grunt
Grunt
Dohoon Kim
Mongo db 시작하기
Mongo db 시작하기
OnGameServer
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
Chanwoong Kim
성공적인 게임 런칭을 위한 비밀의 레시피 #3
성공적인 게임 런칭을 위한 비밀의 레시피 #3
Amazon Web Services Korea
Node.js 팀 스터디 발표자료.
Node.js 팀 스터디 발표자료.
SeungWoo Lee
ant로 안드로이드 앱을 자동으로 빌드하자
ant로 안드로이드 앱을 자동으로 빌드하자
Sewon Ann
RPG Maker와 Ruby로 코딩 시작하기 Day 1
RPG Maker와 Ruby로 코딩 시작하기 Day 1
Sunwoo Park
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Chanho Song
셸 스크립트를 이용한 클라우드 시스템 운영
셸 스크립트를 이용한 클라우드 시스템 운영
Nalee Jang
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
Modulabs
IoT 개발자를 위한 Embedded C에서 TDD를 해보자
IoT 개발자를 위한 Embedded C에서 TDD를 해보자
Taeyeop Kim
도커없이컨테이너 만들기 8편 - pid namespace
도커없이컨테이너 만들기 8편 - pid namespace
Sam Kim
Deploying Hyperledger Fabric on Kubernetes.pptx
Deploying Hyperledger Fabric on Kubernetes.pptx
wonyong hwang
Similaire à intro. typescript playground
(20)
How to Grunt.js
How to Grunt.js
도커없이 컨테이너 만들기 1편
도커없이 컨테이너 만들기 1편
[온라인교육시리즈] 네이버 클라우드 플랫폼 init script 활용법 소개(정낙수 클라우드 솔루션 아키텍트)
[온라인교육시리즈] 네이버 클라우드 플랫폼 init script 활용법 소개(정낙수 클라우드 솔루션 아키텍트)
postgres_빌드_및_디버깅.pdf
postgres_빌드_및_디버깅.pdf
Python Korea 2014년 6월 세미나 - Windows 환경에서 Python 개발환경 세팅하기
Python Korea 2014년 6월 세미나 - Windows 환경에서 Python 개발환경 세팅하기
Tensorflow service & Machine Learning
Tensorflow service & Machine Learning
[Tizen Talk 2016 in Seoul] 바닥서부터 만들어보는 타이젠
[Tizen Talk 2016 in Seoul] 바닥서부터 만들어보는 타이젠
Grunt
Grunt
Mongo db 시작하기
Mongo db 시작하기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
[NDC18] 만들고 붓고 부수고 - 〈야생의 땅: 듀랑고〉 서버 관리 배포 이야기
성공적인 게임 런칭을 위한 비밀의 레시피 #3
성공적인 게임 런칭을 위한 비밀의 레시피 #3
Node.js 팀 스터디 발표자료.
Node.js 팀 스터디 발표자료.
ant로 안드로이드 앱을 자동으로 빌드하자
ant로 안드로이드 앱을 자동으로 빌드하자
RPG Maker와 Ruby로 코딩 시작하기 Day 1
RPG Maker와 Ruby로 코딩 시작하기 Day 1
Html5+js with game engine cocos2d-html5 분석 @KGC2012
Html5+js with game engine cocos2d-html5 분석 @KGC2012
셸 스크립트를 이용한 클라우드 시스템 운영
셸 스크립트를 이용한 클라우드 시스템 운영
TensorFlow.js & Applied AI at the Coca-Cola Company
TensorFlow.js & Applied AI at the Coca-Cola Company
IoT 개발자를 위한 Embedded C에서 TDD를 해보자
IoT 개발자를 위한 Embedded C에서 TDD를 해보자
도커없이컨테이너 만들기 8편 - pid namespace
도커없이컨테이너 만들기 8편 - pid namespace
Deploying Hyperledger Fabric on Kubernetes.pptx
Deploying Hyperledger Fabric on Kubernetes.pptx
Plus de Han JaeYeab
07. type system
07. type system
Han JaeYeab
06. decorator
06. decorator
Han JaeYeab
05. generics in typescript
05. generics in typescript
Han JaeYeab
04. interface in typescript
04. interface in typescript
Han JaeYeab
03. function in typescript
03. function in typescript
Han JaeYeab
02. class in typescript
02. class in typescript
Han JaeYeab
01. basic types
01. basic types
Han JaeYeab
[ES6] 12. Array
[ES6] 12. Array
Han JaeYeab
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export
Han JaeYeab
[ES6] 10. Generator
[ES6] 10. Generator
Han JaeYeab
[ES6] 9. Iterator
[ES6] 9. Iterator
Han JaeYeab
[ES6] 8. Symbol
[ES6] 8. Symbol
Han JaeYeab
[ES6] 7. Template literal
[ES6] 7. Template literal
Han JaeYeab
[ES6] 6. Class
[ES6] 6. Class
Han JaeYeab
[ES6] 5. Destructuring
[ES6] 5. Destructuring
Han JaeYeab
[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter
Han JaeYeab
[ES6] 3. iteration
[ES6] 3. iteration
Han JaeYeab
[ES6] 2. arrow function
[ES6] 2. arrow function
Han JaeYeab
[ES6] 1. let과 const
[ES6] 1. let과 const
Han JaeYeab
클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해
Han JaeYeab
Plus de Han JaeYeab
(20)
07. type system
07. type system
06. decorator
06. decorator
05. generics in typescript
05. generics in typescript
04. interface in typescript
04. interface in typescript
03. function in typescript
03. function in typescript
02. class in typescript
02. class in typescript
01. basic types
01. basic types
[ES6] 12. Array
[ES6] 12. Array
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export
[ES6] 10. Generator
[ES6] 10. Generator
[ES6] 9. Iterator
[ES6] 9. Iterator
[ES6] 8. Symbol
[ES6] 8. Symbol
[ES6] 7. Template literal
[ES6] 7. Template literal
[ES6] 6. Class
[ES6] 6. Class
[ES6] 5. Destructuring
[ES6] 5. Destructuring
[ES6] 4. Spread, Rest parameter
[ES6] 4. Spread, Rest parameter
[ES6] 3. iteration
[ES6] 3. iteration
[ES6] 2. arrow function
[ES6] 2. arrow function
[ES6] 1. let과 const
[ES6] 1. let과 const
클라우드 컴퓨팅에 대한 기본적인 이해
클라우드 컴퓨팅에 대한 기본적인 이해
intro. typescript playground
1.
[TS] TypeScript Playground
만들기 by Jbee
2.
최소한의npm과 설정으로TypeScript playground
만들기를진행해보겠습 니다. 사실가장빠른playground 세팅은이저장소를clone하면됩니다!ㅎㅎ https://github.com/JaeYeopHan/typescript_playground
3.
우선적으로 TypeScript 님부터모셔오도록합시다:) $ npm install
-g typescript
4.
프로젝트세팅 디렉토리를하나만들고 npm init 을통해 package.json 설정을해줍니 다. "start":
"webpack-dev-server --open" $ mkdir typescript_playground && cd typescript_playground $ npm init # set configuration of npm
5.
transpiler를태울webpack이필요한데그 config파일과 TypeScript
설정 파일인 tsconfig.json 파일을생성해줍니다. $ touch webpack.config.js tsconfig.json $ touch index.html $ mkdir src $ touch src/index.ts
6.
다음은개인취향에따른optional한세팅파일들입니다. # And create
optional files... $ touch .editorconfig $ touch .gitignore $ touch README.md 이파일들의내용은repo를참고하세요!
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.
설정파일작성하기 이제각종config 파일들을작성해봅시다. 물론설정파일또한최소한으로작 성합니다.
9.
webpack.config.js const webpack =
require('webpack'); const path = require("path"); const { CheckerPlugin } = require('awesome-typescript-loader'
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.
이문서에서는webpack tutorial을다루지않습니다. webpack
tutorial은여 기에서따라하실수있습니다. (깨알홍보!) HotMoudleReplacementPlugin 이녀석은도저히포기할수없어서추가 했습니다. 이제본격적으로typescript 설정들어갑니다. https://github.com/JaeYeopHan/webpack2_tutorial
12.
tsconfig.json { "compilerOptions": { "noImplicitAny": true, "removeComments":
true }, "awesomeTypescriptLoaderOptions": { /* ... */ } }
13.
ES6를처음시작하던때의 .babelrc 파일이기억나시나요? 그것과 비슷하 다고
볼수있는데요, 상당히간단합니다. 거의모든부분을 awesome- typescript-loader 에서cover하고 있고 입맛에맞게 customize할수있 도록 "awesomeTypescriptLoaderOptions" 라는이름으로인터페이스가 열려있습니다.
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.
왠만한설정은모두끝났습니다. webpack에설정한loader를잘타는지확인 하기 위해index.ts에console한번찍어봅니다.
16.
console.log(`hello typescript world`); 그리고
start! $ npm start
17.
브라우저가 자동으로실행될텐데요, 개발자도구를열어보면hello typescript
world라는console이찍혀있을겁니다. 이제TypeScript로해볼 수있는것을이것 저것 해보면됩니다.
18.
감사합니다. Reference GitHub of awesome‑typescript‑loader GitHub
of tslint‑loader Jbee's Webpack tutorial TypeScript Official Document GitHub of jest
Télécharger maintenant