TS学习(二) :安装ts与ts配置

一、安装TypeScript

npm i -g typescript

二、安装完成后

创建ts 使用ts语法 可能遇到的报错问题

• 在啥都没配置的默认情况下，TS会做出下面几种假设：

  • 假设当前的执行环境是dom

  • 如果 代码中没有使用模块化语句（import,export），便认为改代码是全局执行

  • 编译的目标是ES3,有点低

• 有两种 方式更改以上假设

  • 使用tsc命令行的时候加上选项参数

  • 使用ts配置文件，更改编译选项

这里选择使用ts配置文件来进行更改编译选项

• 方法1：直接在更目录下创建 tsconfig.json

• 方法2：直接使用命令行 tsc --init

    成功后会显示: Successfully created a tsconfig.json file
  

• 配置文件内容

    {
      "compilerOptions": {
          "target": "es2016",                                  
          "module": "commonjs",     
          "lib":["es2016"],
      },
      "include":["./src"]
      //"files":["./src/index.ts"]
    }

• compilerOptions 配置可选项

  • target 配置编译目标代码的版本标准

  • module 配置编译目标使用的模块化标准

  • lib 表示默认详情下ts使用的是那一个环境

    注意 它默认是dom环境，这里我们不在dom环境中所以不加入，
    
    我们在node环境中，所以我们必须得安装一个包 @types/node 这个包表示可以运行node环境的代码，如果不添加这个包 则在node环境下，连console.log都无法使用
    
    npm i -D @types/node
    

  • include:

    • 在一般情况下我们创建文件不肯能随便乱创建，这使得项目乱，为了代码的整洁性，我们一般会把ts文件都放在根目录的src文件夹下,这样代码看上去不会太乱;
    • 但是编译在用tsc命令去编译代码时,它会去编译整个项目下的ts文件，而我们只想编译src下面的文件，这时就可以使用include配置了 它是一个数组， 数组里面放需要编译的路径比如只想编译src下面的ts文件，则只需要像这样写就可与['./src'],当然这个是当前项目根路径下的src,如果想要编译其他文件夹只要路径对了就可以了；
    • 注： 数组里面的路径有["./src"]就可以了，你不要再去写./src下面的路径了如这样的["./src","./src/a/a.ts"]，这样写后面是的是没有效果的，不要问我问什么用，因为我试了，
    • 当然也有可能tsc内部编译时这样处理的，先把"./src"下面的文件编译一遍，然后在去把"./src/a/a.ts"文件编译一遍，就是循环遍历数组["./src","./src/a/a.ts"]，然后把改地址下面的文件 编译一遍最后合并在一块(有可能是这样的，没去看源码目前还不知，只是猜想);
    • 还有可能是先把数组["./src","./src/a/a.ts"]里面的路径给去重，去重复后再去进行编译合并(这个也是有可能，这个应该比第一个效率高吧，编译文件应该比找相同的路径更耗时吧);

  • files：有一种情况就是，我只想要编译一个文件而不是整个文件夹，这时就可以使用files配置了，它也是一个数组，内容当然是文件的路径了

配置文件就先到这里，后续学习过程中会慢慢加上

项目已经配置好了，也可以编译运行了，想要运行编译后的结果

• 可以使用命令 node .\dist\想要运行的js文件 当然前提是你得先tsc先编译

• 由于这样的方式太复杂 想要简化流程则可以使用第三方库来简化

  • ts-node: 将ts代码 在内存中完成编译，同时完成运行;安装完成后，就可以执行命令 ts-node src/想要执行的ts;执行玩后他就会把你ts编译并输出了； 但这个时候你会发现，我好像项目中没有dist文件，因为你在开发阶段，不需要你打包dist文件，就像vite一样

    安装库 npm i -g ts-node
    

  • nodemon: 在使用ts-node 时 你每次更改ts代码后就要重新执行命令ts-node，有点麻烦，而nodemon 就不需要重新执行命令，改了代码后就会自动执行

    • 安装前先初始化一下项目npm init然后在 安装nodemon： npm i -g nodemon;

    • 如何执行nodemon命令:nodemon --exec ts-node src/需要执行的文件;意思是：当文件变化时(nodemon),去执行(exec),ts-node这个命令； 但这个命令还是有点长，这时我们就可以放到 package.json里面，把它写成一个脚本，如下，之后我们要启动开发工程就可以直接使用命令 npm run dev 就可以了;

      "script":{
        "dev": "nodemon --exec ts-node src/index.ts"
      }
      

    • 但是这里会有一些不好的地方就是,不管你改变啥文件，它都会去监听然后重新编译，而我们只想改变ts文件保存时去编译，改变其他文件不去编译，这时我们就可以在nodemon 后面加上-e ts, 表示你要监控的文件扩展名是ts nodemon -e ts --exec ts-node src/需要执行的文件

      "script":{
          "dev": "nodemon --exec ts-node src/index.ts"
      }
      

    • 但这样也有问题，就是我只想去修改src目录下的ts才去重新编译，修改其他目录下的ts文件不编译，那我们就可与在加watch src 只监听src下的ts文件 nodemon --watch src -e ts --exec ts-node src/需要执行的文件

      "script":{
        "dev": "nodemon --watch src --exec ts-node src/index.ts"
      }
      

到这里前期的准备工作完成了，接下来就是ts的学习了