3 ms·

Because AirBnB's ESLint config has been burned into my brain I almost only use arrow functions. I also use generics extremely often. It's definitely a little mo

by culi 11mo ago

Because AirBnB's ESLint config has been burned into my brain I almost only use arrow functions. I also use generics extremely often. It's definitely a little more clunky but I haven't run into anything you can do in TypeScript that you can't do in JSDoc. JSDoc also allows you to type stuff in-line. For example I often have to type an empty array like so: const [books, setBooks] = useState(/** @type {Book[]} */([])); If you have a tangible example of a problem you've run into, I'd love to walk through it.

g947o 11mo ago
JavaScript example: https://www.typescriptlang.org/play/?filetype=js#code/PTAEAEBcGcFoGMAWBTeBrAUB4AqHHQcJJkBbABwBsBDE0AFQKPHmssoCNr1QB1AS0iIAMgHsA5uP4A7cQGE2nbpkIRy1AE7VSoAN4AzAK7T4kfqOkAKAJQAuegF9Qrdl3RMIG5JEMbp0PUcmYCxcfFUoMipaZAYPKABPcljdASExSRl5RTc0AB56AD4HYIx4C2hIUAB3QREJKVlQAF5QfRbCvQJQHvL-UUpkADpKCUsAclHM2QBCcetu3oqqr2hDSirW-RsAbkXQLx8-A+Q1jb2HPYwjEzMLUHFvAC1kDVFQGy6ensPfaVAAAwXUJ4eLqLQ6VJ1DKNbKuZROADaU1hzVq6QaWQAuvFfn4ArppIZSBxXiVCCEbqZzP8ACaiXiiDRoD4orItGrQzGyaxfb54-5s2SWR6QF5vawXIA https://www.typescriptlang.org/play/?filetype=js#code/PTAEAE... Almost equivalent typescript code: https://www.typescriptlang.org/play/?#code/C4TwDgpgBA6glsAFgGQPYHN1wHboMICGANkQEYEDGA1lALxQA8AKgHwAUFxZlVAXFGwCUdFlCbDaopgG4AULIqpsAZ2BQA7ghQYsufvCRpMOfF3LU6UAGYioAb1lQnURStREIAOiIY2Ach9jXABCP0FHZ1dVKAAnCGUAVyI1eishOWdYiGAEmOwsxOS5AF95KwTsCmA4JSh0bIAtCBjUAWEHTLicvKgABhKyiqqa-IATVBhUGJo2QN10fS0jecIScxp6TUMdE3aIpy7c-LmTNnrgJpbBEqA https://www.typescriptlang.org/play/?#code/C4TwDgpgBA6glsAFg... (I had to make it a little bit different from the JS code to make it compile) (Well, this is not exactly about arrow function I guess. I remembered that part wrong.) Note that I cannot make the type check in JS code to pass. Whatever I do, there is always a error. Meanwhile, it does not take much to TS code to work.
- culi 11mo ago
  Try this out. I think it's a much more faithful representation of your TypeScript example too. JSDoc just wants you to be explicit about the default for generic slots (which is `unknown` in TypeScript). https://www.typescriptlang.org/play/?filetype=js#code/PTAEAEBcGcFoGMAWBTeBrAUB4AqHHQcJJkBbABwBsBDE0AbQBUBeAVwDs12B7Ad3YC6BIlACe5ZABNkAM1ABvADyMAfAAp41SpQBG1dAC5QagJShmK0IzMWrAX1AB1AJaREAGW4BzL8-ZeAYS1dfTRlFWFgLFwRSHFkBRc3Tx8-QOC9dAccKPhudmhIUF5XD29ff3NQGQ54c0t5AlBmvILuSmQAOkpvNQByHtT-AEI+kyaW-MLQACdkaFZKIuZq2tMAbgnZ5EhWGfZthaXNu02MGvZ4SGd80C8dgC1kGe5jM0bm5rnd-dAABhO0Twwgg5GoM2opESpRSFXS2kyaAc9EGcOYJWS5TSQkIEG+ewKCnYrFIOmedki51q11ukm4jm4MzQxlRaSqGLKQy87y2+N+rP8anukCeLxMJyAA https://www.typescriptlang.org/play/?filetype=js#code/PTAEAE... Hover over the variables and you should see that the type inference is working just the same as in your TypeScript example
  - g947o 11mo ago
    Ah I see. Looks like you avoided using the "@callback" tag but instead used the "@typedef" tag directly. Thanks! I do think it illustrates a problem with TypeScript's support for JSDoc though. You see, I started with the code in JS and could not make it work, after which I translated it to TS. In JS/JSdoc, "@callback" is the "idiomatic" way of defining a function callback type with JSDoc. (It also makes it easier to add documentation for each parameter if necessary.) And indeed, @callback works the most of the time, except in such cases where these JSDoc tags don't work nicely together, and these alternatives become necessary.
    - culi 11mo ago
      This is absolutely a fair point. JSDoc predates TypeScript by over a decade. It's not until more recently that the syntaxes have started to converge. My brain definitely works in TypeScript so I tend to translate from there. I definitely consider myself more familiar with TypeScript than with JSDoc, but sometimes (e.g. here) that's a benefit not a weakness

