TSConf 2019 in Seattle: Cutting Edge TypeScript and Full Stack Type Safety

// Example of a TypeScript pipeline operator (proposed feature)
const result = "hello"
  |> str => str.toUpperCase()
  |> str => str.split("")
  |> arr => arr.reverse()
  |> arr => arr.join("");

console.log(result); // "OLLEH"

// Example of Vue.js with TypeScript
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello, TSConf!';

  mounted() {
    console.log(this.message);
  }
}

// Example of GraphQL schema in TypeScript
import { GraphQLObjectType, GraphQLString, GraphQLSchema } from 'graphql';

const QueryType = new GraphQLObjectType({
  name: 'Query',
  fields: {
    hello: {
      type: GraphQLString,
      resolve: () => 'Hello, TSConf!'
    }
  }
});

export const schema = new GraphQLSchema({ query: QueryType });

type Json = null | string | number | boolean | Json [] | { [name: string]: Json }

const exampleJson: Json = {
  name: "TSConf",
  year: 2019,
  topics: ["TypeScript", "JavaScript", "Web Development"],
  isAwesome: true
};

// Example of a new TypeScript feature: Optional Chaining
interface User {
  name: string;
  address?: {
    street?: string;
    city?: string;
  };
}

function getCity(user: User): string | undefined {
  return user.address?.city;
}

// Example of shared types between frontend and backend
// shared/types.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

// backend/api.ts
import { User } from '../shared/types';

function getUser(id: number): Promise<User> {
  // Implementation
}

// frontend/component.ts
import { User } from '../shared/types';

async function displayUser(id: number) {
  const user: User = await fetchUser(id);
  console.log(user.name);
}

type Bit = 0 | 1;
type Add<A extends Bit, B extends Bit> = 
  A extends 0 ? B extends 0 ? [0, 0] : [0, 1] :
  B extends 0 ? [0, 1] : [1, 0];

type Result = Add<1, 1>; // [1, 0] (carry 1, sum 0)

// Example of a Deno script
import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

const server = serve({ port: 8000 });
console.log("Server running on http://localhost:8000/");

for await (const req of server) {
  req.respond({ body: "Hello from Deno!" });
}

// Example of dtslint usage
// $ExpectType string
"hello".toUpperCase();

// $ExpectError
Math.round("not a number");

// Example of MakeCode Arcade game
namespace SpriteKind {
    export const Player = SpriteKind.create()
}
let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . b 5 5 b . . . 
    . . . . . . b b b b b b . . . . 
    . . . . . b b 5 5 5 5 5 b . . . 
    . b b b b b 5 5 5 5 5 5 5 b . . 
    . b d 5 b 5 5 5 5 5 5 5 5 b . . 
    . . b 5 5 b 5 d 1 f 5 d 4 f . . 
    . . b d 5 5 b 1 f f 5 4 4 c . . 
    b b d b 5 5 5 d f b 4 4 4 4 b . 
    b d d c d 5 5 b 5 4 4 4 4 4 4 b 
    c d d d c c b 5 5 5 5 5 5 5 b . 
    c b d d d d d 5 5 5 5 5 5 5 b . 
    . c d d d d d d 5 5 5 5 5 d b . 
    . . c b d d d d d 5 5 5 b b . . 
    . . . c c c c c c c c b b . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)

// Example demonstrating why using 'any' might be problematic
function processData(data: any) {
  console.log(data.nonExistentProperty.anotherProperty);
}

processData(42); // No type error, but will crash at runtime

// Example of gradually introducing TypeScript to a JavaScript project
// Before: JavaScript
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

// After: TypeScript
interface Item {
  name: string;
  price: number;
}

function calculateTotal(items: Item[]): number {
  return items.reduce((total, item) => total + item.price, 0);
}

// Example of a new TypeScript feature proposal
type Nullable<T> = T | null | undefined;

function process<T>(value: Nullable<T>): T {
  if (value == null) {
    throw new Error("Value is null or undefined");
  }
  return value;
}

const result = process("Hello, TSConf!"); // Type: string
const error = process(null); // Throws error

// Reflecting on the conference
type ConferenceHighlight = {
  topic: string;
  rating: number;
  feedback: string;
};

const tsconf2019: ConferenceHighlight[] = [
  { topic: "Full Stack Type Safety", rating: 5, feedback: "Game changer!" },
  { topic: "Deno", rating: 4, feedback: "Exciting new runtime" },
  { topic: "TypeScript Type System", rating: 5, feedback: "Mind-blowing" }
];

console.log("Thank you for attending TSConf 2019!");