TypeScript学习日记二

一.TypeScript编译选项

tsc 一次只能编译一个ts文件太过麻烦，用一种方法一次性编译多个文件
解决方案 tsconfig.json ts编译器的配置文件
tsc ... -w(watch缩写) 热加载ts文件
tsc --init 创建 tsconfig.json

tsconfig.json的配置选项

include 用来指定哪些ts文件需要被编译
路径: **表示任意目录 *表示任意文件

  {
     "include":[
        "./src/**/*"
     ]
  }

exclude 用来指定哪些ts文件不需要被编译
默认值：["node_modules","bower_components","jspm_packages"]

  {
     "exclude":[
        "./src/hello/**/*"
     ]
  }

extends 定义被继承的配置文件

  {
     "extends": "./configs/base"
     //当前目录下会包含configs目录下base.json中的所有配置信息
  }

files 指定被编译的文件列表,编译的文件少时采用

  {
     "files": [
        "core.ts",
        "sys.ts"
     ]
  }

compilerOptions 编译选项

target 指定ts被编译的ES的版本
module 指定使用的模块化规范
lib 用来指定项目中使用的库
outDir 用来指定编译后文件所在的目录
outFile 将编译后的文件合并为一个文件，设置后，所有的全局作用域中的代码会合并到同一个文件中
outFile 想要合并模块化，module必须指明为system和amd
allowJs 是否对js文件进行编译，默认为false
checkJs 是否检查js代码是否符号语法规范，默认是false
removeComments 是否移除注释
noEmit 不生成编译后的文件，默认为false
noEmitOnError 当有错误时不生成编译后的文件，默认为false
strict 是所有严格检查的总开关,它为true，以下4个严格开关可以不写了,为false，全关
alwaysStrict 用来设置编译后的文件是否使用严格模式，默认为false
noImplicitThis 不允许不明确的this,默认为false，设置为true后

  {
     function fn() {
        alert(this)  报错,this指向不明确，可能是window也可能是方法调用的对象
     }
     更改后:
     function fn(this: Window) {
        alert(this)   this指向window
     }
  }

strictNullCheck 严格检查空值，默认为false

  {
     let box1 = document.getElementById('box1');
     box1.addEventListener('click',function() {
        alert('hello')  报错,box1可能为空,需要if判断或
     })
     
     box1?.addEventListener('click',function() {
        alert('hello')  box1为空时不执行后面的绑定事件
     })
     
  }

  {
     // target的默认版本为es3,
     // 'es3','es5','es6','es2015','es2016','es2017','es2018','es2019','es2020'
     "targer": "es2020",
     // 'none','commonjs','amd','system','umd','umd','es6','es2015','es2020','esnext'
     "module": "es2015",
     //lib一般不需要更改
     "lib": ["es6","dom"],
     "outDir": "./dist",
     "outFile": "./dist/app.js",
     "allowJs": true,
     "checkJs": true,
     "removeComments": true,
     "noEmit": false,
     "noEmitOnError": true,
     "alwaysStrict": true,
     "noImplicitThis": true
     ...
  }

二.webpack打包ts代码

创建pack.json

  npm init -y

安装开发依赖,
- 安装webpack打包工具核心代码
- webpack-cli是webpack的命令行工具
- typescript是ts的核心包
- ts-loader是ts的加载器,对ts进行整合

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

webpack.config.js配置文件选项
- entry: 指定入口文件
- output: 指定打包文件的目录,output选项path指定打包文件目录,filename指定打包后的文件
- module: 指定webpack打包时要使用的模块
  - rules:指定要加载的规则

   const path = require('path');
   module.exports = {
     entry: './src/index.ts',
     output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
     },     
     module:{
        rules: [
           {
               // test指定规则生效的文件
               test: /\.ts$/,
               // 要使用的loader
               use: 'ts-loader',
               // 要排除的文件
               exclude: /node-modules/
           }
        ]
     }
     ...
   }

tsconfig.json配置

{
   ...
   "compilerOptions":{
       "module": "ES2015",
       "target": "ES2015",
       "strict": true
   }
   ...
}

pack.json中添加打包命令,执行build，运行webpack

{
   ...
   "scripts": {
      "build": "webpack"
   }
   ...
}

npm run build
// 运行入口文件index.ts，在根目录下生成dist目录undels.js文件