vscode 配置 typeScript+nodejs 及 react+typeScript 开发环境

先安装好

1.  nodejs （官网下载安装，安装12.0以上版本， 使用 node --version 查看是否安装成功）。// 注意命令后面的参数是双短横线

2.  npm  （安装好node时跟着就安装好了npm，使用 npm -v 查看是否安装成功）

3.  typescript  （打开终端命令，输入 npm install -g typescript ，输入 tsc -v 查看是否安装成功）

4. create-react-app  （react安装的脚手架，npm install -g create-react-app）

一、搭建 typeScript+nodejs 开发环境

1. 新建一个空文件夹，比如命名为 tsnodejs

2. 打开这个文件夹

3. 输入命令： npm init -y  然后按下回车，就会看到生成了 {} package.json 文件

{
  "name": "tsnodejs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4. 在终端中再输入命令： tsc --init 然后按下回车，就会看到生成了 tsconfig.json 文件。message TS6071: Successfully created a tsconfig.json file.

5. 打开 tsconfig.json 文件，把其中的 “outDir" 和 ”rootDir“ 的注释打开，把后面的内容修改成 " ./out " 和 " ./src "，然后在左边的文件栏中创建这两个文件（out表示输出文件目录和src表示写代码的资源文件目录），具体如下图所示

6. 在src下创建一个 test.ts 文件， 在里面写上如下 ts 代码：

const hello : string = "Hello World,This is a TS!"
console.log(hello)

7. 为了运行test.ts 的代码，需要修改 package.json 文件中的 "scripts"，即整个文件改成如下：

{
  "name": "tsnodejs",
  "version": "1.0.0",
  "description": "",
  "main": "test.js",
  "scripts": {
    "start": "tsc && node out/test.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

8. 在终端输入 npm start  然后按下回车，就可以看到输出结果了。

二、搭建 react + typeScript 开发环境

在终端中进入你要新建工程项目的文件夹中，然后用如下命令：

create-react-app reactprojectname -typescript

等待创建成功，再输入终端命令：

cd reactprojectname

接下来再输入： yarn start 就可以看到界面了。

 

调试react时 launch.json 的配置

如果你想要通过按下 F5 运行和调试react，那么就要先安装插件：Debugger for Chrome 。