Repository navigation
Convert task list apps to TypeScript - #1
dianadenwik wants to merge 1 commit into
Conversation
| id: nextId++, | ||
| title: title, | ||
| completed: false, | ||
| createdAt: new Date() |
There was a problem hiding this comment.
Nice that you added the Date and also showing with toLocaleDateString()!
| list.appendChild(li); | ||
| }); | ||
| } | ||
|
|
There was a problem hiding this comment.
All function very typed, well done!
| const form = document.getElementById('task-form')as HTMLFormElement;; | ||
| const input = document.getElementById('task-input')as HTMLInputElement; | ||
| const list = document.getElementById('task-list')as HTMLUListElement; | ||
| const emptyMessage = document.getElementById('empty-message')as HTMLParagraphElement; |
There was a problem hiding this comment.
Nice in using the HTML types. I would only remove the double semi-colon in line 16 and and a space before as
| const form = document.getElementById('task-form')as HTMLFormElement;; | |
| const input = document.getElementById('task-input')as HTMLInputElement; | |
| const list = document.getElementById('task-list')as HTMLUListElement; | |
| const emptyMessage = document.getElementById('empty-message')as HTMLParagraphElement; | |
| const form = document.getElementById('task-form') as HTMLFormElement; | |
| const input = document.getElementById('task-input') as HTMLInputElement; | |
| const list = document.getElementById('task-list') as HTMLUListElement; | |
| const emptyMessage = document.getElementById('empty-message') as HTMLParagraphElement; |
| id: number | ||
| title: string | ||
| completed: boolean | ||
| createdAt: Date |
There was a problem hiding this comment.
Add a tab here to follow the formatting. I see also that in some places of your files you use semicolon, and others not. Define a pattern is always good for readbility
| }); | ||
|
|
||
| const date = document.createElement('small'); | ||
| date.textContent = task.createdAt.toLocaleDateString() |
| @@ -0,0 +1,23 @@ | |||
| { | |||
| "compilerOptions": { | |||
There was a problem hiding this comment.
A tip for TS configuration: when addinf the propery strict: true and will get all the null returns and this secures that all functions has a type linked
There was a problem hiding this comment.
The build generates asset paths as /assets/index.js (absolute), which breaks when dist/index.html is opened and that doesn't root at the project folder. Adding a vite.config.ts with base: './' fixes this so the built app works anywhere:
import { defineConfig } from 'vite'
export default defineConfig({
base: './',
})
rafasilpereira
added
the
Reviewed
2 participants
No description provided.