ts入门笔记-01>基础类型+相关配置文件

typeScript是什么？

- javaScript为基础构建的语言 S
- 可以在任何支持javaScript的平台中执行
- 一个javaScript的超集
- typeScript扩展了javaScript，并添加了类型  
- TS不能被JS解析器直接执行，ts首先会编译成js

TypeScript增加了什么

基础类型（常用示例）

// 直接字面量类型声明

let a: 10;
a = 10;

// 使用 | 连接多个类型（联合类型）
let b: 'male' | 'female';
b= 'male';
b= 'female'

let c: boolean | string;
c = true;
c = 'string'

// any 表示任意类, 变量设置any后，相当于对该变量关闭了TS的类型检验
// 使用ts时，不建议使用any
// let d: any;

// 声明变量如果不指定类型，则ts会自动判断变量的类型为any（隐式的any）
let d;
d= 10;
d= 'ss';

// unknown未知类型变量
let e: unknown;
e = 10;
e = 'ss';

let s: string;
// d的类型是any，它可以赋值给任意变量
// e = d;

e = "hello";

// unknown 实际上就是一个类型安全的any
// unknown类型的变量，不能直接赋值给其他变量
if(typeof e === 'string') {
  s = e;
}

// 类型断言
/**
 * 语法
 * 变量 as 类型
 * <类型> 变量
 * 
*/
s = e as string;
s = <string> e;

// function fn(num): string | boolean {
//   if(num >0) {
//     return '123';
//   } else {
//     return false
//   }
// }

// viod 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void {
  return;
}

// never 表示永远不会返回结果
function fn2(): never{
  throw new Error('报错');
}

// object 表示一个js对象
let a: object;
a = {};
a = function () { 
}

// {} 用来指定对象中可以包含哪些属性
// 语法：{属性名：是性值，属性名：属性值}
// 在属性名后面加上 ? ,表示属性是可选的
let b: {name: string, age?: number};
b = {name:'张三', age: 45};

// [propName: string]: any  表示任意类型的属性
let c:{name:string, age: number, [propName: string]: any};
c = {name:'李四', age: 108, gender: '男', xxx: 'ooo'}

/**
 * 设置函数结构的类型声明
 *    语法：（形参：类型，形参：类型 ....）=> 返回值
 * 
*/
let d: (a: number, b:number) => number
d = function (n1:number, n2:number): number{
  return n1+n2;
}

/**
 * 数组的类型声明
 *    类型[]
 *    Array<类型>
*/
// stinrg[]表示字符串数组
let e: string[];
e = ['a', 'e'];

// stinrg[]表示字数值数组
let f: number[];
f = [2,3];

let g: Array<string>;
g = ['33','ss']


/**
 *    元组， 元组就是固定长度的数组 
 *        语法：[类型, 类型，类型]
*/
let h: [string, number]
h = ['sss', 77]

/**
 * enum 枚举
 * 
*/
enum Gender{
  Male = 0,
  Female = 1
}

let i: {name: string, gender: Gender}

i = {
  name: '王五',
  gender: Gender.Female
}

// & 表示同时满足
let j: { name: string} & {age: number}
j = {
  name: "sss",
  age: 4
}

// 类型的别名
type mysum = 1 | 2 | 3 | 4 | 5
let k: mysum;
let m: mysum;
k = 1;

tsconfig.json常用的相关配置

{
  /**
    tsconfig.json是ts便宜器的配置文件，ts编译器可以根据它的信息来对代码进行编译
      'include'  用来指定哪些ts文件需要被编译
        路径：**  表示任意目录
              *  表示任意文件
      'exclude'  不需要被编译的文件目录  可选的一般不需要配置
  */
  "include": [
    "./src/**/*"
  ],
  // "exclude": [
  //   "./src/hello/**/*"
  // ],
  /**
    定义被继承的配置文件
    当前配置文件中会自动包含configs目录下的base.json中的所有配置信息
  */
  // "extends": "./configs/base",

  // 指定被编译文件的列表，只需要编译少的文件时才会用到
  // "files": [
  //   "hello.ts"
  // ]

  /*
     compilerOptions 编译选择器
  */
  "compilerOptions": {
    // target  用来指定ts被编译为的ES的版本
    "target": "es2015",
    // module  用来指定模块化的规范
    // 'none', 'commonjs', 'amd', 'es6' 等等
    "module": "es2015",
    // 用来指定项目中要使用的库，一般不用动
    // "lib": ["es6", "DOM"],
    // outDir  用来指定编译后文件所在的目录
    "outDir": "./dist",
    // outFile 将所有全局中的代码合并到一个文件中
    // "outFile": "./dist/app.js"
    
    // 所有严格检查的总开关
    "strict": false,
    // 是否对js文件进行编译，默认时false
    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认时false
    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 不生成编译后的文件
    "noEmit": false,
    // 当有错误时不生成编译后的文件
    "noEmitOnError": false,

    // 用来设置编译后的文件是否为严格模式，默认false
    "alwaysStrict": true,
    // 不允许隐式的any类型
    "noImplicitAny": true,
    // 不允许不明确类型的this
    "noImplicitThis": false,
    
    // 严格的检查空值
    "strictNullChecks": true,
  }
}

webpack.config.js 常用基础配置

// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWenpackplugin } = require('clean-webpack-plugin');

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

  // 指定入口文件
  entry: "./src/index.ts",

  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    // 指定打包后的文件
    filename: "bundle.js",

    // 告诉我webpack不适用箭头函数  （特别-兼容ie浏览器）
    environment: {
      arrowFunction: false
    }
  },
  module: {
    // 指定加载的规则
    rules: [
      {
        // test指定的是规则生效的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          // 配置babel
          {
            // 指定加载器
            loader: "babel-loader",
            // 设置babel
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      "chrome": "88",
                      "ie": "11"
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式 "usage" 表示按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader',
        ],
        // 要排除的文件
        exclude: /node_modules/
      } wx20141122
lcx0756
lj19877701
    ]
  },

  // 配置webpack插件
  plugins: [
    // 编译前清空dist文件
    // new CleanWenpackplugin(),
    // 自动生成入口文件
    new HTMLWebpackPlugin({
      // title: "这是一个自定义title",
      template: "./src/index.html"

    }),
  ],

  // 用来设置引用模块
  resolve: {
    extensions:['.ts', '.js']
  }
}