Can I convert JavaScript back to TypeScript?
Can I convert an entire TypeScript project to JavaScript?
Is the TypeScript to JavaScript converter free, and do I need to install anything?
Yes.
You can target TypeScript compiler to ES6.
For example add this to your command line args:
--target es6
Yes, You can.
Either by adding --target es2015, or by adding target to Your tsconfig.json:
{
"compilerOptions": {
"target": "es2015"
}
}
Supported options for target are:
- "ES3" (default)
- "ES5"
- "ES6"/"ES2015"
- "ES2016"
- "ES2017"
- "ESNext"
There are a lot of more config options. You can explore them here: Compiler options
Some options are only allowed in tsconfig.json, and not through command-line switches.
What I can do in this situation?
You can tell TypeScript which module system you want to use. From the documentation:
To compile, we must specify a module target on the command line. For Node.js, use
--module commonjs; for require.js, use--module amdtsc --module commonjs Test.ts
usually i use this configuration..
for typescript transpiling my tsconfig.json:
{
"compilerOptions": {
"outDir": "app_build/",
"target": "es6", // <-- TARGETING ES6
"module": "commonjs",
"moduleResolution": "node",
"lib": [
"es5",
"dom"
],
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"compileOnSave": true,
"exclude": [
"node_modules",
"app_build/js",
"typings/main",
"typings/main.d.ts"
]
}
My Webpack dev file (webpack.dev.js):
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
"polyfills": "./polyfills.ts",
"vendor": "./vendor.ts",
"app": "./app/main.ts",
},
resolve: {
extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: "./app_build",
filename: "js/[name]-[hash:8].bundle.js"
},
devtool: 'source-map',
module: {
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: [
path.resolve(__dirname, "node_modules")
],
// Only run `.js` and `.jsx` files through Babel
test: /\.js/,
// Options to configure babel with
query: {
plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
presets: ['es2015', 'stage-0'], //<-- BABEL TRANSPILE
}
},
{
test: /\.ts$/,
loader: "ts"
},
{
test: /\.html$/,
loader: "html"
},
//{
// test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
// loader: "file?name=assets/[name]-[hash:6].[ext]",
//},
{
test: /\.(png|jpg|gif|ico)$/,
//include: path.resolve(__dirname, "assets/img"),
loader: 'file?name=/assets/img/[name]-[hash:6].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
// exclude: /node_modules/,
loader: 'file?name=/assets/fonts/[name].[ext]'
},
// Load css files which are required in vendor.ts
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
]
},
plugins: [
new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: ["app", "vendor", "polyfills"]
}),
new CleanWebpackPlugin(
[
"./app_build/js/",
"./app_build/css/",
"./app_build/assets/",
"./app_build/index.html"
]
),
// inject in index.html
new HtmlWebpackPlugin({
template: "./index.html",
inject: "body",
//minifyJS: true,
//minifyCSS: true,
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
devServer: {
//contentBase: path.resolve(__dirname, "app_build/"),
historyApiFallback: true,
stats: "minimal"
}
};
I use it for an Angular 2 project .. hope it helps you