Hacker News Reader

I've been using React + Redux + Typescript stack and I've been quite happy with it (It's hard for me to image how you could do big refactoring without TS).

The fact that components props are verified by compiler instantly when I type is a big win. I believe with PropTypes you can't specifically describe what is the shape of your data, for example object with property of such name and the value of this property is object with other concrete properties. Or array of objects with specific property. In pure react you only have "React.PropTypes.object" and "React.PropTypes.array" in TypeScript you can say "{ foo: string, bar : { fieldNum : number}}" or "{foo: string}[]".

Some other observations:

- I use Typescript 2.0 RC, because it has union types [0] and it works great with Redux reducers. It's super cool!

- I don't miss spread object operator that much, it would be nice but I'm fine with some utils function that can even verify that I "override" property that exist is source object[1] (I mean creating new object with changed properties)

- What I really miss is the ability to say that what is the return type of the method. There is "typeof" operator in typescript for telling what is the type of particular object, I would like something like "returntypeof". Because now I always need to write the type of an action and very often it could be inferred from action creator function. Or I need to write type to describe what will be returned by Redux's "mapStateToProps" function, and sometimes this object can be big.

[0] https://github.com/Microsoft/TypeScript/wiki/What's-new-in-T... [1] https://github.com/Microsoft/TypeScript/wiki/What's-new-in-T...

View on HN

const INCREMENT: "increment" = "increment"; const DECREMENT: "decrement" = "decrement"; interface Increment { type: typeof INCREMENT; payload: { inc: number; }; } interface Decrement { type: typeof DECREMENT; payload: { dec: number; }; } interface State { count: number; } type Actions = Increment | Decrement; function reducer(state: State, action: Actions) { switch (action.type) { case INCREMENT: { const { inc } = action.payload; return { count: state.count + inc }; } case DECREMENT: { const { dec } = action.payload; return { count: state.count + dec }; } default: return state; } }

const INCREMENT: "increment" = "increment"; const DECREMENT: "decrement" = "decrement"; function increment(inc: number) { return { type: INCREMENT, inc }; } function decrement(dec: number) { return { type: DECREMENT, dec }; } type Actions = returntypeof increment | returntypeof decrement;