thje GeodeList.map is not a function | TypeScript Community | Page 1

torn shore Jun 1, 2024, 7:07 PM

#

import * as GeodeData from "../../geodes.json" assert { type: "json" }

export const GeodeList = GeodeData as Array<Geode>

export interface Geode {
  name: string
  location: string
  price: GeodePrice
  drops: Array<GeodeDrop>
}

export interface GeodePrice {
  stat: string
  amount: number
}

export interface GeodeDrop {
  stat: string
  odds: number
}

export type GeodeName = typeof GeodeList[number]["name"]

// TypeError: GeodeList.map is not a function. (In 'GeodeList.map((geode) => geode.name)', 'GeodeList.map' is undefined)
export const getGeodeNames = (): Array<GeodeName> => GeodeList.map((geode) => geode.name)
export const getGeodeByName = (name: GeodeName): Geode | undefined => GeodeList.find((geode) => geode.name === name)

lusty stag Jun 1, 2024, 7:08 PM

#

👉 GeodeList.map is not a function
because GeodeList is undefined
because the import is not right

👉 json imports require a named import
because you are only importing one object
it's not some kind of namespace

#

so import GeodeData from "../../geodes.json" assert { type: "json" };

#

👉 also export type GeodeName = typeof GeodeList[number]["name"] won't give you the proper type you expect

#

since for GeodeList you used a cast

#

so GeodeList: Array<Geode>
so GeodeName: Array<Geode>[number]["name"]
so GeodeName: Geode["name"]
so GeodeName: string
and not literals

#

👉 a few other things:

use camelCase for variables names (geodeList)
you don't need to repeat the type when it can be inferred
you can use [] instead of Array<> (const geodeList: Geode[])

dark latchBOT Jun 1, 2024, 7:14 PM

#

ascor8522#0

Playground Link

Preview:```ts
import geodeData from "../../geodes.json" assert {type: "json"}

export interface Geode {
name: string
location: string
price: GeodePrice
drops: GeodeDrop[]
}

export interface GeodePrice {
stat: string
amount: number
}

export interface Geode
...```

lusty stag Jun 1, 2024, 7:14 PM

#

@torn shore

torn shore Jun 1, 2024, 7:23 PM

#

lusty stag 👉 a few other things: - use camelCase for variables names (`geodeList`) - you ...

i use what i want to smh :c
right
yeah ik I like Array<T> more

torn shore Jun 1, 2024, 7:25 PM

#

lusty stag <@1226476028893855754>

Hey removing the star worked, thanks!

#

ok

torn shore Jun 1, 2024, 7:26 PM

#

lusty stag 👉 `GeodeList.map` is not a function because `GeodeList` is `undefined` because...

Okay thank you, honestly that makes sense but the error didn't say anything even remotely close to the import being wrong

torn shore Jun 1, 2024, 7:26 PM

#

lusty stag 👉 also `export type GeodeName = typeof GeodeList[number]["name"]` won't give yo...

Hm

#

Then what to do if I want a union type of the names of geodes

lusty stag Jun 1, 2024, 7:27 PM

#

torn shore Okay thank you, honestly that makes sense but the error didn't say anything even...

because the import isn't "wrong"
it's only wrong in your case in the way you use it
but it leads some elements being undefined
which causes the issue somewhere else in the file

lusty stag Jun 1, 2024, 7:28 PM

#

torn shore Then what to do if I want a union type of the names of geodes

have a look at the playground link I sent

torn shore Jun 1, 2024, 7:28 PM

#

Wrong in the way I use it yes that's what I meant by wrong

torn shore Jun 1, 2024, 7:28 PM

#

lusty stag have a look at the playground link I sent

I did

#

I don't see any other big changes than the import

#

Ohhhh

#

I see now

lusty stag Jun 1, 2024, 7:29 PM

#

torn shore Wrong in the way I use it yes that's what I meant by wrong

I mean, that import is valid at compile time
but not at runtime
that's why the error seems unrelated

torn shore Jun 1, 2024, 7:29 PM

#

The variable is gone

#

well not gone but it's not where it was

#

and it's not casted anymore

lusty stag Jun 1, 2024, 7:29 PM

#

you can directly tap into the import
no need to copy it to some other variable tbh

lusty stag Jun 1, 2024, 7:30 PM

#

torn shore and it's not casted anymore

no but you still lose type info
no cast, but you still put the type on the variable

#

you could also have

export const geodeList = geodeData satisfies Geode[];
export type GeodeName = typeof geodeList[number]["name"];

