TypeScript - Setting up Development Environment

Показать описание

-How to download/install TypeScript
-Create a basic TypeScript App from scratch
-Configure TypeScript for compilation
-How to compile or transpile TypeScript into Native JavaScript
-How to test TypeScript App in Browser
-How to debug / troubleshoot TypeScript App in Browser (using Source Maps)
-What are Source Maps
-How to create Source Maps for TypeScript App
-How to download/install Webpack
-How to develop a simple build/bundle system using Webpack
-How to configure Webpack to compile/transpile TypeScript
-How to build / bundle Source Maps for TypeScript using Webpack

Рекомендации по теме

Комментарии

The best description on how to set up Typescript dev environment! Thank you so much!! I was struggling at least for three days to set up a Typescript dev environment for VS Code. This video saved me!

ramganapathy

Nice video, thank you! For future viewers, Webpack has made some breaking changes when building "webpack" so you need to remove the empty array entry in your webpack.config.js resolve. In the video he has
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
}

it should now be

resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"]
}

Colperductions

Undoubtedly the very best video explaining these concepts. Thank you.

rogerleclerc

Very nice video. Clear, concise and full of valuable info. Many thanks.

AlessandroBottoni

you are a good teacher. Good pace, no magic -- very good

alexlerner

Thank You for deep explaining of concepts.

kwayssa

that's great! I like this tutorials !thank you!

punkflyer

wonderfully explained, would have been an add-on if you would have discussed about commonjs, systemjs, ..

ParaspRajput

To make your life a little bit easier:

var path = require('path');
var webpack = require('webpack');

module.exports = {
devtool: 'source-map',
entry: './ts-src/app.ts',
output: {
filename: 'app.js',
path: path.resolve(__dirname, './build')
},
module: {
loaders: [ {
test: /\.ts$/,
include: path.resolve(__dirname, 'ts-src'),
loader: 'ts-loader'
} ]
},
resolve: {
extensions:[ ".webpack.js", ".web.js", ".ts", ".js" ]
}
};

alxsay

when i make changes in my .ts file, same is updating at .js file using webpack but changes are not seen in the browser.
can you help what can be the reason?
@Tech CBT

simranpalkohli