vscode + typescriptです開発環境を構築します

2019ユニコーン企業重く募集エンジニアのPythonの標準>>>

長い時間はtypescriptです師事ドラゴンボートフェスティバルの期間を利用して、ブログを書いていない、環境の構築方法や手順を記録しました。

唯一vscodeサポートは最高の写し（typescript）に、この段階でのように見える、あなたは直接tsのスクリプトをデバッグすることができます！webstormのように見えるだけでコンパイルJS、あなたが直接スクリプトTSデバッグすることはできませんデバッグすることができます。

最新バージョンを使用するNPMは公式サイトからダウンロードして、/ usr / binに/ NPMへのシンボリックリンクをダウンに設定することができます。

2.インストール

2.1インストールtypescriptです

$ npm install -g typescript  //typescript程序
$ npm install -g ts-node   //这是一个typescript的交互式
控制台，可以用来调试ts脚本，不然只能调试编译后的js

3.開発環境を設定します

3.1。初期化

npm init

ディレクトリ構造

/src/ts //这个目录用来放ts代码
/src/build  //这个目录用来存放编译的js

3.2自動的に$のTSCを作成tsconfig.json 3.2.1を追加します - 。initが実行された後Tsconfig.jsonファイルを自動的に作成することができ、ディレクトリがtsconfig.jsonを含むルートディレクトリですが、また、ゾーンの設定ディレクトリにも手動で作成することができます

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators":true,
        "preserveConstEnums": true,
        "strictNullChecks": true,
        "noImplicitReturns": false,
        "moduleResolution": "node",
        "esModuleInterop":true,
        "target": "es6",/*编译成es6规范的js*/
        "allowJs": false,/*不允许js混合编程，新项目强烈推荐，迁移的老项目只能设置成true了*/
        "sourceMap": true,/*调试时的时候必须开sourceMap*/
        "outDir": "build"//js文件的输出目录
    },
    // "files": [

    // ],
    "include": [
        "src/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

@typesをインストールすると、3.2 TSDとタイピング管理型定義である前に、このようなものは、スマートのために非常に役立つヒントですが、お勧めできませんし、今お勧め@typesは型定義を管理します。

でhttp://www.cnblogs.com/haogj/p/6194472.htmlインストールファイルの法の下が記載されている.d.ts

$ npm install @types/node --dev-save

そして、あなたはvscodeとDEMO1ディレクトリを開くことができます

4.コンパイル4.1一般コンパイルを提出

$ tsc demo1.ts
$ tsc -w   //可以监视变化即时编译，甚至可以自动刷新浏览器，很牛逼

（正確なエラープロンプトがある場合）後、私たちは、ビルド/ demo1.jsファイルをコンパイルします。

5.スクリプト/ srcに/メイン/ TSを書く/ demo2.tsを作成し、次のように読み込み、

function greeter(person: string) : string{
    return "Hello " + person;
 }
 
 let user="jim";
 
console.log(greeter(user));

まず、設定launch.jsonプレスCTRL +シフト+ Bは、launch.jsonを構築することを選択しました。/.Vscode/launch.jsonは、あなたが使用する前に、それを変更する必要があるファイルを生成します

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/src/main/ts/demo2.ts",
            "outFiles": [
                "${workspaceFolder}/src/build/*.js"
            ]
        }
    ]
}

6.デバッグを行います

最初のletのユーザー=ブレークポイントを設定する「ジム」、およびデバッガでは - >デバッグ開始はdemo2.tsのためのスクリプトのデバッグを開始することができます。

あなたはTS-ノードは、デバッグスクリプトすることができません直接tsはインストールしないで、その後、ロードされ、特別な設定はしていない場合、あなたは素晴らしい、デバッグTSを行うことができます。

ます。https：//my.oschina.net/jim19770812/blog/1831493で再現

vscode + typescriptです開発環境を構築します

おすすめ