typescript 基本配置(一)

枚举 -ts

enum Gender{
    male =  0 ,
    female = 1,
}
let i : {name:string,sex:Gender};
i = {
    name:'李四',
    sex:Gender.female,
}
console.log(i.sex === Gender.male);
=>>> false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BeYJ8hxP-1627466640702)(C:\Users\hydsoft\AppData\Roaming\Typora\typora-user-images\1627368013449.png)]

• number

  let decimal : number = 6
  
  let hex : bigint = 100n
  JavaScript 中可以用 Number 表示的最大整数为 2^53 - 1，可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限，可以用 BigInt来表示，它可以表示任意大的整数。
  
  BigInt 与 Number 的不同点：
  
  BigInt 不能用于 Math 对象中的方法。
  BigInt 不能和任何 Number 实例混合运算，两者必须转换成同一种类型。
  BigInt 变量在转换为 Number 变量时可能会丢失精度
  

• boolean

  let isDone : boolean = false 
  

• string

  let color : string  = "blue"
  color = 'red'
  
  

• 字面量

  //也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
  let color : "red" | "blue" | "yellow"
  let num : 1 | 2 | 3 | 4 
  

• any

  let d : any  = 4
  d = "hellow"
  d = true
  

• unknow

  le notSure : unknown =4 
  notSure = 'hello'
  

• void

  let unsable: void  = undefind
  

编译选项

tsc XXX -w 监视模式下，也就是说，ts实时跟新的到js文件中 ------只能监视一个，

---

webpack 中使用 ts + 配置

1. npm init -y 初始化一个webpack.json

2. 安装依赖 webpack webpack-cli ts-loader typescript…

    "devDependencies": {
       "ts-loader": "^9.2.4",
       "typescript": "^4.3.5",
       "webpack": "^5.47.0",
       "webpack-cli": "^4.7.2"
     }
   

3. 编写webpack的配置文件

   const path = require("path");          
   
   // webpack中的所有的配置信息都再 module.exports 中
   module.exports = {
       // 入口文件
       entry:"./src/index.ts",
       // 指定打包文件所在的目录
       output:{
           // 指定打包文件的目录
           // path:'./dist'
           path:path.resolve(__dirname,'dist'),
           // 打包后所在的文件
           filename:'bundle.js',
       },
       // webpage 打包的时候所需要的模块
       module:{
           // 指定加载的规则
           rules:[
               {
                   // 指定我们规则生效的文件
                   test:/\.ts$/,
                   // 要使用的loader
                   use:'ts-loader'
                   // 指定要排除的文件
                   exclude:/node-modules/
               }
           ]
       }
   }
   

4. 编写tsconfig.json 的文件

   {
       "compilerOptions": {
           "module": "ES2015",
           "target": "ES2015",	// 都使用es5语法
           "strict": true,		//严格模式
       }
   }
   

5. 修改package.json 文件 + build

{
  "name": "part-3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"     	//+++++++++
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.4",
    "typescript": "^4.3.5",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2"
  }
}

tsconfig.json 中常见配置

{
    /*
        tsconfig 文件是ts编译的一个配置文件， ts编译器可以更具它的信息 来对代码进行编译
    */
    /*
    include : 定义希望被编译文件的地址
        ** 任意文件
        *  任务目录

    exclude : （不包含）不进行编译的文件
        是具有默认值的： ["node_modules,bower_components,jspm_pakages"]
    extends:定义被继承的配置文件

    compilerOptions:编译器的选项  包含多个子选项，用来完成对编译的配置
        子选项：target : 
    */
    "include": ["./dist/**/*"],
    "exclude": [],
    // "extends": "./dist/**/* ",
    "compilerOptions": {
            // target 用来指定ts被编译为的es 的版本
            // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'
        "target": "ES2015",
            // module : 模块化
        // "module": "ES2016",
            // lib : 项目中使用的库
        // "lib": ["es6"],
            // outDir : 编译后的 js 文件存放的位置
        "outDir": "./dist-js",
            // outFile : 将代码合并成一个文件 两个ts 文件和并到一个文件中
        // "outFile": "./dist-js/dist.js",
            // allowJs 是否对js文件进行编译  默认为false 
        "allowJs": true,
            // checkJs 是否检查js代码是否符合规范，默认为false 
        "checkJs": true,
            // removeComments 注释是否需要编译过去
        "removeComments": false,
            // noEmit : 不生成编译后的文件
        "noEmit": false,
            // noEmitOnError : 当有错误的时候不生产编译文件
        "noEmitOnError": true,
            //alwaysStrict ： 用来设置编译后的文件是否使用严格模式
        "alwaysStrict": false,
            //是否允许隐式的any类型
        "noImplicitAny": false,
            // 是否允许不明确类型的this
        "noImplicitTh`is"`: false,
            //是否严格的检查空值
        "strictNullChecks": true,
            //严格检查的总开关
        "strict": false

    }
}

webpack.config.js 常见配置

const path = require("path");          
const HTmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack中的所有的配置信息都再 module.exports 中
module.exports = {
    // 入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在的目录
    output:{
        // 指定打包文件的目录
        // path:'./dist'
        path:path.resolve(__dirname,'dist'),
        // 打包后所在的文件
        filename:'bundle.js',
    },
    // webpage 打包的时候所需要的模块
    module:{
        // 指定加载的规则
        rules:[
            {
                // 指定我们规则生效的文件
                test:/\.ts$/,
                // 要使用的loader
                // use:'ts-loader',
                // 谁卸载后面谁先执行
                use:[
                     // 配置babel
                    {
                    //   指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options:{
                            // 设置预定义的环境---要在那些浏览器中运行
                            pressets:[
                                // 指定环境插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 指定浏览器的版本
                                    targets:{
                                        "chorme":'88',
                                       // "ie":'11'
                                    },
                                    // 使用那个版本的corejs
                                    "corejs":"3",
                                    // 使用codejs的方式 ，usage 表示按需加载
                                    "useBuiltIns":'usage'
                                }
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 指定要排除的文件
                exclude:/node-modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        // 避免旧文件打包,也就是dist每次都回是新文件
        new CleanWebpackPlugin () ,
        //为了在打包后回有一个html文件（在这里是index.html）
        new HTmlWebpackPlugin({
            // title:'自定义的title'
            template:"./src/index.html" ,           //提供的html模板
        })     
    ],
    // 用来引用模块的，告诉我们那些文件可以用来引用
    resolve:{
        // 
        extensions:[".ts",".js"]
    }
}