Web_Designer_UK__May_2018

Developer tutorials
While TypeScript brings a variety of
advantages to the arsenal of the
JavaScript programmer,
transpiling (and syntax-checking)
large amounts of TS code in the browser is ineffective.
Sadly, an old adage teaches us that manual processes
tendtobreakdownovertime–ifeachandevery
deployment takes a lot of console work, deployment
frequency will take a hit. webpack’s automatic packing
feature absorbs some of the heat so that when the
pipeline is set up, transpilation is performed with minimal
developer input.
This, furthermore, frees up capacity for other tasks. In
our example, the powerful React framework is integrated
into the webpack compilation process via a group of
helper utilities. React’s JSX syntax is augmented via a
proprietary language called tsx, thereby enabling tighter
integration between React and TypeScript’s advanced
run-time checking.
In short, working through this tutorial demonstrates
the creation of a workflow combining the best of both
worlds. Save time by using React’s logic, and avoid errors
via the enhanced syntax. If you are not a bug, there is little
not to like here.
1. Deploy webpack
Seasoned Node.JS developers will not be surprised about
thefactthattheuseofwebpackrequiresitsglobal
installation via the npm ‘install -g’ command. When done,
webpack can be invoked from your workstation’s
command line.
2. Create the scaffolding structure
Microsoft recommends the creation of a specific folder
structure to contain the various files constituting our
project. When working on an Ubuntu workstation,
simply execute the command sequence shown in a
convenient location.
tamhan@TAMHAN14:~$ mkdir tsreactspace
tamhan@TAMHAN14:~$ cd tsreactspace/
tamhan@TAMHAN14:~/tsreactspace$ mkdir src
tamhan@TAMHAN14:~/tsreactspace$ cd src
tamhan@TAMHAN14:~/tsreactspace/src$ mkdir
components
tamhan@TAMHAN14:~/tsreactspace/src$ cd ..
3. Create a Node.JS project
As with all Node.JS-related programs, the next step
involvesthecreationofarepositoryandtheloadingof
the various dependencies that are needed. Simply enter
the commands shown below to complete the creation
of the structure.
tamhan@TAMHAN14:~/tsreactspace/src$ npm init
tamhan@TAMHAN14:~/tsreactspace/src$ npm
install --save react react-dom @types/react
@types/react-dom
tamhan@TAMHAN14:~/tsreactspace/src$ npm
install --save-dev typescript awesometypescript-loader
source-map-loader
4. Automate your
TypeScript process
Most developers use TypeScript via the in-browser
transpiler or an IDE. The capabilities of the tsconfig.json
file are less known – it allows the pre-definition of a
compiler toolchain. Create an empty file in root folder.
5. Populate the file
In the next step, the TypeScript compilation process must
be set up. Open the file created in step 4, and replace its
contents with the ones shown accompanying this step.
{
“compilerOptions”: {
“outDir”: “./dist/”,
“sourceMap”: true,
“noImplicitAny”: true,
“module”: “commonjs”,
Be awesome and
keep Microsoft happy
Authors of TypeScript examples like to substitute
‘awesome-typescript-loader’ with ‘ts-loader’. This
is bad for two reasons. First of all, ‘awesome-*’ has
better multithreading capabilities. Secondarily,
Microsoft’s ‘official’ guidelines prefer ‘awesome-*’.
Left
NPM’s graphically verbose output showcases the colour
capabilities of Ubuntu’s terminal emulator
Above
Once the package.js file is created, the rest takes place
almost completely automatically
tutorial _________________________________________________87