一、TypeScript

1.TS是JS的超集（TS包含JS并且有更多）
2.TS的核心特性是它的类型系统，为JS添加了静态类型的支持
3.TS不能直接运行，必须先编译再JS再运行

二、TypeScript的优势？

1.能够更早地发现代码中的错误
2.能够提高代码的可读性和维护性
3.JS支持的特性TS都支持，且语法是相同的

三、搭建TypeScript运行环境

1.前提：安装node
2.进入命令行
输入：

npm i -g typescript

3.创建文件1.ts
4.在终端输入：tsc 1.ts，可得到1.js
5.运行js：node 1.js

四、类型

1、类型的声明

（1）

//a的类型设置为number，在以后的使用过程中a只能是数字
a = 10;
a = 33;
//a = 'hello'//报错，因为变量和类型是number，不能赋值字符串

//声明一个变量a，同时指定它的类型为number
let a: number;
//a的类型设置为nunmber，在以后的使用过程中a只能是数字
a = 123;
a = 456;
//a ='123';//报错，不能将string类型分配给number
let b:string;
b = 'hello';
// b = 123;//报错，不能将number类型分配给string

（2）

//声明完变量直接进行赋值
let c: boolean = true;

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

d = true;

（3）

//JS中的函数是不考虑参数的类型和个数的
function sum(a,b){
    return a+b;
}
console.log(sum(123,456));//579
console.log(sum(123,'678'));//"123678"

function sum(a:number,b:number):number{
    return a+b;
    //return a+'hello';//报错,返回值设定了numbe，不能将string类型分配给number
}
sum(123,456);
// sum(123,'456');//报错。a，b设定为number类型，不能将string类型分配给number
}

2、类型

（1）number：任意数字

（2）string：任意字符串

（3）boolean：布尔值true 或 false

（4）字面量：限制变量的值就是该字面量的值

let a: 10;
a = 10;
// a=11;//报错，不能将类型“11”分配给类型“10”

//也可以使用 | 来连接多个类型（联合类型）
let b: "male" | "famale";
b = "male";
b = "famale";
// b = "hello";//报错，不能将类型“"hello"”分配给类型“"male" | "famale"”
let c: boolean | string;
c = true;
c = 'hello';

（5）any：任意类型

//any表示的是任意类型，一个变量设置类型为any后相当于对改变量关闭了TS的类型检测
//使用TS时，不建议使用any类型
let d: any;
d = 10;
d = '123';
d = true;

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

（6）unknow:类型安全的any

let e: unknown;
e = 10;
e = '123';
e = true;

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

//unknow类型的变量，不能直接赋值给其他的变量
//s =e;//报错，不能将类型“unknown”分配给类型“string”
if (typeof e === 'string') {
    s = e;
}

//类型断言，可以用来告诉解析器变量的实际类型
//两种形式
s = e as string;
s = <string>e;

（7）void：没有值

//void表示空，以函数为例，就表示没有返回值的函数
function fn():void{
    // return true;//报错，不能将类型“boolean”分配给类型“void”
}

（8）never：不能是任何值

//用于报错
function fn2(): never {
    throw new Error('报错了');
}

（9）object：任意JS对象

let a: object;
a = {};
a = function () {
};
//{}用来指定对象中可以包含哪些属性
//语法：{属性名：属性值，属性名：属性值}
//在属性名后面加上？，表示属性是可选的
let b: { name: string, age?: number };
b = { name: 'sun', age: 10 };
//[pname: string]: any 表示任意类型的属性
let c: { name: string, [pname: string]: any };
c = { name: 'zhu', age: 18, gender: '男' };

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

（10）arry:任意JS数组

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

（11）tuple:元组，固定长度数组

let h:[string,string];
h =['hello','world'];
//不能多写也不能少写，也不能写错类型

（12）enum：枚举

enum Gender {
    male = 0,
    famale = 1
}
let i: { name: string, gender: Gender };
i = {
    name: 'sun',
    gender: Gender.male
}

//&表示同时
let j: { name: string } & { age: number };
j = { name: 'sun', age: 1 };

//类型的别名
type myType = string;
let m: myType;//type myType = string
type MyType = 1 | 2 | 3 | 4 | 5;
let k: MyType;
k=5;
// k=6;//报错

五、TS编译选项

直接执行tsc命令，默认执行目录下的所有文件
tsc -w可以在改动ts的同时改动js

tsconfig.json

