npm install webpack webpack-cli --save-dev
npm install --save-dev file-loader
npm install --save-dev typescript ts-loader
npm run build -- --mode=development
npm start
We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code.
let's run npx webpack, which will take our script at src/index.js as the entry point, and will generate dist/main.js as the output.
Note that webpack will not alter any code other than import and export statements. If you are using other ES2015 features, make sure to use a transpiler such as Babel or Bublé via webpack's loader system.
As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file.
If a webpack.config.js is present, the webpack command picks it up by default. We use the --config option here only to show that you can pass a configuration of any name. This will be useful for more complex configurations that need to be split into multiple files.
Now the npm run build command can be used in place of the npx command we used earlier. Note that within scripts we can reference locally installed npm packages by name the same way we did with npx.
This enables you to import './style.css' into the file that depends on that styling. Now, when that module is run, a <style> tag with the stringified css will be inserted into the of your html file.
Now, when you import MyImage from './my-image.png', that image will be processed and added to your output directory and the MyImage variable will contain the final url of that image after processing. When using the css-loader, as shown above, a similar process will occur for url('./my-image.png') within your CSS. The loader will recognize this is a local file, and replace the './my-image.png' path with the final path to the image in your output directory.
npm install --save-dev file-loader
file-loader Emits the file into the output folder and returns the (relative) URL
Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration – see configuration.
Another useful asset that can be loaded is data, like JSON files, CSVs, TSVs, and XML. Support for JSON is actually built-in, similar to NodeJS, meaning import Data from './data.json' will work by default.
Before we do a build, you should know that the HtmlWebpackPlugin by default will generate its own index.html file, even though we already have one in the dist/ folder.
You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.
devServer: Insert the webpack-dev-server hot reload script
webpack-dev-middleware is a wrapper that will emit files processed by webpack to a server. This is used in webpack-dev-server internally, however it's available as a separate package to allow more custom setups if desired.
When installing third party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found at TypeSearch.
To use non-code assets with TypeScript, we need to defer the type for these imports. This requires a custom.d.ts file which signifies custom definitions for TypeScript in our project. Let's set up a declaration for .svg files
start: This runs an arbitrary command specified in the package’s "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.
npm run: This runs an arbitrary command from a package’s "scripts" object.
Additionally, arbitrary scripts can be executed by running npm run-script . Pre and post commands with matching names will be run for those as well (e.g. premyscript, myscript, postmyscript). Scripts from dependencies can be run with npm explore -- npm run .
create-react-app is an npm package that is expected to be run only once in a project's lifecycle. Hence, it is preferred to use npx to install and run it in a single step.
This flag can be used as a way to incrementally add TypeScript files into JS projects by allowing the .ts and .tsx files to live along-side existing JavaScript files.
Type assertions have two forms. One is the “angle-bracket” syntax: let strLength: number = (someValue).length; And the other is the as-syntax: let strLength: number = (someValue as string).length;
Note: If --lib is not specified a default list of libraries are injected. The default libraries injected are: For --target ES5: DOM,ES5,ScriptHost For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost
Typescript fields with special characters
Generic Higher-Order Functions in TypeScript
Ergonomic TypeScript Generics with Higher-Order Functions
ES6 Destructuring in TypeScript
The correct way to handle TypeScript functional destructuring is to define an interface and reference the interface after the destructure.
What is the syntax for Typescript arrow functions with generics?
Pattern Matching in TypeScript with Record and Wildcard Patterns
-
Por qué no se queja TS cuando cargamos un json desde fuera y asumimos que tiene un esquema determinado? Quizás lo que viene de fuera es any?
-
la sintaxis de tipado para las arrow functions es un poco confusa, sobre todo las genéricas.