The document includes TypeScript code snippets showcasing the creation of functions and interfaces, such as combining names, defining person and ship interfaces, and working with modules. It demonstrates the use of React components and configurations for TypeScript and Webpack, indicating best practices for type safety and project structure. Additionally, it mentions module exports and settings for linting and compilation.

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