I'm working on a new NextJS project w/ Typescript and Tailwind CSS. I'm working on Mac Ventura 13.3.1.
I am importing dummy used data via the jsonplaceholder API.
In my users/page.tsx component, I am importing users and displaying their name and email.
import React from 'react'interface User { id: number name: string}const UsersPage = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users', { cache: 'no-store' } ) const users: User[] = await res.json() return (<><h1>Users</h1><p>{new Date().toLocaleTimeString()}</p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody> {users.map(user => <tr key={user.id}><th>{user.email}</th></tr>)}</tbody></table></> )}export default UsersPage
Notice that the User interface does not have email
set to a string type. However, my code still compiles and user emails are being displayed on the screen. My understanding of Typescript is that this shouldn't be happening without explicitly declaring the shape of the User object.
I'm also noticing that when I hover over User[]
, I do not get an intellisense popup displaying the type signature. All of this is leading me to think that VSCode is not set up to recognize Typescript.
I have the following relevant extensions installed:
Babel ES6/ES7DaisyUISnippetES7+ React/Redux/React-Native snippetsGitHub CopilotJavascript Snippet PackJavascript and Typescript NightlyTailwind CSS IntellisenseSimple React Snippets
My tsconfig.json looks like this:
{"compilerOptions": {"target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"strict": true,"noEmit": true,"esModuleInterop": true,"module": "esnext","moduleResolution": "bundler","resolveJsonModule": true,"isolatedModules": true,"jsx": "preserve","incremental": true,"plugins": [ {"name": "next" } ],"paths": {"@/*": ["./*"] } },"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],"exclude": ["node_modules"]}
And my package.json looks like this:
{"name": "next-app-2","version": "0.1.0","private": true,"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint" },"dependencies": {"@types/node": "20.10.1","@types/react": "18.2.39","@types/react-dom": "18.2.17","autoprefixer": "10.4.16","eslint": "8.54.0","eslint-config-next": "14.0.3","next": "14.0.3","postcss": "8.4.31","react": "18.2.0","react-dom": "18.2.0","tailwindcss": "3.3.5","typescript": "5.3.2" }}