by culi 11mo ago

g947o 11mo ago

JavaScript example: https://www.typescriptlang.org/play/?filetype=js#code/PTAEAEBcGcFoGMAWBTeBrAUB4AqHHQcJJkBbABwBsBDE0AFQKPHmssoCNr1QB1AS0iIAMgHsA5uP4A7cQGE2nbpkIRy1AE7VSoAN4AzAK7T4kfqOkAKAJQAuegF9Qrdl3RMIG5JEMbp0PUcmYCxcfFUoMipaZAYPKABPcljdASExSRl5RTc0AB56AD4HYIx4C2hIUAB3QREJKVlQAF5QfRbCvQJQHvL-UUpkADpKCUsAclHM2QBCcetu3oqqr2hDSirW-RsAbkXQLx8-A+Q1jb2HPYwjEzMLUHFvAC1kDVFQGy6ensPfaVAAAwXUJ4eLqLQ6VJ1DKNbKuZROADaU1hzVq6QaWQAuvFfn4ArppIZSBxXiVCCEbqZzP8ACaiXiiDRoD4orItGrQzGyaxfb54-5s2SWR6QF5vawXIA https://www.typescriptlang.org/play/?filetype=js#code/PTAEAE... Almost equivalent typescript code: https://www.typescriptlang.org/play/?#code/C4TwDgpgBA6glsAFgGQPYHN1wHboMICGANkQEYEDGA1lALxQA8AKgHwAUFxZlVAXFGwCUdFlCbDaopgG4AULIqpsAZ2BQA7ghQYsufvCRpMOfF3LU6UAGYioAb1lQnURStREIAOiIY2Ach9jXABCP0FHZ1dVKAAnCGUAVyI1eishOWdYiGAEmOwsxOS5AF95KwTsCmA4JSh0bIAtCBjUAWEHTLicvKgABhKyiqqa-IATVBhUGJo2QN10fS0jecIScxp6TUMdE3aIpy7c-LmTNnrgJpbBEqA https://www.typescriptlang.org/play/?#code/C4TwDgpgBA6glsAFg... (I had to make it a little bit different from the JS code to make it compile) (Well, this is not exactly about arrow function I guess. I remembered that part wrong.) Note that I cannot make the type check in JS code to pass. Whatever I do, there is always a error. Meanwhile, it does not take much to TS code to work.

culi 11mo ago
Try this out. I think it's a much more faithful representation of your TypeScript example too. JSDoc just wants you to be explicit about the default for generic slots (which is `unknown` in TypeScript). https://www.typescriptlang.org/play/?filetype=js#code/PTAEAEBcGcFoGMAWBTeBrAUB4AqHHQcJJkBbABwBsBDE0AbQBUBeAVwDs12B7Ad3YC6BIlACe5ZABNkAM1ABvADyMAfAAp41SpQBG1dAC5QagJShmK0IzMWrAX1AB1AJaREAGW4BzL8-ZeAYS1dfTRlFWFgLFwRSHFkBRc3Tx8-QOC9dAccKPhudmhIUF5XD29ff3NQGQ54c0t5AlBmvILuSmQAOkpvNQByHtT-AEI+kyaW-MLQACdkaFZKIuZq2tMAbgnZ5EhWGfZthaXNu02MGvZ4SGd80C8dgC1kGe5jM0bm5rnd-dAABhO0Twwgg5GoM2opESpRSFXS2kyaAc9EGcOYJWS5TSQkIEG+ewKCnYrFIOmedki51q11ukm4jm4MzQxlRaSqGLKQy87y2+N+rP8anukCeLxMJyAA https://www.typescriptlang.org/play/?filetype=js#code/PTAEAE... Hover over the variables and you should see that the type inference is working just the same as in your TypeScript example
- g947o 11mo ago
  Ah I see. Looks like you avoided using the "@callback" tag but instead used the "@typedef" tag directly. Thanks! I do think it illustrates a problem with TypeScript's support for JSDoc though. You see, I started with the code in JS and could not make it work, after which I translated it to TS. In JS/JSdoc, "@callback" is the "idiomatic" way of defining a function callback type with JSDoc. (It also makes it easier to add documentation for each parameter if necessary.) And indeed, @callback works the most of the time, except in such cases where these JSDoc tags don't work nicely together, and these alternatives become necessary.
  - culi 11mo ago
    This is absolutely a fair point. JSDoc predates TypeScript by over a decade. It's not until more recently that the syntaxes have started to converge. My brain definitely works in TypeScript so I tend to translate from there. I definitely consider myself more familiar with TypeScript than with JSDoc, but sometimes (e.g. here) that's a benefit not a weakness