5 ms·

I am a (very) hobbyist web dev, almost always working with vanilla HTML+JS. I seeing a while lot of people here who are saying that Typescript is an absolute mu

I am a (very) hobbyist web dev, almost always working with vanilla HTML+JS. I seeing a while lot of people here who are saying that Typescript is an absolute must. As someone who has no clue, and with all do respect, why would TypeScript be worth moving from just hitting save to introducing a build system and dependencies?

gameswithgo 6y ago
in your use case it probably isn’t worth it. if you get a bigger project where you are using webpack and npm already, maybe it would be.
xupybd 6y ago
Hobby projects are served very well by js. Commercial ones not so much. Big teams with a mix of Personalities mean you get lots of errors and problems organising code. Typescript makes that a little more manageable.
acemarke 6y ago
I talked extensively about the pros, cons, and tradeoffs in my post "Learning TypeScript as an App Dev and Library Maintainer": https://blog.isquaredsoftware.com/2019/11/blogged-answers-learning-and-using-typescript/ https://blog.isquaredsoftware.com/2019/11/blogged-answers-le...
runarberg 6y ago
I have been using TypeScript in JS[1] mostly seamlessly. Types are annotated using doc comments above the thing your annotating. It is a bit hard to define complex types. E.g. I couldn’t for the life of me annotate the return value of the pipe function: function pipe(init, ...ops) { return ops.reduce((acc, op) => op(acc), init) } For these instances they suggest writing a declaration file[2]. However I have found the documentation isn’t really clear on this usecase (in fact I find the documentation of TypeScript somewhat lacking in general). But overall getting these typehints into my editor environment has been worth it. And I haven’t had to sacrifice the save → run workflow. 1: https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html https://www.typescriptlang.org/docs/handbook/type-checking-j... 2: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html https://www.typescriptlang.org/docs/handbook/declaration-fil... EDIT: An example annotated JS file for typescript: https://github.com/runarberg/strawberry-router/blob/master/src/elements/router-view.js https://github.com/runarberg/strawberry-router/blob/master/s... `npm run check` just runs typescript’s type checker, there is no compile step.
- bgschiller 6y ago
  > E.g. I couldn’t for the life of me annotate the return value of the pipe function Don't feel bad, no one can do that (yet! I think it should be possible with Variadic Tuple Types, coming in TS 4). There are a couple of attempts[1][2], but they all lack in some way. Redux does it with a boatload of overloads [3]. 1: https://dev.to/ascorbic/creating-a-typed-compose-function-in-typescript-3-351i https://dev.to/ascorbic/creating-a-typed-compose-function-in... 2: https://stackoverflow.com/a/53066700/1586229 https://stackoverflow.com/a/53066700/1586229 3: https://github.com/reduxjs/redux/blob/686d29b5d4e2dcb6709c16e31b79ecde90763156/index.d.ts#L451-L541 https://github.com/reduxjs/redux/blob/686d29b5d4e2dcb6709c16...
- xsmasher 6y ago
  If I understand your pipe function correctly - it takes an init value and a series of functions that map a type T to the same type T - then this should do it. function pipe<T>(init: T, ...ops: ((x: T) => T)[]): T{ let r:T = ops.reduce((acc:T, op) => op(acc), init); return r; } I had 5 years experience fixing type errors in C++; typescript seems like a dream in comparison. Edit: I just realized your operations probably DON'T return the same type that they are passed; they probably work in a chain like (t:T) => U, then (u:U) => V, etc. Nevermind!
  - runarberg 6y ago
    Yup, the annotation should be something like: type Ops<T, R, N> = [ (x: T) => N[0], ...<n>((x: N[n]) => N[n + 1]), (x: N.last) => R, ]; function pipe<T>(init: T): T; function pipe<R, T, Ops>(init: T, ...ops: ...Ops<T, R>): R;
cageface 6y ago
I get almost as much benefit from the rigorous null checking in TS as I do from the typing. I would use it for that alone.
TiredGuy 6y ago
As someone who has used all kinds of tooling and typescript too but still goes back to vanilla js when possible, I relish being able to just hit save and refresh. Build steps and hot-reloading are annoying and complex, and with large projects they can sometimes become slow and frustrating. Please don't feel pressured to make your code more defensive by switching to a typed language. There is often a tendency to make things more complex in the name of safety especially when there's typing involved, and it's not always the right answer. Clean, readable, maintainable code can exist in dynamically typed programming languages, and don't let anyone tell you differently. The right balance between over- and under- engineering is something that changes based on who you work with and for, what you're truly trying to accomplish, when you need it by, how quickly you can iterate, and your own personal feelings of safety and joy of programming.

