Web_Designer_UK__May_2018

Developer tutorials
Deploy TypeScript with React
Above Moving the body of the Node project to the same level as the webpack ‘config’ file fixes weird problems
the source map directly.
. . .
/***/ })
/******/ ]);
//# sourceMappingURL=bundle.js.map
18. Create a component
One of TypeScript’s most important features is the use
of classes and data types. Creating a new component
is done with a structure similar to the one shown
below – ‘Props’ and ‘State’ can be declared using the
‘type’ keyword.
type Props = { ... };
type State = { ... };
class MyComponent extends React.
Component {
...
}
19. Do it with interfaces
Another way to solve the problem involves the use of
interfaces. In this case, the syntax does not change
significantly – Microsoft’s favourite example demos it
via a set of string parameters passed in via the
‘HelloProps’ object.
export interface HelloProps { compiler:
string; framework: string; }
export class Hello extends React.
Component {
render() {
return Hello from {this.props.
compiler} and {this.props.framework}!;
}
}
20. Deploy the component
With that out of the way, the component can be
integrated into our main window as if it were a normal
React element.
import { Hello } from “./components/Hello”;
ReactDOM.render(
,
document.getElementById(“example”)
);
21. Use advanced features
Simply introducing TypeScript to your code is not
enough. Make sure to read the documentation carefully,
as to enable your developers and yourself to use the
most advanced features found in the language standard.
22. Try it out online
Should you ever feel like testing a bit of TypeScript, keep
www.typescriptlang.org/play in mind. It contains a live
version of the TypeScript compiler running in your
browser. Simply enter code on the left-hand side, and see
the JavaScript output on the right.
23. Load some examples
The TypeScript playground comes with a set of
pre-loaded examples which can be loaded via the
combination box on the left-hand side of your screen. In
addition to various syntax samples, the product even
contains an extremely interesting implementation of a
ray tracer.
90_________________________________________________tutorial