神经网络游戏场02：环境安装 - typescript 安装与holleword-优快云博客

本文链接：https://blog.youkuaiyun.com/ResumeProject/article/details/124906591

这篇博客介绍了如何设置和使用DeepPlayground，一个基于d3.js和TypeScript的神经网络交互式可视化工具。首先，讲解了如何安装typescript环境，包括通过npm换源和从docker获取环境。接着，演示了如何编写和编译TypeScript代码，特别是当涉及多个文件时，利用tsconfig.json配置文件进行自动编译。博客还强调了tsconfig.json中的一些关键配置选项，如编译目标、模块化规范和输出目录等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前尝试运行了一下Deep Playground ，Deep Playground 是神经网络的交互式可视化，使用 d3.js 用 TypeScript 编写。

typescript环境安装

nodejs安装
npm换源：npm config set registry https://registry.npmmirror.com
npm install -g typescript

或者从docker 中获取一个环境

docker pull sandrokeil/typescript

或者从docker 中获取一个node环境然后再安装

docker pull node:latest

桌面版本的在image处的run,点击optional setting可以设置名称和volume,点击hostpath的展开符号，选择本机的一个文件夹，然后右侧可以填入\mnt

然后运行

# ls
bin  boot  dev  etc  home  lib  lib64  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var
# cd mnt
# ls
 requirements.txt 
# npm config set registry https://registry.npmmirror.com
# npm install -g typescript
added 1 package in 22s
npm notice
npm notice New minor version of npm available! 8.9.0 -> 8.10.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.10.0
npm notice Run npm install -g npm@8.10.0 to update!
npm notice

Hello World

写一个hello.ts: console.log( “Hello World” )
同目录打开cmd进行编译：tsc hello.ts
发现多了一个hello.js文件

编译

单文件的自动编译

tsc hello.ts -w # watch模式 再文件发生变化时会自动编译（有编译的时间间隔）

多个文件的自动编译

这就要用到tsconfig.json这个配置文件了，本项目中文件内容为:

{
  "compilerOptions": {
    "module": "commonjs",
    "removeComments": true,
    "preserveConstEnums": true
  },
  "exclude": [
    "node_modules" 
  ]
}

执行tsc -w 即可。


“include”:	哪些ts文件需要编译	“./src/*”
“exclude”:	一般引入的模块是不需要编译的	“node_modules” ，同时编译器也是默认排除 “node_modules” ，“bower_components”,“jspm_packages”
“extend”	配置文件中的继承
compilerOptions	编译器的选项
compilerOptions-target	编译结果	“target”:“ES3” （默认）, “target”:“ES6”
compilerOptions-module	模块化规范
compilerOptions-lib	指定项目中要使用的js库	默认值为“dom”等
compilerOptions- outDir	指定编译后放置位置
compilerOptions- outFile	全局作用的代码将合并到一个文件中
compilerOptions- allowJs	是否把js也编译过去	默认为false
compilerOptions- checkJs	是否检查Js中的语法	默认为false
compilerOptions- removeComments	是否移出代码注释	本例 “removeComments”: true
compilerOptions-noEmit	不生成最后编译结果
compilerOptions-noEmitOnError	有错误时不生成最后编译结果
compilerOptions-alwayStrict	是否使用严格模式