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