torn shore Jun 1, 2024, 7:31 PM

#

I honestly forgot satisfies was even a thing cause I never even knew where and how to use it

lusty stag Jun 1, 2024, 7:31 PM

#

but tbh geodeList and geodeData are duplicate

torn shore Jun 1, 2024, 7:31 PM

#

Yeah but you can't export an import can you

lusty stag Jun 1, 2024, 7:31 PM

#

you could name your import geodeList and use it to get the names directly

lusty stag Jun 1, 2024, 7:31 PM

#

torn shore Yeah but you can't export an import can you

wdym?

#

import geodeList from "../../geodes.json" assert { type: "json" };
export type GeodeName = typeof geodeList[number]["name"];

#

but you don't really have a check using the satisifes operator
you changed the source of truth
from the satisfies Geode[] to the content of the JSON file

torn shore Jun 1, 2024, 7:33 PM

#

I don't know what satisfies is

#

Okay so

#

How do I make it so that getGeodeByName knows what names are valid

lusty stag Jun 1, 2024, 7:36 PM

#

torn shore I don't know what `satisfies` is

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator

Documentation - TypeScript 4.9

TypeScript 4.9 Release Notes

lusty stag Jun 1, 2024, 7:36 PM

#

torn shore How do I make it so that `getGeodeByName` knows what names are valid

gave you 3 different solutions already concernedfrog

torn shore Jun 1, 2024, 7:37 PM

#

Um

#

!!

lusty stag Jun 1, 2024, 7:37 PM

#

import geodeData from "../../geodes.json" assert { type: "json" };
const geodeList: Geode[] = geodeData;
export type GeodeName = typeof geodeData[number]["name"];
```or
```ts
import geodeData from "../../geodes.json" assert { type: "json" };
export const geodeList = geodeData satisfies Geode[];
export type GeodeName = typeof geodeList[number]["name"];
```or
```ts
import geodeList from "../../geodes.json" assert { type: "json" };
export type GeodeName = typeof geodeList[number]["name"];

which are all pretty similar

torn shore Jun 1, 2024, 7:38 PM

#

I have the first one rn tho

#

shut badge Jun 1, 2024, 7:41 PM

#

I think the first one will erase information because it is typed as Geode[], which is a mutable array type

#

The other 2 options might preserve the information. Although I haven't used JSON imports.

lusty stag Jun 1, 2024, 7:42 PM

#

shut badge I think the first one will erase information because it is typed as Geode[], whi...

first one uses geodeData as source
not geodeList
so no type is erased

shut badge Jun 1, 2024, 7:42 PM

#

oh

#

You're right

lusty stag Jun 1, 2024, 7:43 PM

#

1 and 2 provide some additional safety
checking what is imported before using it

while solution 3 doesn't and uses that as source of truth

torn shore Jun 1, 2024, 7:43 PM

#

2nd also doesn't work

shut badge Jun 1, 2024, 7:43 PM

#

So does TS type geodeData correctly based on the JSON file?

lusty stag Jun 1, 2024, 7:43 PM

#

yes

#

it can infer the type from the JSON content

shut badge Jun 1, 2024, 7:43 PM

#

torn shore 2nd also doesn't work

what type is the geodeData variable that you import?

lusty stag Jun 1, 2024, 7:44 PM

#

shut badge So does TS type geodeData correctly based on the JSON file?

wait, now you ask about it
not sure if strings are infered as literals or not think

torn shore Jun 1, 2024, 7:44 PM

#

It's JSON

lusty stag Jun 1, 2024, 7:44 PM

#

might actually be the problem here

torn shore Jun 1, 2024, 7:44 PM

#

It's an array of geodes like these

shut badge Jun 1, 2024, 7:44 PM

#

But what type is the variable

#

when you hover it

torn shore Jun 1, 2024, 7:44 PM

#

ah that

#

I think it just says import <name> waiat

#

Yeah

shut badge Jun 1, 2024, 7:45 PM

#

That's annoying

torn shore Jun 1, 2024, 7:45 PM

#

It is

shut badge Jun 1, 2024, 7:46 PM

#

Is the json file an array, with geodes in it?

#

yeah you said it is

#

Does it need to be json?

shut badge Jun 1, 2024, 7:48 PM

#

lusty stag might actually be the problem here

Yeah it seems that name is string, and all array entries are optional too

#

It's just { name: string }[]

torn shore Jun 1, 2024, 7:49 PM

#

shut badge Is the json file an array, with geodes in it?

yes

