TypeScript
SystemJS를 사용한 TypeScript
수색…
SystemJS로 브라우저의 Hello World
systemjs 및 plugin-typescript 설치
npm install systemjs
npm install plugin-typescript
참고 : 아직 출시되지 않은 typescript 2.0.0 컴파일러가 설치됩니다.
TypeScript 1.8에서는 plugin-typescript 4.0.16을 사용해야합니다.
hello.ts
파일 만들기
export function greeter(person: String) {
return 'Hello, ' + person;
}
hello.html
파일 만들기
<!doctype html>
<html>
<head>
<title>Hello World in TypeScript</title>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('World');
});
});
</script>
</head>
<body>
</body>
</html>
config.js
작성 - SystemJS 구성 파일
System.config({
packages: {
"plugin-typescript": {
"main": "plugin.js"
},
"typescript": {
"main": "lib/typescript.js",
"meta": {
"lib/typescript.js": {
"exports": "ts"
}
}
}
},
map: {
"plugin-typescript": "node_modules/plugin-typescript/lib/",
/* NOTE: this is for npm 3 (node 6) */
/* for npm 2, typescript path will be */
/* node_modules/plugin-typescript/node_modules/typescript */
"typescript": "node_modules/typescript/"
},
transpiler: "plugin-typescript",
meta: {
"./hello.ts": {
format: "esm",
loader: "plugin-typescript"
}
},
typescriptOptions: {
typeCheck: 'strict'
}
});
참고 : 유형 검사를 원하지 않으면 config.js
에서 loader: "plugin-typescript"
및 typescriptOptions
loader: "plugin-typescript"
제거하십시오. 또한 자바 스크립트 코드, 특히 html 예제의 <script>
태그에있는 코드를 확인하지 않습니다.
그것을 시험해 보라.
npm install live-server
./node_modules/.bin/live-server --open=hello.html
생산 용으로 제작하십시오.
npm install systemjs-builder
build.js
파일을 만듭니다.
var Builder = require('systemjs-builder');
var builder = new Builder();
builder.loadConfig('./config.js').then(function() {
builder.bundle('./hello.ts', './hello.js', {minify: true});
});
hello.ts에서 hello.js 빌드
node build.js
프로덕션 환경에서 사용
처음 사용하기 전에 hello.js를 script 태그로로드하십시오.
hello-production.html
파일 :
<!doctype html>
<html>
<head>
<title>Hello World in TypeScript</title>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="config.js"></script>
<script src="hello.js"></script>
<script>
window.addEventListener('load', function() {
System.import('./hello.ts').then(function(hello) {
document.body.innerHTML = hello.greeter('World');
});
});
</script>
</head>
<body>
</body>
</html>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow