i am new to the typescript/javascript frontend world. I have a vue project with typescript enabled.
I am trying to declare a simple typed object and then console.log it to look whats inside. It looks like this:
// an option is a single option that is selectable in the dropdown list
type optionItem = {
value: string | number
label: string
}
// an optionsCategory has an array of options and also includes a title for that category and some settings
type optionsCategory = {
title: string
options: optionItem[]
defaultSelection?: optionItem
isMultiSelect?: boolean
}
const testObject: optionsCategory = {
title: "Test",
options: [
{
value: "1",
label: "Option 1",
},
{
value: "2",
label: "Option 2",
},
],
}
console.log(testObject)
console.log(testObject.options)
The output looks like this.
In the first output console.log(testObject)
, the options array is empty. In the second, it is filled console.log(testObject.options)
. Why is that so?
I also tried it out in basic typescript projekt in codesandbox, there it just works: https://codesandbox.io/s/goofy-voice-lk2x32?file=/src/index.ts
These are the dependencies from the vue-project from the package.json, if its relevant.
"dependencies": {
"@mdi/font": "7.0.96",
"@mrolaolu/helpers": "^0.3.2",
"axios": "^1.3.4",
"date-fns": "^2.29.3",
"dotenv": "^16.0.3",
"haversine-distance": "^1.2.1",
"pocketbase": "^0.11.0",
"prettier": "^2.8.4",
"prettier-plugin-tailwindcss": "^0.2.4",
"roboto-fontface": "*",
"swiper": "^9.1.0",
"throttle-debounce": "^5.0.0",
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vuex": "^4.1.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@types/throttle-debounce": "^5.0.0",
"@vitejs/plugin-vue": "^4.0.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"sass": "^1.55.0",
"tailwindcss": "^3.2.7",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"
}