Please help me understand typing behavior

[raven jungle]

import type {User, CustomFilter} from '../app'

const sort = (data: User[], filters: CustomFilter): User[] => {

  if(filters.length === 0) return data

  return data.sort((a,b)=> {
    for(const filter of filters){
      const {key, value} = filter;

      if (value === 'ASC') {
        if (a[key] < b[key]) return -1;
        if (a[key] > b[key]) return 1;
      } else if (value === 'DESC') {
        if (a[key] > b[key]) return -1;
        if (a[key] < b[key]) return 1;
      }
    }

    return 0;
  });
}

const settings: ['ASC', 'DESC'] = ['ASC', 'DESC']

sort.settings = settings;

console.log(sort.settings); // work

type CustomSortFunction = (data: User[], filters: CustomFilter) => User[];

type Sorts = {
  [SortFunctionName: string]: CustomSortFunction;
}

const sorts: Sorts = { sort };

console.log(sorts.sort.settings); // Don't see property "settings"
console.log(sorts.settings); // Property "settings" is available. I don't really understand why

Why am I getting an error at the line console.log(sorts.sort.settings); . But there is no error in the line console.log(sorts.settings);.

[agile crow]

sorts accepts any string as a key

hover over sorts.settings to see its actual type

[raven jungle]

Thank you I understood this.

But why I can't get property like this sorts.sort.settings?

[agile crow]

because CustomSortFunction doesn't have a key called settings

[bitter bear]

to answer the inverse question (why sorts.settings is available), a type that looks like this:

type Foo = { [x: string]: Bar }

has what's called an "index signature" (that's the part between [ and ]). what this type says is that you can index into of type Foo using any string and expect to get back a Bar. that's what -n- meant when they said "sorts accepts any string as a key"

"settings" isn't special in your original code. you can also do sorts.blah or sorts["some arbitrary string"] or even sorts["😂"] and see the same behavior. at runtime those will all give you back undefined (and if you enable the noUncheckedIndexedAccess compiler option then the type system will reflect this)

[raven jungle]

Thank you for such a detailed answer.

[rotund prawn]

Hmm, you assigned a settings property to sort

sort.settings = settings;
console.log(sort.settings); // work

So you can access .settings here.
But CustomSortFunction does have settings

type CustomSortFunction = (data: User[], filters: CustomFilter) => User[];

sorts.sort is type CustomSortFunction, so it doesn't have .settings.

If you want .settings on CustomSortFunction you can do

type CustomSortFunction = {
    (data: User[], filters: CustomFilter): User[];
    settings: ['ASC', 'DESC']
}

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnA3gVQM4qgGjgGEBXbGCEAMWABsY8BfOAMykrgHIA6bgegCGYMJwBQogMYQAduTjZo8ALxwAFABMBMAQC44OPAG0AuoRZ0GUbHtLlKNengCUeg1BNwlAPgzi4cYBZVc0crbloUaQBzGAALTyUVAAYnOCgUGBIoaThNbT80jKycvIFuBVhVVQF8ACMnb19-fxZoVSlZeBDLOAgWVgs8bCd0UWbmjrl0AGsUREIANwFaEhRmFW68AG4C8cC1JZW0RJVOAEEAZSJOVNHxvf7qw1nEYzgAHjha57njVPTMtk4ABaACMO3uzX2Txebx831h-yKQPBY3uzBQtFwAUeh1WCVOABEAKJXG5NSE4tQCH6vODw2l-QqAnJgiGU6E02EfL6MpEsuCoyGMNH+EWi5nFOBJdmMJw7cWTeC4GAwYDRaxwQznMmETgkslvFTay7XPUG67GcQVGDlDJqjWeeT29VRbA7SQyBQRcIQKKqG121Wu4ZbOB8PhwADu0Gm4iQqGIZAoIAuiioJGkEjVMidd2aGi0un0uHcpgGoU1thTDksLhLRmM7P8Kodbr0Jt1XAtnCt4oTaDTsGwebRhiHMAzWZz0gAcgIQCg9OQoK7jDZk5QJ1Ps8AZArxEr5IpNRORyp0MfYHBGB7JhAfbQ-QGT+VFEG26Hw5HCTJOMqUDQMB2FQWBEDgAAiVsQwgz1ZAfFBfX9G1sA-EN5W-OAAAUQLwJBIOgjUIICEcBCWOgBFqH04AASVyP94HSZZaHAzN1CGbRpHUaNYkQIA