Are you interested in TypeScript, but not sure where to start? Like most modern web development, it can feel like there are too many options and no obvious answers. This talk will share best practices for integrating TypeScript into both Node.js and Webpack+React/JSX workflows, how you can benefit from the features TypeScript offers, and answer common questions about TypeScript.

3. https://aka.ms/nebrius-svcc18-this

4. function combineNames(first: string, last: string): string {
return `${first} ${last}`;
}
const firstName: string = 'Philip';
const lastName: string = 'Fry';
console.log(combineNames(firstName, lastName));
https://aka.ms/nebrius-svcc18-this

5. interface IPerson {
firstName: string;
lastName: string;
age: number;
}
const fry: IPerson = {
firstName: 'Philip',
lastName: 'Fry',
age: 30
}
https://aka.ms/nebrius-svcc18-this

6. interface IShip {
name: string;
takeoff(): void;
}
class Ship implements IShip {
private shipName: string;
public get name() {
return this.shipName;
}
public takeoff(): void {
// Blastoff!
}
} https://aka.ms/nebrius-svcc18-this

7. import { IShip } from './IShip';
export class Ship implements IShip {
private shipName: string;
public get name() {
return this.shipName;
}
public takeoff(): void {
// Blastoff!
}
}
https://aka.ms/nebrius-svcc18-this

8. https://aka.ms/nebrius-svcc18-this

10. https://aka.ms/nebrius-svcc18-this

11. ➡
https://aka.ms/nebrius-svcc18-this

12. https://aka.ms/nebrius-svcc18-this

14. https://aka.ms/nebrius-svcc18-this

15. https://aka.ms/nebrius-svcc18-this

16. https://aka.ms/nebrius-svcc18-this

18. https://aka.ms/nebrius-svcc18-this

19. declare module "planet" {
export function visit(): void;
export function getCities(): City[];
export interface City {
population: number;
founded: Date;
}
}
https://aka.ms/nebrius-svcc18-this

20. https://aka.ms/nebrius-svcc18-this

21. https://aka.ms/nebrius-svcc18-this

23. https://aka.ms/nebrius-svcc18-this

24. {
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "dist",
"sourceMap": true
},
"include": [
"src/**/*.ts"
]
}
https://aka.ms/nebrius-svcc18-this

25. https://aka.ms/nebrius-svcc18-this

26. {
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"quotemark": "single",
"semicolon": "always",
"trailing-comma": "never"
},
"rulesDirectory": []
}
https://aka.ms/nebrius-svcc18-this

28. import { ItemView } from 'ItemView';
import * as React from 'react';
export interface IContainerProps {
items: string[];
}
export class ContainerView extends React.Component<IContainerProps, null> {
public render() {
return (
<div className="container">
{this.props.items.map((item) => (<ItemView item={item} />))}
</div>
);
}
}
https://aka.ms/nebrius-svcc18-this

29. https://aka.ms/nebrius-svcc18-this

30. module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: "./dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: “inline-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
// Continued on next slide
https://aka.ms/nebrius-svcc18-this

31. // Continued from previous slide
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /.tsx?$/, use: "ts-loader", exclude: /node_modules/ }
]
}
};
https://aka.ms/nebrius-svcc18-this

32. https://aka.ms/nebrius-svcc18-this

34. Bryan Hughes, @nebrius
https://aka.ms/nebrius-svcc18-this