初识TypeScript

声明变量同时指定它的类型

let a: number;
a = 10;
//a的类型设置为number，在以后的使用过程中a的值只能是数字
let b:string;
b = 'hello';

声明变量直接赋值

 let c: boolean = true;
 // 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
 let c = false

TS定义函数的方式，可以定义函数形参的个数与类型并且可以定义返回值的类型

function sum(a: number,b: number):number{
    return a + b;
}

let result = sum(123,456);

可以直接使用字面量进行类型声明，也可以用|连接多个类型（联合类型）

let a: 10;
a = 10;

let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = "hello";

any为任意类型

一个变量设置为any后相当于对该变量关闭TS的类型检测，使用TS时，不建议使用any类型，声明变量如果不指定类型。则ts解释器自动判断变量的类型为any（隐式的any）

let d: any;
d = 10;
d = false;
d = '123'

unknown表示未知类型的值

let d: any;
let e: unknown;
d = '123
let s:string;
e = 10;
e = "hello";
e : true;
// d的类型是any，它可以赋值给任何变量
// s = d;
// e的类型是unknown，他不可以直接赋值给任何变量
if(typeof e === "string"){
    s = e;
}

类型断言，可以用来告诉解析器变量的实际类型

语法：
变量 as 类型
<类型>变量

s = e as string;
s = <string>e;

函数返回值类型

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

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

Object

let a :object;
a = {};

{}用来指定对象包含的属性

语法：{属性名：属性值，属性名：属性值}
在属性名后边加？，表示属性是可选的

let b: {name: string, age?:number};
b = {name: '刘德华',age: 18};
//[propName:string]: any任意类型的属性
let c: {name: string,[propName:string]: any};
c = {name: '张学友',age:18,sex:'男'};

设置函数结构的类型说明

语法： (形参:类型,形参:类型,… )=> 返回值类型

let d: (a: number,b: number) => number;
 d = function(n1,n2): number{
     return n1 + n2;
 }

数组的类型声明

类型[]
Array<类型>

// string[] 表示字符串数组
let  e: string[];
e = ['a', 'b', 'c'];
//number[] 表示数值数组
let f: number[];
f = [1, 2, 3];
let g: Array<number>;
g = [5, 6, 7];

元组就是固定长度的数组
语法：[类型，类型，类型]

let h: [string, string];
h = ['hello', 'abc'];

enum 枚举

enum Gender{
    male,
    Female
}
let i : {name:string,gender: Gender};
i = {
    name: "孙悟空",
    gender: Gender.male
}
&表示同时
let j: {name: string} & {age: number};
 j = {name: '刘德华', age: 18};
 类型的别名
 type  myType =  1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m : myType;
k = 5;

配置tsconfig.json

{
      /*
        tsconfig.json时候ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译
          "include"用来指定哪些ts文件需要被编译
          路径：**表示任意目录
                *表示任意文件
          "exclude" 不需要被编译的文件目录

    */

    "include": [
        "./src/**/*"
    ],
    
    // "exclude": [
    //     "./src/hello/**/*"
    // ]

    /*
        "compilerOptions":编译器的选项
    */
    "compilerOptions": {

        //target 用来指定ts被编译为的ES的版本
        //'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext'.
        "target": "es6",
        //moudle: 指定要使用的模块化的规范
        "module": "es2015",
        //lib用来指定项目中要使用的库
        // "lib": []
        //outDir 指定编译后文件所在的目录
        "outDir": "./dist",

        //outFile将代码合并成一个文件
        //设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
        // "outFile": "./dist/app.js"

        // allowJs 是否对js文件进行编译，默认为false
        "allowJs": true,
        // 是否检查js代码是否符合语法规范，默认为false
        "checkJs": true,
        // 是否移除注释
        "removeComments": true,
        // 不生成编译后的文件
        "noEmit": false,
        // 当有错误是不生成编译文件
        "noEmitOnError": true,

        // 所有严格检查的总开关
        "strict": true,
        //alwaysStrict 用来设置编译后的文件是否使用严格模式，默认false
        "alwaysStrict": true,
        // 不允许隐式的any类型
        "noImplicitAny": true,

        //不允许不明确类型的this
        "noImplicitThis": true,
        
        //严格的检查空值
        "strictNullChecks": true
      
    }
}

配置WebPack

//引入一个包

const path = require('path');

// 引入html插件

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

// 引入clean插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 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: [
          // 配置babel
          {
            // 指定加载器
            loader: 'babel-loader',
            // 设置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  //指定环境插件
                  '@babel/preset-env',
                  //配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      chrome: '58',
                      ie: '11',
                    },
                    // 指定corejs的版本
                    corejs: '3',
                    // 使用corejs的方式 "usage" 表示按需加载
                    useBuiltIns: 'usage',
                  },
                ],
              ],
            },
          },
          'ts-loader',
        ],
        // 要排除的文件
        exclude: /node-modules/,
      },
    ],
  },

  //   配置Webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      //   title: '这是一个自定义的title',
      template: './src/index.html',
    }),
  ],

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