gameswithgo 6y ago

in your use case it probably isn’t worth it. if you get a bigger project where you are using webpack and npm already, maybe it would be.

xupybd 6y ago

Hobby projects are served very well by js. Commercial ones not so much. Big teams with a mix of Personalities mean you get lots of errors and problems organising code. Typescript makes that a little more manageable.

acemarke 6y ago

I talked extensively about the pros, cons, and tradeoffs in my post "Learning TypeScript as an App Dev and Library Maintainer": https://blog.isquaredsoftware.com/2019/11/blogged-answers-learning-and-using-typescript/ https://blog.isquaredsoftware.com/2019/11/blogged-answers-le...

runarberg 6y ago

I have been using TypeScript in JS[1] mostly seamlessly. Types are annotated using doc comments above the thing your annotating. It is a bit hard to define complex types. E.g. I couldn’t for the life of me annotate the return value of the pipe function: function pipe(init, ...ops) { return ops.reduce((acc, op) => op(acc), init) } For these instances they suggest writing a declaration file[2]. However I have found the documentation isn’t really clear on this usecase (in fact I find the documentation of TypeScript somewhat lacking in general). But overall getting these typehints into my editor environment has been worth it. And I haven’t had to sacrifice the save → run workflow. 1: https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html https://www.typescriptlang.org/docs/handbook/type-checking-j... 2: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html https://www.typescriptlang.org/docs/handbook/declaration-fil... EDIT: An example annotated JS file for typescript: https://github.com/runarberg/strawberry-router/blob/master/src/elements/router-view.js https://github.com/runarberg/strawberry-router/blob/master/s... `npm run check` just runs typescript’s type checker, there is no compile step.

bgschiller 6y ago
> E.g. I couldn’t for the life of me annotate the return value of the pipe function Don't feel bad, no one can do that (yet! I think it should be possible with Variadic Tuple Types, coming in TS 4). There are a couple of attempts[1][2], but they all lack in some way. Redux does it with a boatload of overloads [3]. 1: https://dev.to/ascorbic/creating-a-typed-compose-function-in-typescript-3-351i https://dev.to/ascorbic/creating-a-typed-compose-function-in... 2: https://stackoverflow.com/a/53066700/1586229 https://stackoverflow.com/a/53066700/1586229 3: https://github.com/reduxjs/redux/blob/686d29b5d4e2dcb6709c16e31b79ecde90763156/index.d.ts#L451-L541 https://github.com/reduxjs/redux/blob/686d29b5d4e2dcb6709c16...
xsmasher 6y ago
If I understand your pipe function correctly - it takes an init value and a series of functions that map a type T to the same type T - then this should do it. function pipe<T>(init: T, ...ops: ((x: T) => T)[]): T{ let r:T = ops.reduce((acc:T, op) => op(acc), init); return r; } I had 5 years experience fixing type errors in C++; typescript seems like a dream in comparison. Edit: I just realized your operations probably DON'T return the same type that they are passed; they probably work in a chain like (t:T) => U, then (u:U) => V, etc. Nevermind!
- runarberg 6y ago
  Yup, the annotation should be something like: type Ops<T, R, N> = [ (x: T) => N[0], ...<n>((x: N[n]) => N[n + 1]), (x: N.last) => R, ]; function pipe<T>(init: T): T; function pipe<R, T, Ops>(init: T, ...ops: ...Ops<T, R>): R;

cageface 6y ago

I get almost as much benefit from the rigorous null checking in TS as I do from the typing. I would use it for that alone.

TiredGuy 6y ago

As someone who has used all kinds of tooling and typescript too but still goes back to vanilla js when possible, I relish being able to just hit save and refresh. Build steps and hot-reloading are annoying and complex, and with large projects they can sometimes become slow and frustrating. Please don't feel pressured to make your code more defensive by switching to a typed language. There is often a tendency to make things more complex in the name of safety especially when there's typing involved, and it's not always the right answer. Clean, readable, maintainable code can exist in dynamically typed programming languages, and don't let anyone tell you differently. The right balance between over- and under- engineering is something that changes based on who you work with and for, what you're truly trying to accomplish, when you need it by, how quickly you can iterate, and your own personal feelings of safety and joy of programming.