torn shore Jun 1, 2024, 7:49 PM

#

shut badge Does it need to be json?

Uh yeah

shut badge Jun 1, 2024, 7:49 PM

#

Will the JSON data change sometimes?

torn shore Jun 1, 2024, 7:49 PM

#

kinda big

torn shore Jun 1, 2024, 7:49 PM

#

shut badge Will the JSON data change sometimes?

Not while running no

shut badge Jun 1, 2024, 7:49 PM

#

JSON isn't smaller that JS, it's probably larger

shut badge Jun 1, 2024, 7:50 PM

#

torn shore Not while running no

Will it change while the program is not running, but without your updating the code?

torn shore Jun 1, 2024, 7:50 PM

#

No

shut badge Jun 1, 2024, 7:50 PM

#

OK

#

I think you just need to use a .js file instead

#

export const geodeList = [
  { name: 'foo },
  ...
] as const

#

the as const will give you more info

#

export default instead if you want to

#

JSON is valid JS, so you don't have to change anything with the data

torn shore Jun 1, 2024, 7:52 PM

#

Yeah I know it is, it just seems odd doing that

shut badge Jun 1, 2024, 7:52 PM

#

why?

#

Otherwise you need a way to get TS to infer the type of the JSON as const

#

https://stackoverflow.com/questions/60281175/import-json-file-as-const-in-typescript

Stack Overflow

Import JSON file as const in TypeScript

I would like to create a union type from a property of the elements of an array.
If the array were inline, that would be pretty straightforward using a constant assertion.

const arr = [{ "name": "...

#

https://www.npmjs.com/package/ts-json-as-const

npm

ts-json-as-const

A (very) simple CLI tool that reads JSON files and creates .d.ts files with their keys/values explicitly defined. Latest version: 1.0.7, last published: 3 years ago. Start using ts-json-as-const in your project by running npm i ts-json-as-const. There are no other projects in the npm registry using ts-json-as-const.

#

You can use a tool to generate d.ts files to describe your json. Or just do it the easy way

torn shore Jun 1, 2024, 7:54 PM

#

Hey let's go that worked

#

I stored it in a .ts file instead

shut badge Jun 1, 2024, 7:54 PM

#

yep

#

yeah ts/js whatever

torn shore Jun 1, 2024, 7:55 PM

#

Yeah

shut badge Jun 1, 2024, 7:55 PM

#

obviously it does need to be .ts with TypeScript

torn shore Jun 1, 2024, 7:55 PM

#

long error messages go hard now

#

lol

shut badge Jun 1, 2024, 7:55 PM

#

Gut

torn shore Jun 1, 2024, 7:56 PM

#

hol on how do I work this

shut badge Jun 1, 2024, 7:56 PM

#

you could accept string in getGeodeByName

#

then you have to search geodes to see if there is a match. I don't know how your lookup works

#

maybe you convert the array to an object somewhere

torn shore Jun 1, 2024, 7:58 PM

#

shut badge maybe you convert the array to an object somewhere

nah, it's just Array.find

shut badge Jun 1, 2024, 8:01 PM

#

so if you use (name: string) does that work?

#

It must just return undefined or something if it doesn't find it

torn shore Jun 1, 2024, 8:02 PM

#

Oh right

#

Yeah not today

#

Yeah I don't know what to do

shut badge Jun 1, 2024, 8:05 PM

#

show me the whole function

#

and error

#

A red line without context isn't helpful

torn shore Jun 1, 2024, 8:07 PM

#

export const getGeodeByName = (name: string): Geode | undefined => GeodeList.find((geode) => geode.name === name)

Type '{ readonly name: "Mint"; readonly location: "Minty Grooves"; readonly price: { readonly stat: "Mint"; readonly amount: 2000; }; readonly drops: readonly [{ readonly stat: "Mint"; readonly odds: 2; }, { readonly stat: "Alpha Point"; readonly odds: 2; }, ... 5 more ..., { ...; }]; } | ... 33 more ... | undefined' is not assignable to type 'Geode | undefined'.
  Type '{ readonly name: "Mint"; readonly location: "Minty Grooves"; readonly price: { readonly stat: "Mint"; readonly amount: 2000; }; readonly drops: readonly [{ readonly stat: "Mint"; readonly odds: 2; }, { readonly stat: "Alpha Point"; readonly odds: 2; }, ... 5 more ..., { ...; }]; }' is not assignable to type 'Geode'.
    Types of property 'drops' are incompatible.
      The type 'readonly [{ readonly stat: "Mint"; readonly odds: 2; }, { readonly stat: "Alpha Point"; readonly odds: 2; }, { readonly stat: "Chestnut"; readonly odds: 5; }, { readonly stat: "Bat"; readonly odds: 8; }, { ...; }, { ...; }, { ...; }, { ...; }]' is 'readonly' and cannot be assigned to the mutable type 'GeodeDrop[]'

shut badge Jun 1, 2024, 8:07 PM

#

seems to be a problem with your return type annotation

torn shore Jun 1, 2024, 8:08 PM

#

I guess

#

But like

#

that's what it returns

shut badge Jun 1, 2024, 8:08 PM

#

doesn't sem to be

torn shore Jun 1, 2024, 8:09 PM

#

I mean what else can ```ts
GeodeList.find((geode) => geode.name === name)

shut badge Jun 1, 2024, 8:09 PM

#

Maybe GeodeDrop[] should be readonly GeodeDrop[]

#

I don't know what the Geode type is

#

But, you can just remove the return type annotation, right?

torn shore Jun 1, 2024, 8:09 PM

#

import GeodeList from "../GeodeList"

export interface Geode {
  name: string
  location: string
  price: GeodePrice
  drops: Array<GeodeDrop>
}

export interface GeodePrice {
  stat: string
  amount: number
}

export interface GeodeDrop {
  stat: string
  odds: number
}

export type GeodeName = typeof GeodeList[number]["name"]

export const getGeodeNames = () => GeodeList.map((geode) => geode.name)
export const getGeodeByName = (name: string): Geode | undefined => GeodeList.find((geode) => geode.name === name)

shut badge Jun 1, 2024, 8:09 PM

#

and TS will infer the return type

torn shore Jun 1, 2024, 8:09 PM

#

shut badge But, you can just remove the return type annotation, right?

Then everything else breaks

shut badge Jun 1, 2024, 8:09 PM

#

really?

torn shore Jun 1, 2024, 8:09 PM

#

const geodeName = commandMessage.args[0]
const longNumbers = commandMessage.hasFlag("long-numbers")
const targetGeode = Geodes.getGeodeByName(geodeName)

if (!targetGeode) {
  await commandMessage.reply(BotMessage.create(Prefix.ERROR, INVALID_GEODE_NAME))
  return
}

await commandMessage.replyWithEmbed(this.getGeodeEmbed(targetGeode, longNumbers))

see this is one of the uses

shut badge Jun 1, 2024, 8:10 PM

#

export interface Geode {
  name: string
  location: string
  price: GeodePrice
  drops: Array<GeodeDrop>
}

to

export interface Geode {
  name: string
  location: string
  price: GeodePrice
  drops: readonly Array<GeodeDrop>
}

torn shore Jun 1, 2024, 8:10 PM

#

Yeah I tried that

#

it errors

#

one sec

shut badge Jun 1, 2024, 8:10 PM

#

Well you're gonna have to go through and fix errors until it works 🙂

torn shore Jun 1, 2024, 8:10 PM

#

'readonly' type modifier is only permitted on array and tuple literal types.ts(1354)

shut badge Jun 1, 2024, 8:10 PM

#

Oh

torn shore Jun 1, 2024, 8:10 PM

#

Yeah

shut badge Jun 1, 2024, 8:10 PM

#

ReadonlyArray<GeodeDrop> ?

torn shore Jun 1, 2024, 8:10 PM

#

Ooooh right

shut badge Jun 1, 2024, 8:10 PM

#

Because you are using the non standard Array helper

#

instead of just normal []

torn shore Jun 1, 2024, 8:11 PM

#

Niceee that works

torn shore Jun 1, 2024, 8:11 PM

#

shut badge Because you are using the non standard Array helper

Makes sense

shut badge Jun 1, 2024, 8:11 PM

#

readonly modifys arrays, but Array is a generic type that returns an array

#

So, yeah

torn shore Jun 1, 2024, 8:11 PM

#

dude

#

lol

shut badge Jun 1, 2024, 8:11 PM

#

duuuude

#

Yeah

#

because you accept string

torn shore Jun 1, 2024, 8:12 PM

#

ploxCrUCPMz8wlNkSRQm1Sg4IZr8WoXLxSB8qKV1V6jjeH1xZdCmOFfTxAanAAAA.png

#

right

shut badge Jun 1, 2024, 8:12 PM

#

but I think there is a trick

#

lemme see if I can find it

torn shore Jun 1, 2024, 8:12 PM

#

Thank you autocomplete, that's exactly what I wanted here

shut badge Jun 1, 2024, 8:13 PM

#

(name: string & GeodeName)

torn shore Jun 1, 2024, 8:13 PM

#

I just kinda casted it but I don't think that's the way to go...?

shut badge Jun 1, 2024, 8:13 PM

#

what happens now?

torn shore Jun 1, 2024, 8:13 PM

#

shut badge `(name: string & GeodeName)`

Hmm

#

Oh I tried a union but not an intersection interesting

shut badge Jun 1, 2024, 8:13 PM

#

or (name: string & GeodeName & {}

#

I'm sure there is a trick to making it autocomplete

torn shore Jun 1, 2024, 8:14 PM

#

it just ignores & string seemingly lol

#

isn't {} like any

shut badge Jun 1, 2024, 8:14 PM

#

https://twitter.com/mattpocockuk/status/1671908303918473217

Matt Pocock (@mattpocockuk) on X

By far the strangest TypeScript trick I've ever come across is the Loose Autocomplete trick.

No idea who discovered this, but it's become widely used by OSS wizards.

It's now even used by React's types to type attributes like aria-role.

#

right

#

GeodeName | (string & {})

shut badge Jun 1, 2024, 8:15 PM

#

shut badge `GeodeName | (string & {})`

this should be it

#

yeah & would require matching both, so it would erase string

torn shore Jun 1, 2024, 8:15 PM

#

Oh, that works!

shut badge Jun 1, 2024, 8:15 PM

#

Yeah thanks to Mr Pocock

torn shore Jun 1, 2024, 8:15 PM

#

Oooooohh!!

shut badge Jun 1, 2024, 8:15 PM

#

any whoever discovered the trick

torn shore Jun 1, 2024, 8:15 PM

#

I'm subbed to him

#

I remember his video about {} now

#

Nice dude, thanks

shut badge Jun 1, 2024, 8:18 PM

#

Another option is to check whether the input in a correct name before finding. This lets you make a find function that always returns a match, never undefined, which is quite nice

#

You would use a type guard function there probably

#

anyhow, I'm off

torn shore Jun 1, 2024, 8:19 PM

#

shut badge Another option is to check whether the input in a correct name before finding. T...

I mean I kinda tried but it always turned out horrible, so not today I guess

torn shore Jun 1, 2024, 8:19 PM

#

shut badge anyhow, I'm off

Bye, thanks for helping

shut badge Jun 1, 2024, 8:19 PM

#

Bye

shut badge Jun 1, 2024, 8:20 PM

#

torn shore I mean I kinda tried but it always turned out horrible, so not today I guess

function IsGeodeName(s: string): s is GeodeName {
  return (geodeNames.includes(s))
}

torn shore Jun 1, 2024, 8:21 PM

#

oh.

shut badge Jun 1, 2024, 8:21 PM

#

But you need to generate an array of geodeNames first

torn shore Jun 1, 2024, 8:21 PM

#

yeah that's the bad thing

#

that went bad

#

that was not good

shut badge Jun 1, 2024, 8:21 PM

#

I don't think you wannt to manually make a list here, too easy to make a mistake

torn shore Jun 1, 2024, 8:21 PM

#

yes

#

exactly

shut badge Jun 1, 2024, 8:21 PM

#

but you can generate a list from your data. You can also generate an object from your data.

#

Then you can have

const geodeObject = {
  "diamond": { ... }
}

#

then you don't need your findGeodeByName thing, because you can just write geodeObject.diamond

torn shore Jun 1, 2024, 8:22 PM

#

huh

#

ah

shut badge Jun 1, 2024, 8:22 PM

#

You just loop through your geodesList and make an object

#

But you probably need a mapped type to avoid losing info, which is a bit complicated to write at your level

torn shore Jun 1, 2024, 8:24 PM

#

aaa

#

gotta hate when languages don't magically start working the way you want them to

shut badge Jun 1, 2024, 8:25 PM

#

If you write your data (that was JSON) as an object to begin with, that's easier...

#

not sure if it needs to be an array

torn shore Jun 1, 2024, 8:25 PM

#

Why not

#

I mean the way I use it, apart from this, it would be better off as an array I think

#

Okay thanks you both, I'm good with what I have rn

lavish sequoia Jun 1, 2024, 9:49 PM

#

lusty stag so `import GeodeData from "../../geodes.json" assert { type: "json" };`

that's a default import, btw

shut badge Jun 1, 2024, 9:54 PM

#

Is there another way to import json?

#thje GeodeList.map is not a function