TS基础记录

ts配置文件的配置项有很多下面是一些常见的配置：

{

    //这个ts的json可以写注释,用来指令哪些ts文件需要编译,/*任意文件,/**任意目录,./是当前目录 ,

    // ../是父级目录,/是根目录（表示一下子回到最顶端的那个文件夹下）

    "include": [

        "../ts_01/**/*"

    ],

    //排除编译文件

    "exclude": [

    ],

    "compilerOptions": {

         //所有严格检查的总开关,默认为false

         "strict": true,

        //使用什么版本的es

        "target": "ES6",

        //指定使用模块化的规范

        "module": "ES6",

        //导入别的库，一般默认就行，除非是浏览器环境

        // "lib": [],

        //指定编译后js文件的目录

        "outDir": "./dist",

        //合成一个文件

        // "outFile": "",

        //是否对js文件进行编译，默认为false

        "allowJs": true,

        // 是否检查js代码符合语法规范，默认为false

        "checkJs": false,

        //是否移除注释,默认为false

        "removeComments": false,

        //不生成编译后的文件默认为false

        "noEmit": false,

        //有错误时候就不生成编译后的文件,默认为false

        "noEmitOnError": false,

        //设置代码严格模式,默认为false

        "alwaysStrict": false,

        //不允许隐式any,默认为false

        "noImplicitAny": false,

        //不允许不明确类型的this,默认this

        "noImplicitThis": false,

        //严格检查空值默认false

        "strictNullChecks": false,

    },

}

 ts打包配置文件

npm init -y

需要下载的插件

npm i -D webpack-cli webpack typescript ts-loader

需要配置的文件

package-lockjson是自动生成的依赖

package.json

{

  "name": "ts",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack",

    "start": "webpack serve --open --mode development"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.25.2",

    "@babel/preset-env": "^7.25.3",

    "babel-loader": "^9.1.3",

    "core-js": "^3.38.0",

    "html-webpack-plugin": "^5.6.0",

    "ts-loader": "^9.5.1",

    "typescript": "^5.5.4",

    "webpack": "^5.93.0",

    "webpack-cli": "^5.1.4",

    "webpack-dev-server": "^5.0.4"

  }

}

tsconfig,json

{

    "compilerOptions": {

        "module": "ES2015",

        "target": "ES2015",

        "strict": true,

        "typeRoots": ["./node_modules/@types"],

        "types": ["node"] // 如果你的项目依赖于 Node.js 的类型定义，可以添加这个

    }

}

 webpack.config,js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const path =require('path');

//引入插件

 

//webpack中所有的配置信息都应该写在module.exports中

module.exports = {

    mode: 'development',

    //入口文件

    entry:"./src/index.ts",

   

    //指定打包文件所在目录

    output:{

        //指定打包文件夹的目录

        path:path.resolve(__dirname,'dist'),

        filename:"bundle.js",

        //告诉webpack不使用箭头函数

        // environment:{

        //     arrowFunction:false

        // }

    },

    //指定webpack打包时要使用模块

    module:{

        rules:[

            {

                //test指定的是对谁生效

                test:/\.ts$/,

                // 要使用的loader

                use:[

                    {

                        loader: 'babel-loader',

                        options: {

                          presets: [

                            [

                              '@babel/preset-env',

                              {

                                targets: {

                                  chrome: "88"

                                },

                                corejs: "3.0",

                                useBuiltIns: "usage"

                              }

                            ]

                          ]

                        }

                      },

                    'ts-loader',

                   

                ],

                //要排除的文件

                exclude:/node-modules/

            }

        ]

    },

    plugins:[

        new HtmlWebpackPlugin({

            // title:"自定义title"

            template:"./src/index.html"

        }),

    ],

    resolve:{

        extensions: ['.ts','.js']

    }

}

 前端配置文件很多，大致了解意思即可，需要用的时候直接用配置好的模版就行