loganhenson
5/24/2017 - 8:50 PM

typescript meetup notes.tsx

/*import * as React from "react";
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Store, createStore } from 'redux';

import App from './containers/App';
import reducer from './data/reducer';
import { Model, initialState } from './data/model';

const store: Store<Model> = createStore(reducer, initialState);

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);

ReactDOM.render(app, document.getElementById('app'));*/

// ---------
// Type Annotations
// similar to "type hints" in other languages (php, python)
// makes the contract of a function more explicit, and can show you
// errors with your code at compile time (try giving greeter a non-string)

// function greeter(person: string) : string {
//     return 1;
// }
// var user = "Jane User";

// document.body.innerHTML = greeter(user);

// ---------
// Interfaces
// You may recognize this from other languages as well (php, C#),
// although we don't have to explicitly "implement" the interface.
// Duck typing just like normal javascript, 
// but we can catch non-ducks at compile time!

// interface Person {
//     firstName: string;
//     lastName: string;
//     readonly speak?: () => string;
// }






// function greeter(person: Person) {
//     return "Hello, " + person.firstName + " " + person.lastName;
// }

// var user = { firstName: "Jane", lastName: "User" };

// document.body.innerHTML = greeter(user);

// ---------
// Interfaces (Advanced)
// try extending Dog!
// interface Corgi {
//     tail: true,
//     dog: Dog
// }

// interface Dog {
//     fur: true,
//     legs: 4,
// }

// let pupper: Corgi = {tail: true, dog: {fur: true, legs: 4}}

let dogs = [{name: "a"}, {name: "b"}]

dogs.find(dog => dog.name === "b");


// ---------
// Classes (Finally!)
// Classes are actually a feature of ES2015, but typescript
// makes them a bit more powerful.
// TypeScript actually supports visibility! How can we hide the internals of this class a bit?
// class Student {
//     public fullName: string;
//     public firstName: string;
//     public middleInitial: string;
//     public lastName: string;

//     constructor(firstName, middleInitial, lastName) {
//         this.fullName = firstName + " " + middleInitial + " " + lastName;
//     }
// }

// interface Person {
//     firstName: string;
//     lastName: string;
// }

// // here we used a Type Annotation with a Class name instead of a
// // primitive data type (string/int...)
// // This is our first example of making our own types!
// function greeter(person : Person) {
//     return "Hello, " + person.firstName + " " + person.lastName;
// }

// var user = new Student("Jane", "M.", "User");

// document.body.innerHTML = greeter(user);

// ---------
// Enum Type (You may recognize from C#)
// enum Color {Red, Green, Blue};
// // Type annotation, and assigning index to a name
// // Red 0, Green 1, Blue 2
// let c: Color = Color.Red;
// console.log(c);
// lets go backwards
// console.log(Color[3]);

// ---------
// Any Type
// let notSure: any = 4;
// notSure = "maybe a string instead";
// notSure = false;
// look ma, this is like typescript, without the types?
// in all seriousness this should not be used
// unless you have a _really_ good reason

// ---------
// Type Assertions
// let someValue: any = "this is a string";
// lets get the length, but we are unsure of the API
// and/or we want to make sure the compiler knows the type
// someValue -> (someValue as string)
// let strLength: number = (someValue as string).length;

// ---------
// Lets make our own Types! (Aliases at lease)
// type score = string
// let highScore: score = 12;

// ---------
// Our own types! (Advanced)
// interface Tabby {
//     fur: "patchy"
// }

// interface BlueRussian {
//     fur: "gray"
// }

// // Union Types!
// type breed = Tabby | BlueRussian;

// // make this work!
// let kitteh: breed = {fur: "patchy"};

// ---------
// interface mac {
//     expensive: true
// }

// interface computer {
//     pushesBits: true
// }

// type computable = mac & computer;

// // how would we make this superComputer?
// let superComputer: computable = {expensive: true, pushesBits: true}

// ---------
// Generics!!! XDXD - joseph
// interface pupper {doge: true};
// interface cat {doge: false};


// interface collection<T, T2> {
//     items: [T],
//     cats: [T2]
//     length: number
// }

// let numberCollection: collection<pupper, cat> = {items: [{doge: true}],cats: [{doge: false}], length: 1};