feat(filanalys): add TypeScript syntax analysis section with automated error detection
This commit is contained in:
@@ -131,3 +131,251 @@ Om inga relevanta filer hittas:
|
|||||||
## 7. CI-koppling
|
## 7. CI-koppling
|
||||||
- Detta är lokalt pre-commit-steg.
|
- Detta är lokalt pre-commit-steg.
|
||||||
- Samma kvalitetskrav bör speglas i CI (push/PR) för att minska miljöskillnader.
|
- Samma kvalitetskrav bör speglas i CI (push/PR) för att minska miljöskillnader.
|
||||||
|
|
||||||
|
---
|
||||||
|
## 8. TypeScript Syntaxanalys (PowerShell)
|
||||||
|
|
||||||
|
### 8.1 Automatiserad Felupptäckt
|
||||||
|
|
||||||
|
#### 8.1.1 Förberedelser
|
||||||
|
Kontrollera att TypeScript och Node.js är installerade:
|
||||||
|
```powershell
|
||||||
|
node --version
|
||||||
|
tsc --version
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.1.2 Hämta alla TypeScript-fel
|
||||||
|
Kör TypeScript-compilern i **noEmit-läge** för att lista fel **utan att generera filer**:
|
||||||
|
```powershell
|
||||||
|
tsc --noEmit --pretty | Out-File -FilePath "ts_errors.log" -Encoding utf8
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.1.3 Sök efter specifika felkoder (PowerShell)
|
||||||
|
Använd `Select-String` (PowerShells motsvarighet till `grep`) för att filtrera fel:
|
||||||
|
```powershell
|
||||||
|
# Sök efter "Cannot find name" (TS2304)
|
||||||
|
Select-String -Path "ts_errors.log" -Pattern "TS2304" | Format-Table -AutoSize
|
||||||
|
|
||||||
|
# Sök efter "Property does not exist" (TS2339/TS2551)
|
||||||
|
Select-String -Path "ts_errors.log" -Pattern "TS2339|TS2551" | Format-Table -AutoSize
|
||||||
|
|
||||||
|
# Sök efter "implicitly has 'any' type" (TS7006)
|
||||||
|
Select-String -Path "ts_errors.log" -Pattern "TS7006" | Format-Table -AutoSize
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.1.4 Analysera specifika filer
|
||||||
|
Fokusera på ändrade filer i `git` (pre-commit):
|
||||||
|
```powershell
|
||||||
|
# Hämta alla ändrade TypeScript-filer (staged + unstaged)
|
||||||
|
$changedFiles = git diff --name-only --diff-filter=d | Where-Object { $_ -match '\.tsx?$' }
|
||||||
|
if ($changedFiles) {
|
||||||
|
tsc --noEmit $changedFiles | Out-File -FilePath "ts_errors_staged.log" -Encoding utf8
|
||||||
|
} else {
|
||||||
|
Write-Host "Inga ändrade TypeScript-filer hittades."
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.2 Vanliga TypeScript-Syntaxfel (Windows)
|
||||||
|
| Felkod | Beskrivning | PowerShell för att hitta fel | Åtgärd |
|
||||||
|
|--------------|---------------------------------------|--------------------------------------------------|------------------------------------------------------------------------|
|
||||||
|
| **TS2304** | Okänd variabel/import | `Select-String -Pattern "TS2304"` | Lägg till import eller deklarera variabeln. |
|
||||||
|
| **TS2339** | Egenskap saknas på objekt | `Select-String -Pattern "TS2339"` | Utöka interfacet eller använd `as`-typning. |
|
||||||
|
| **TS2551** | Felaktig egenskapsåtkomst | `Select-String -Pattern "TS2551"` | Kontrollera typdefinitionen. |
|
||||||
|
| **TS1128** | Saknad deklaration eller statement | `Select-String -Pattern "TS1128"` | Lägg till kodblock eller semikolon. |
|
||||||
|
| **TS7006** | Parameter saknar typ | `Select-String -Pattern "TS7006"` | Lägg till typannotation (t.ex. `: string`). |
|
||||||
|
| **TS1005** | Saknad semikolon | `Select-String -Pattern "TS1005"` | Lägg till semikolon om `tsconfig.json` kräver det. |
|
||||||
|
|
||||||
|
### 8.3 Åtgärdsförslag (PowerShell-exempel)
|
||||||
|
|
||||||
|
#### 8.3.1 TS2304: "Cannot find name"
|
||||||
|
**Orsak**: Variabel, funktion eller import saknas.
|
||||||
|
**Lösningar**:
|
||||||
|
1. **Lägg till import**:
|
||||||
|
```powershell
|
||||||
|
# Exempel: Saknad import för `axios`
|
||||||
|
Get-Content "src\api\service.ts" | Select-String "axios"
|
||||||
|
```
|
||||||
|
```diff
|
||||||
|
- fetchData();
|
||||||
|
+ import axios from 'axios';
|
||||||
|
+ axios.get('/api/data');
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Installera saknade typer**:
|
||||||
|
```powershell
|
||||||
|
npm install --save-dev @types/node
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.3.2 TS2339/TS2551: "Property does not exist"
|
||||||
|
**Orsak**: Egenskap saknas i typdefinitionen.
|
||||||
|
**Lösningar**:
|
||||||
|
1. **Utöka interfacet**:
|
||||||
|
```diff
|
||||||
|
- interface User { name: string; }
|
||||||
|
+ interface User { name: string; address?: { city: string; }; }
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Använd `as`-typning (temporärt)**:
|
||||||
|
```ts
|
||||||
|
const city = (user as { address: { city: string } }).address.city;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.3.3 TS1128: "Declaration or statement expected"
|
||||||
|
**Orsak**: Ogiltig syntax (t.ex. saknat kodblock).
|
||||||
|
**Lösningar**:
|
||||||
|
1. **Lägg till kodblock**:
|
||||||
|
```diff
|
||||||
|
- function foo() return 5;
|
||||||
|
+ function foo() { return 5; }
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Kontrollera semikolon** (om `tsconfig.json` kräver det):
|
||||||
|
```diff
|
||||||
|
- const x = 5
|
||||||
|
+ const x = 5;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.3.4 TS7006: "Parameter implicitly has 'any' type"
|
||||||
|
**Orsak**: Parameter saknar typ.
|
||||||
|
**Lösningar**:
|
||||||
|
1. **Lägg till typannotation**:
|
||||||
|
```diff
|
||||||
|
- function greet(name) { ... }
|
||||||
|
+ function greet(name: string) { ... }
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Stäng av `noImplicitAny`** (ej rekommenderat):
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"noImplicitAny": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.4 Exempel på Korrigeringar (PowerShell)
|
||||||
|
|
||||||
|
#### 8.4.1 Fixa saknad import (TS2304)
|
||||||
|
**Felaktig kod**:
|
||||||
|
```ts
|
||||||
|
getUser(); // TS2304: Cannot find name 'getUser'
|
||||||
|
```
|
||||||
|
**Fix**:
|
||||||
|
```powershell
|
||||||
|
# Kontrollera om funktionen existerar i projektet
|
||||||
|
Get-ChildItem -Recurse -Include *.ts | Select-String -Pattern "function getUser"
|
||||||
|
```
|
||||||
|
```ts
|
||||||
|
import { getUser } from './api'; // Lägg till import
|
||||||
|
getUser();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.4.2 Fixa ogiltig egenskap (TS2551)
|
||||||
|
**Felaktig kod**:
|
||||||
|
```ts
|
||||||
|
interface User { name: string; }
|
||||||
|
const user: User = { name: 'Alice' };
|
||||||
|
console.log(user.age); // TS2551: Property 'age' does not exist
|
||||||
|
```
|
||||||
|
**Fix**:
|
||||||
|
```ts
|
||||||
|
interface User { name: string; age?: number; } // Gör 'age' valfritt
|
||||||
|
const user: User = { name: 'Alice' };
|
||||||
|
console.log(user.age); // OK (kan vara `undefined`)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.5 PowerShell-specifika Tips
|
||||||
|
|
||||||
|
#### 8.5.1 Sökvägar och Filtrering
|
||||||
|
- **Använd dubbla citattecken (`"`) för sökvägar**:
|
||||||
|
```powershell
|
||||||
|
Get-ChildItem -Path "C:\Users\Nils-JohanGynther\dev\recipe-app\src\*.ts"
|
||||||
|
```
|
||||||
|
- **Escape specialtecken** med backtick (`\`):
|
||||||
|
```powershell
|
||||||
|
Select-String -Pattern "Property\`|does not exist"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.5.2 Kör `tsc` med full sökväg (om nödvändigt)
|
||||||
|
```powershell
|
||||||
|
& "C:\Users\Nils-JohanGynther\dev\recipe-app\node_modules\.bin\tsc" --noEmit
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 8.5.3 Spara felutdata till fil
|
||||||
|
```powershell
|
||||||
|
tsc --noEmit | Out-File -FilePath "ts_errors.log" -Encoding utf8
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.6 Rekommenderat Arbetsflöde (PowerShell)
|
||||||
|
1. **Lista alla TypeScript-fel**:
|
||||||
|
```powershell
|
||||||
|
tsc --noEmit --pretty | Out-File -FilePath "ts_errors.log" -Encoding utf8
|
||||||
|
```
|
||||||
|
2. **Filtrera efter felkod**:
|
||||||
|
```powershell
|
||||||
|
Select-String -Path "ts_errors.log" -Pattern "TS2304|TS2551" | Format-Table -AutoSize
|
||||||
|
```
|
||||||
|
3. **Åtgärda felen** enligt tabellen ovan.
|
||||||
|
4. **Validera fixar**:
|
||||||
|
```powershell
|
||||||
|
tsc --noEmit
|
||||||
|
```
|
||||||
|
|
||||||
|
### 8.7 Vanliga PowerShell-kommandon
|
||||||
|
| Syfte | PowerShell-kommando |
|
||||||
|
|--------------------------------|-------------------------------------------------------|
|
||||||
|
| Lista TypeScript-filer | `Get-ChildItem -Recurse -Include *.ts,*.tsx` |
|
||||||
|
| Sök efter text i filer | `Select-String -Path "src\*.ts" -Pattern "TS2304"` |
|
||||||
|
| Kör TypeScript-compilern | `tsc --noEmit` |
|
||||||
|
| Spara felutdata till fil | `tsc --noEmit | Out-File "errors.log"` |
|
||||||
|
| Visa innehåll i en fil | `Get-Content "src\app.ts"` |
|
||||||
|
| Kontrollera git-status | `git status` |
|
||||||
|
| Lista ändrade filer | `git diff --name-only --diff-filter=d` |
|
||||||
|
|
||||||
|
### 8.8 Output-format (för pre-commit)
|
||||||
|
När du kör analysen, returnera resultatet i detta format:
|
||||||
|
```markdown
|
||||||
|
### Scope
|
||||||
|
- **Analyserade filer**:
|
||||||
|
- `src\api\service.ts` (2 TS2304-fel)
|
||||||
|
- `src\models\user.ts` (1 TS2551-fel)
|
||||||
|
- **Exkluderade filer**:
|
||||||
|
- `node_modules\` (ignorerad)
|
||||||
|
- `dist\` (genererad kod)
|
||||||
|
|
||||||
|
### Gate-beslut: `PASS_WITH_WARNINGS`
|
||||||
|
- **Critical**: 0
|
||||||
|
- **High**: 1 (TS2551 i `user.ts`)
|
||||||
|
- **Medium**: 2
|
||||||
|
- **Low**: 0
|
||||||
|
|
||||||
|
### Blocking Findings (Critical/High)
|
||||||
|
1. **TS2551** i `src\models\user.ts:15`
|
||||||
|
- **Risk**: Egenskapen `address` saknas i `User`-interfacet.
|
||||||
|
- **Åtgärd**: Utöka interfacet eller använd `as`-typning.
|
||||||
|
- **Verifiering**: Kör `tsc --noEmit` efter fix.
|
||||||
|
|
||||||
|
### Informational Findings (Medium/Low)
|
||||||
|
1. **TS2304** i `src\api\service.ts:8`
|
||||||
|
- **Förbättring**: Lägg till import för `axios`.
|
||||||
|
- **Kommando**: `npm install axios --save`
|
||||||
|
|
||||||
|
2. **TS7006** i `src\utils\helpers.ts:3`
|
||||||
|
- **Förbättring**: Lägg till typ för parametern `data`.
|
||||||
|
- **Exempel**: `function parse(data: string) { ... }`
|
||||||
|
|
||||||
|
### Fixplan
|
||||||
|
1. Åtgärda `TS2551` i `user.ts` (blockerande).
|
||||||
|
2. Lägg till saknade imports i `service.ts`.
|
||||||
|
3. Typa parametrar i `helpers.ts`.
|
||||||
|
|
||||||
|
### Sammanfattning
|
||||||
|
- **Topp 3 åtgärder**:
|
||||||
|
1. Fixa `User`-interfacet (5 min).
|
||||||
|
2. Installera `axios` (2 min).
|
||||||
|
3. Lägg till typer i `helpers.ts` (3 min).
|
||||||
|
- **Tidsestimat**: 10 minuter.
|
||||||
|
- **Rekommenderade automatiserade kontroller**:
|
||||||
|
- Lägg till `tsc --noEmit` i `pre-commit`-hook.
|
||||||
|
- Konfigurera ESLint för TypeScript (`@typescript-eslint`).
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user