How to setup typescript in VScode?

Question

I am following alone with the VS Code typescript config.

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

I have setup my tsconfig.json like

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

and my task runner

{
    // 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"
}

My ts codes

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

StartUp.main();

For some reason, I don't see any output in the output window when I press cmd + shift + B (build). I do see errors like

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

if I add randomly add ddd string in the codes.

Can someone help me to solve this issue? Thanks so much!

Are the generated files OK? Maybe you can run "tsc -p ." in the console. The command won't output any if no error. — Yuan
– Yuan, Commented Feb 18, 2017 at 8:21

Yuan · Accepted Answer · 2017-02-18 12:14:40Z

The command "tsc -p ." doesn't output any if no error in compiling and all compiled JavaScript/SourceMap files are generated, so you cannot see any in the output window of VSCode. Just type and run the command in the console.

You can add option "--diagnostics" to make the command output some information.

{
    // 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"
}

The output:

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

Also see all options in http://www.typescriptlang.org/docs/handbook/compiler-options.html

user6685907 · Accepted Answer · 2017-11-23 13:39:44Z

Setup app structure Setup basic html npm init --yes npm install lite-server --save-dev npm install --save-dev typescript @types/node @types/jasmine @types/core-js add script lite to scrips in package.json create an app folder add app.js create tsconfig.json add the following options

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

add the following to the package.json file

{


"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"

}

}

Collectives™ on Stack Overflow

How to setup typescript in VScode?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related