Typescript的使用（一）环境搭建

秒速五厘米 2024-04-18 06:17 50阅读 0赞

需要将以前js文件改成ts文件。  
第一步当然就是新建文件夹：  
![在这里插入图片描述][20190903143755429.png]  
第二步：用webstorm打开该文件夹，然后执行cnpm init 这样会生成package.json文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
第三步全局安装typescript

npm install -g typescript

并且在跟目录下添加tsconfig.json文件

第四步：可以执行tsc看是否安装成功  
第五步：因为历史js用了jquery，所以需要将jquery集成到环境中。

npm install -g typings
    typings search jquery
    typings install dt~jquery --global

然后打开tsconfig.json文件添加 “typings/globals/jquery/index.d.ts”

"include": [
        "src/**/*",
        "typings/globals/jquery/index.d.ts"
      ],

![在这里插入图片描述][20190903144452907.png]  
第六步：配置tsconfig.json文件。

{
      "compilerOptions": {
    
        "target": "es5",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "importHelpers": false,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": false,
        "baseUrl": ".",
        "types": [
    
        ],
        "paths": {
          "@/*": [
            "src/*"
          ]
        },
        "lib": [
          "esnext",
          "dom",
          "dom.iterable",
          "scripthost"
        ]
      },
      "include": [
        "src/**/*",
        "typings/globals/jquery/index.d.ts"
      ],
      "exclude": [
        "node_modules",
        "**/*.spec.ts"
      ]
    }

到此就可以进行ts编写了，并且将ts文件编译成js文件。  
编写完ts后，输入tsc命令就可以将相应的ts编译成js文件

gitee地址

git@gitee.com:going100/seeyon_ui.git

[20190903143755429.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dcc8c5c26a314437aef8593591b9ac3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e6ba421252774210b120073043fe8aff.png
[20190903144452907.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/909f06db94114333b79b1c1df4ac3488.png