Wie man Typoskript in VScode einrichtet?

Question

Ich folge allein mit der VS-Code typescript-Konfiguration.

https://code.visualstudio.com/Docs/languages/typescript

ich mein Setup tsconfig.json wie

haben

{ 
    "compilerOptions": { 
     "module": "system", 
     "noImplicitAny": true, 
     "removeComments": true, 
     "preserveConstEnums": true, 
     "outFile": "built/local/tsc.js", 
     "sourceMap": true 
    }, 
    "include": [ 
     "**/*" 
    ], 
    "exclude": [ 
     "node_modules", 
     "**/*.spec.ts" 
    ] 
} 

und meine Aufgabe Läufer

{ 
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format 
    "version": "0.1.0", 
    "command": "tsc", 
    "isShellCommand": true, 
    "args": ["-p", "."], 
    "showOutput": "always", 
    "problemMatcher": "$tsc" 
} 

Meine ts Codes

class StartUp { 
    public static main(): number { 
     console.log('Helle Workd'); 
     return 5; 
    } 
} 
console.log('test'); 

StartUp.main(); 

Für einige reaso n, ich sehe keine Ausgabe im Ausgabefenster, wenn ich Cmd + Shift + B (Build) drücke. Ich sehe Fehler wie

hello.ts(8,1): error TS2304: Cannot find name 'ddd'. 

wenn ich zufällig ddd Zeichenfolge in den Codes hinzufügen.

Kann mir jemand helfen, dieses Problem zu lösen? Vielen Dank!

Answer 1

Der Befehl "tsc -p." gibt keinen, wenn kein Fehler beim Kompilieren aus, und alle kompilierten JavaScript/SourceMap-Dateien werden generiert, sodass Sie im Ausgabefenster von VSCode keine sehen können. Geben Sie einfach den Befehl in der Konsole ein und führen Sie ihn aus.

Sie können die Option "--diagnostics" hinzufügen, damit der Befehl einige Informationen ausgibt.

{ 
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format 
    "version": "0.1.0", 
    "command": "tsc", 
    "isShellCommand": true, 
    "args": ["-p", ".", "--diagnostics"], 
    "problemMatcher": "$tsc" 
} 

Der Ausgang:

Files:   2 
Lines:  18225 
Nodes:  73338 
Identifiers: 24828 
Symbols:  18969 
Types:   4609 
Memory used: 62579K 
I/O read:  0.00s 
I/O write: 0.01s 
Parse time: 0.24s 
Bind time: 0.12s 
Check time: 0.54s 
Emit time: 0.06s 
Total time: 0.96s 

alle Optionen Siehe auch in http://www.typescriptlang.org/docs/handbook/compiler-options.html

Answer 2

Setup-App Struktur Setup-Grund html npm init --yes npm installieren lite-Server --save- dev npm install --save-dev typescript @ types/node @ types/jasmine @ types/core-js füge Skript lite zu scrips in package.jsonhinzueine App Ordner erstellen hinzufügen app.js erstellen tsconfig.json die folgenden Optionen hinzufügen

{ 
"compilerOptions": { 
"target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": false, 
"lib": ["es2015", "dom"] 
} 
} 

fügen Sie folgendes zu der package.json Datei

{ 


"name": "Angular2", 

"version": "1.0.0", 

"description": "", 

"main": "index.js", 

"scripts": 
{ 

    "start": "concurrently \"npm run tsc:w\" \"npm run lite\"", 

    "lite": "lite-server", 
"tsc": "tsc", 
"tsc:w": "tsc -w" 
}, 

    "keywords": [], 
"author": "", 
"license": "ISC", 
"devDependencies": 
{ 

    "@types/core-js": "^0.9.43", 

    "@types/jasmine": "^2.8.2", 

    "@types/node": "^8.0.53", 

    "concurrently": "^3.5.1", 

    "lite-server": "^2.3.0", 

    "typescript": "^2.6.1" 
    }, 


    "dependencies": 
{ 

    "types": "^0.1.1" 

} 

}