Keskitaso15 min

Cursor ja TypeScript

TypeScript ja Cursor ovat täydellinen yhdistelmä. Tyypit auttavat AI:ta ymmärtämään koodiasi paremmin ja tuottamaan tarkempia vastauksia. Tässä oppaassa opit hyödyntämään TypeScriptiä vibekoodauksessa.

Edellytykset: Cursor Composer: Tehokas käyttö, Cursor: Kontekstin hallinta

Miksi TypeScript + AI?

TypeScript parantaa AI:n vastauksia merkittävästi:

Ilman TypeScriptiä: - AI arvaa parametrien tyypit - Tulokset voivat olla vääriä - Enemmän korjattavaa

TypeScriptin kanssa: - AI näkee tarkat tyypit - Generoi oikean koodin - Vähemmän virheitä

Esimerkki:

// JavaScript - AI ei tiedä mitä user sisältää
function displayUser(user) {
  // AI: "Mikä on user.name? user.firstName? user.username?"
}

// TypeScript - AI tietää tarkalleen
interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

function displayUser(user: User) {
  // AI: "Ahaa, käytetään user.name ja user.role"
}

Tyyppien viittaaminen prompteissa

Viittaa tyyppeihin @-syntaksilla:

// Tyyppitiedosto: src/types/product.ts
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
}

// Prompt Composerissa:
"Luo ProductCard-komponentti joka käyttää
@src/types/product.ts Product-tyyppiä.
Näytä kaikki kentät ja 'Lisää koriin' -nappi."

// AI generoi oikeat tyypit automaattisesti:
import { Product } from '@/types/product';

interface ProductCardProps {
  product: Product;
  onAddToCart: (product: Product) => void;
}

Vinkki: Pidä tyypit erillisessä kansiossa (src/types/) - helpompi viitata ja hallita.

Tyyppien generointi AI:lla

AI voi generoida tyypit puolestasi:

API-vastauksesta: "Tässä on API-vastaus. Luo TypeScript-interface tälle datalle:"

Koodista: Valitse JavaScript-koodi ja: "Lisää TypeScript-tyypit tälle koodille"

Tietokannasta: "Tässä on Supabase-taulun rakenne. Luo TypeScript-tyypit:"

// API-vastaus
{
  "id": "123",
  "name": "Tuote",
  "price": 29.99,
  "variants": [
    { "color": "red", "size": "M" }
  ]
}

// AI generoi:
interface ProductVariant {
  color: string;
  size: string;
}

interface Product {
  id: string;
  name: string;
  price: number;
  variants: ProductVariant[];
}

Strict mode ja AI

TypeScript strict mode pakottaa parempaan koodiin.

Mitä strict mode tekee: - noImplicitAny: Ei salli any-tyyppiä - strictNullChecks: Pakottaa null-tarkistukset - strictFunctionTypes: Tiukempi funktiotyypitys

AI ja strict mode: Kerro .cursorrules-tiedostossa käyttämään strict modea ja välttämään any-tyyppiä.

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

// .cursorrules
# TypeScript
Käytä aina strict TypeScriptiä.
Älä koskaan käytä any-tyyppiä.
Käsittele null ja undefined eksplisiittisesti.

Yleisten ongelmien ratkaisu

AI osaa korjata TypeScript-virheet:

"Type X is not assignable to type Y" Valitse virheellinen koodi > Cmd+K > "Korjaa tämä tyyppivirhe"

"Property does not exist on type" "Lisää puuttuva property interface:en tai käytä type assertion"

"Argument of type X is not assignable" "Muunna tyyppi oikeaksi tai päivitä funktion signature"

// Esimerkki: Tyyppivirhe
const data: User | null = await fetchUser();
console.log(data.name); // Error: data might be null

// AI:n korjaus 1: Type guard
if (data) {
  console.log(data.name);
}

// AI:n korjaus 2: Optional chaining
console.log(data?.name);

// AI:n korjaus 3: Non-null assertion (jos olet varma)
console.log(data!.name);

Generics ja AI

AI ymmärtää ja generoi genericejä:

// Prompt: "Luo geneerinen API-fetch funktio"

// AI generoi:
interface ApiResponse<T> {
  data: T;
  error?: string;
  status: number;
}

async function fetchApi<T>(
  endpoint: string,
  options?: RequestInit
): Promise<ApiResponse<T>> {
  try {
    const response = await fetch(endpoint, options);
    const data = await response.json();
    return {
      data: data as T,
      status: response.status,
    };
  } catch (error) {
    return {
      data: null as T,
      error: error instanceof Error ? error.message : 'Unknown error',
      status: 500,
    };
  }
}

// Käyttö:
const { data } = await fetchApi<User>('/api/user');
// data on tyypitetty User | null

Vinkki: Genericien nimeäminen: T = Type, K = Key, V = Value, E = Element

Yhteenveto

TypeScript parantaa AI:n vastauksia merkittävästi
Viittaa tyyppeihin @-syntaksilla prompteissa
AI voi generoida tyypit datasta automaattisesti
Käytä strict modea parempaan koodiin

Usein kysytyt kysymykset

Pitääkö osata TypeScriptiä ennen vibekoodausta?

Ei välttämättä. Voit aloittaa JavaScriptillä ja oppia TypeScriptiä matkan varrella. AI auttaa tyyppien kanssa.

Miten siirryn JavaScript-projektista TypeScriptiin?

Pyydä AI:ta: "Auta siirtämään tämä projekti TypeScriptiin vaiheittain. Aloita konfiguraatiosta."

Seuraavaksi