Typescript typeof invalid formatting

[dfadev]

Prettier 2.8.3
Playground link

--parser typescript
--no-semi
--single-quote
--jsx-single-quote

Input:

function a() {
  const animals = [
  	{ species: 'cat', name: 'Fluffy' },
  	{ species: 'dog', name: 'Fido' },
  	{ species: 'mouse', name: 'Trevor' }
  ] as const
  
  type Animal = typeof animals[number]['species']
  // type Animal = "cat" | "dog" | "mouse"  
}

Output:

function a() {
  const animals = [
    { species: 'cat', name: 'Fluffy' },
    { species: 'dog', name: 'Fido' },
    { species: 'mouse', name: 'Trevor' },
  ] as const

  type Animal = (typeof animals)[number]['species']
  // type Animal = "cat" | "dog" | "mouse"
}

Expected behavior:

function a() {
  const animals = [
    { species: 'cat', name: 'Fluffy' },
    { species: 'dog', name: 'Fido' },
    { species: 'mouse', name: 'Trevor' },
  ] as const

  type Animal = (typeof animals[number]['species'])
  // type Animal = "cat" | "dog" | "mouse"
}

see also https://steveholgado.com/typescript-types-from-arrays/

[fisker]

This change is intended, see #13546 and #14042

[EladBezalel]

@fisker it will be much appreciated if we could have a config to disable this rule,
ATM lints are failing on unchanged files since this change was introduced

[sosukesuzuki]

@EladBezalel Could you show us codes that was broken by this change? This change is a just bug fix, so I'm wonder why your code is broken.

[EladBezalel]

The code has typeof·HANDLED_KEYS and now after upgrading deps we get these kind of errors

error  Replace `typeof·HANDLED_KEYS` with `(typeof·HANDLED_KEYS)`  prettier/prettier

on files that didn't changed

[kachkaev]

@EladBezalel this is expected after upgrading from 2.8.2 to 2.8.3. See see #13546 and #14042.

[EladBezalel]

i understand this is expected, i suggest a config to disable it

[kachkaev]

New config is not planned, according to the Prettier’s Option Philosophy. If you use Prettier via ESLint, I guess you can apply some fixes post-Prettier. However, it might be best to just stick with the new (improved) behavior and thus keep the codebase in sync with the community. It’s not so much about better or worse, it’s more about the same everywhere.

[graup]

As far as I can tell, #13546 doesn't provide any reasoning what's bad about type A = typeof foo[number], could someone help me? There's this comment but it doesn't give a reason against the no-braces version.

I'm not against this, just curious why it is needed. (Would make sense to comment on the issue, but it is sadly locked.)

[fisker]

type  a = typeof a[a];
const a = typeof a[a];

This is confusing for ts beginner.

[graup]

I guess I can see how there is a small difference in readability.

// Before
const a = [1];
const B = typeof a[0];  // B = 'number'
type A = typeof a[number];  // type A = number

// After
const a = [1];
const B = typeof a[0];
type A = (typeof a)[number];

But was there any data suggesting people found it confusing? Seems a bit arbitrary to just change this based on a hunch.

[fisker]

I'm the beginner, prettier/yaml-unist-parser#281 (comment)

[graup]

Thanks, appreciate the history!

const tuple = ['a', 'b'] as const;
type T = typeof tuple[number];

This is a pretty common pattern in TS, so a lot of people that installed Prettier in the last 3 years and update now will be wondering why they have to update their code :D