{
  /*
  tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
    “include”：用来指定哪些ts文件需要被编译，
        路径：**表示任意目录，*表示任意文件
    "exclude":不需要被编译的目录文件
        默认值:["node_modules","bower_components","jspm_packages"]
  */ 
  "include": [
    "./src/**/*"
  ],
  // "exclude": [
  //   "./src/hello/**/*"
  // ]
  /*
  compilerOptions:编译器选项
  */
  "compilerOptions": {
    //target 用来指定ts被编译为ES的版本
    // "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "es2021", "es2022", "es2023", "es2024", "esnext"
    "target": "es2015",
    //module 指定要使用的模块化的规范
    // "commonjs", "amd", "system", "umd", "es6", "es2015", "es2020", "esnext", "none", "es2022", "node16", "node18", "node20", "nodenext", "preserve"
    "module": "es2015",
    //lib:用来指定项目中要用的库
    // "lib": []


    //outDir 用来指定编译后的文件所在目录
    "outDir": "./dist",
    //outFile 将代码合成为一个文件

    //设置outFile以后，所有的全局作用域中的代码会合并到同一个文件中
    // "outFile": ""     //outFile 旁仅支持 "amd" 和 "system" 模块

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

    //所有严格检查的总开关
    "strict": true,

    //用来设置编译后的文件是否使用严格模式，"use strict"开启了js的严格模式
    "alwaysStrict": true,

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

六、使用webpack打包ts代码

1.初始化

npm init -y

生成package.json

2.安装依赖

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

3.编写webpack.config.js

//引入一个包,帮助配置路径
const path =require('path');

//webpack中所有的配置信息都应该写在module.exports中
module.exports = {
    //指定入口文件
    entry:"./src/index.ts",

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

    //指定webpack打包时要用的模块
    module:{
        //指定要加载的规则
        rules:[
            {
                //test指定的是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',//用ts-loader去处理以ts结尾的文件
                //要排除的文件
                exclude:/node_modules/
            }
        ]
    }
}

创建./src/index.ts

4.编写tsconfig.json

输入

tsc --init

tsconfig.json

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2015",
    "strict": false
  }
}

5.修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --mode=production"
  },

6.对项目进行打包

npm run build

文件夹结构

npm i -D html-webpack-plugin

下载之后package.json就多出了"html-webpack-plugin": “^5.6.4”
在对webpack.config.js进行配置

//引入html插件
const HTMLWebpackPlugin =require('html-webpack-plugin');

//配置webpack插件
plugins:[
        new HTMLWebpackPlugin(),//自动生成html文件并引入相关资源
    ]

npm run build

会在dist文件夹里生成index.html
模板
在src中建立html文件，并在webpack.config.js中引入

//配置webpack插件
    plugins:[
        new HTMLWebpackPlugin({
            // title:"这是一个自定义的title"
            template:"./src/index.html"//模板
        }),//自动生成html文件并引入相关资源
    ]

根据项目的改变自动刷新服务器

npm i -D webpack-dev-server

在package.json里面配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "start": "webpack serve --open --mode production"//新配置的
  },

npm start

ts转为js时清除之前转化过的js文件
(1)clean:true//需要webpack5.20.0以上
或者
(2)

npm i -D clean-webpack-plugin

webpack.config.js中引入

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

plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title:"这是一个自定义的title"
            template:"./src/index.html"
        }),//自动生成html文件并引入相关资源
    ]

在src文件夹中写入
m1.ts

export const hi = '你好';

index.ts中增加

import {hi} from './m1';
console.log(hi);

在webpack.config.js中配置

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

兼容各种浏览器以及版本

npm i -D @babel/core @babel/preset-env babel-loader core-js

改配置文件webpack.config.js

//指定webpack打包时要用的模块
    module:{
        //指定要加载的规则
        rules:[
            {
                //test指定的是规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:[
                    //配置babel
                    {
                        //指定加载器
                        loader:"babel-loader",
                        //设置babel
                        options:{
                            //设置预定义的环境
                            presets:[
                                //指定环境的插件
                                ["@babel/preset-env",
                                //配置信息
                                {
                                    
                                    targets:{
                                        //要兼容的目标浏览器版本
                                    },
                                    //指定corejs版本
                                    "corejs":"3",
                                    //使用corejs的方法,“usage”表示按需下载
                                    "useBuiltIns":"usage"
                                }
                                ]
                            ]
                        }
                    },
                    'ts-loader'//用ts-loader去处理以ts结尾的文件
                ],
                //要排除的文件
                exclude:/node_modules/
            }
        ]
    },