Typescript Setup Guide, Include jQuery with Typings
This guide is still being developed
A step by step guide to setting up Typescript.Install with npm
$ npm install -g typescript
$ npm install -g webpack
$ npm install -g ts-loader // links webpack to complie typescript
$ npm install -g jquery // to use jquery in your project
$ npm install -g http-server // to have a local server runConfigure Typescript
1. Create new Typescript file main.ts:class SweetSweetClass {
constructor() {
console.log("Even sweeter")
}
}
let basil = new SweetSweetClass()2. Setup tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "dist/",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true
},
"include": [
"*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}3. Run:
$ tsc
$ tsc --watchNotice that the directory dist and the file main.js were created.
4. Setup HTML Page:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src='/dist/main.js'></script>
</body>
</html>5. Run:
$ http-server -c-1or
$ http-serverUsing the flag -c-1 makes the browser never cache the files.
6. Open up the Javascript Console and find the statement "Even sweeter"
Run & Compile with Webpack
1. Setup webpack.config.js: var path = require('path');
module.exports = {
entry: './main.ts',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}2. Run webpack:
Non minified
$ webpack --watchAs minified
$ webpack --watch --optimize-minimize3. Add new Typescript file called getcoffee.ts:
export class MustHaveCoffee {
constructor() {
console.log("yeah me too!")
}
}4. Open main.ts:
import {MustHaveCoffee} from "./getcoffee"
class SweetSweetClass {
constructor() {
console.log("Even sweeter")
}
}
let basil = new SweetSweetClass()
let coffee = new MustHaveCoffee()5. Update index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src='/dist/bundle.js'></script>
</body>
</html>Include jQuery with Typings
1. Install the @types package
$ npm install --save-dev @types/jquery$ npm install typings -g
$ typings install dt~jquery --global --save
$ typings install2. Update tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "dist/",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true
},
"include": [
"src/*",
"typings/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}3. Import jQuery in main.ts
import * as $ from "jquery";
import {MustHaveCoffee} from "./getcoffee"
class SweetSweetClass {
constructor() {
console.log("Even sweeter");
$('body').css('background-color', 'red');
}
}
let basil = new SweetSweetClass()
let coffee = new MustHaveCoffee()Khi bạn làm việc với thư mục khác nhau thì câu lệnh tại thư mục sẽ là:
$ npm install --save-dev typescript
$ npm install --save-dev webpack
$ npm install --save-dev typescript ts-loader
$ npm install --save-dev jquery
$ npm install --save-dev http-server
$ npm install --save-dev @types/jquery
$ npm install typings -g
$ typings install dt~jquery --global --save
$ typings install
npm update --save
Trả lờiXóanpm install --save-dev webpack-dev-server
Trả lờiXóahttps://stackoverflow.com/questions/39643845/how-to-use-ng-bootstrap-with-angularjs-2-using-angular-cli-v1b15
Trả lờiXóa