javascript - Bästa praxis för att deklarera eller tilldela typer

Jag är nybörjare med TypeScript (dag 1), men har arbetat med ovanligt avancerade JavaScript-projekt. Jag letar efter råd om några "bästa praxis" och standarder när det gäller att deklarera eller tilldela typer i kod. Just nu märker jag att jag gör det för bokstavligen allt, vilket i princip gör min kod oläslig.

Till exempel, överväg detta:

import {createApp, DefineComponent} from 'vue'
import {createRouter, createWebHistory, Router, RouteRecordRaw, RouterHistory} from 'vue-router'
import NPage from '~/layouts/N-Page.vue'
const router : Router = createRouter({
  history: <RouterHistory>createWebHistory(),
  routes: <RouteRecordRaw[]>[{
    component: <DefineComponent>NPage,
    name: <string>'home',
    path: <string>'/',
  }]
})
createApp(NPage).use(router).mount('#app')

Detta är en enkel main.ts-uppsättning för Vue.js. Nu kunde min IDE (IntelliJ IDEA) själv avgöra typen för router. Jag gick dock vidare och deklarerade typen uttryckligen. Detsamma gäller history, routes, osv. Vad som är värre, är att jag upptäcker att jag deklarerar typen för varje enskild egenskap också (component, name, path).

Det här blir verkligen rörigt, väldigt snabbt. Och om man ser till hur det ser ut, kan jag anta att det här inte är hur man gör. I det här fallet, skulle någon kunna påpeka exakt hur man ska fatta beslut om vad vi behöver deklarera/ange typer för och vad vi inte behöver?

Svar #1

Det är ingen bra idé.

Du använder typiskt sett inte explicita typer när typen är trivialt härledd. Alla dessa funktioner returnerar en typ som Typescript redan känner till och det är helt säkert att förlita sig på dem.

Faktiskt bör din exempel kod vara 100% identisk med motsvarande rena JS:

import {createApp, DefineComponent} from 'vue'
import {createRouter, createWebHistory, Router, RouteRecordRaw, RouterHistory} from 'vue-router'
import NPage from '~/layouts/N-Page.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [{
    component: NPage,
    name: 'home',
    path: '/',
  }]
})

Eftersom du redan importerar starkt typad kod i den här filen, och du exporterar inga av dina egna datastrukturer, bör inget annat behövas här.

Mer specifika råd än så kommer att glida in i åsikter, men jag tycker att när man börjar bör man lämna typer avstängda som standard och fixa saker när man ser typfel eller när man hovrar över ett token i sin editor och ser typen any. any är dåligt, låt inte värden vara any.

Om du har fler specifika frågor om hur man hanterar specifika typannoteringar är du välkommen att ställa en ny fråga för dessa specifika fall.