Type script in practice

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

interface IPerson {
firstName: string;
lastName: string;
age: number;
}
const fry: IPerson = {
firstName: 'Philip',
lastName: 'Fry',
age: 30
}

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

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

➡

declare module "planet" {
export function visit(): void;
export function getCities(): City[];
export interface City {
population: number;
founded: Date;
}
}

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "dist",
"sourceMap": true
},
"include": [
"src/**/*.ts"
]
}

{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {
"quotemark": "single",
"semicolon": "always",
"trailing-comma": "never"
},
"rulesDirectory": []
}

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>
);
}
}

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

// 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/ }
]
}
};

Bryan Hughes, @nebrius

Type script in practice

More Related Content

What's hot (20)

Similar to Type script in practice (13)

Recently uploaded (20)

Type script in practice