TSConf 2019 in Seattle: Cutting Edge TypeScript and Full Stack Type Safety
Table of Contents
- TSConf 2019 | Seattle, Washington
- Presentation
- Sessions
- Keynote
- TypeScript at the Cutting Edge
- Don't Break the Contract: Keep Consistency with Full Stack Type Safety
- Binary Arithmetic in TypeScript's Type System
- Deno is a New Way to JavaScript
- Testing Types: An Introduction to dtslint
- MakeCode Arcade with Static TypeScript
- Just Use Any
- How to Win Colleagues and Influence Your Boss
- TalkScript with the TypeScript Team
- Closing Remarks
TSConf 2019 | Seattle, Washington
Presentation
Pipeline
// 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"
Vue.js
// 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);
}
}
GraphQL
// 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 });
Sessions
Keynote
type Json = null | string | number | boolean | Json [] | { [name: string]: Json }
const exampleJson: Json = {
name: "TSConf",
year: 2019,
topics: ["TypeScript", "JavaScript", "Web Development"],
isAwesome: true
};
TypeScript at the Cutting Edge
// 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;
}
Don't Break the Contract: Keep Consistency with Full Stack Type Safety
// 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);
}
Binary Arithmetic in TypeScript's Type System
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)
Deno is a New Way to JavaScript
// 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!" });
}
Testing Types: An Introduction to dtslint
// Example of dtslint usage
// $ExpectType string
"hello".toUpperCase();
// $ExpectError
Math.round("not a number");
MakeCode Arcade with Static TypeScript
// 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)
Just Use Any
// 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
How to Win Colleagues and Influence Your Boss
// 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);
}
TalkScript with the TypeScript Team
// 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
Closing Remarks
// 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!");