目录
前言：
对typescript的类型声明以及各种基本类型，webpack的下载安装及配置进行了学习。
类型声明
类型声明是TyScript最重要的一个特点。TyScript区别于JavaScript的一个显著特点就是tyscript对变量类型进行了声明。
通过类型声明可以指定ts中变量的类型。
指定之后，当对变量赋值时，ts会自动检测赋值是否符合该类型。符合则赋值，不符合就报错。
语法：
let 变量:类型;
let 变量(:类型)=值;
function fn(参数:类型,参数:类型）:类型{
}
注：由于ts有自动的类型判断机制，当变量的声明和赋值同时进行时，ts编译器会自动检测变量类型，所以类型声明可以省略。
//声明一个变量a，同时指定它的类型为number
let a:number;
//a的类型设置为number，在以后的使用过程中a的值只能是数字
a=10;
a=22;
//a="hello"; 会报错，因为变量a的类型时number 不能赋值字符串，但执行的话也可以编译成功
let b:string;
//声明完变量就直接进行赋值
let c:boolean=false;
//如果变量的声明和赋值是同时进行，ts可以自动对变量进行类型检测
let c=false;
//js的函数时不考虑参数的类型和个数的
// function sum(a,b){
// return a+b;
// }
// console.log(sum(123,456));
//最后一个number表返回值类型 返回的返回值类型不符合也会报错
function sum2(a:number,b:number):number
{
return a+b;
}
console.log(sum2(123,456));
//console.log(sum2(123,"456"));//报错,因为"456"是字符串不符合形参的类型
//console.log(sum2(123));//webstrom会报错，不知道VSCOde为什么不报错注：若vscode会有无法重新声明变量块的报错，在终端中输入tsc --init重新配置config.json文件即可。
ts的类型
字面量类型
//可以直接使用字面量进行类型声明
let a:10;
a=10;
//a=11;//报错any类型
//any表示任意类型，一个变量设置类型为any后相当于对该变量关闭了ts的类型检测
//使用ts时，不建议使用any类型
//let d:any;
//声明变量如果不指定类型，则ts解析会自动判断变量的类型为any(隐式的any)
//隐式any若后面赋值了，vscode的ts会自动检测并认为该变量为所检测的值类型(最后一个)
let d;
d=10;
d=true;
d="hello";
let s:string;
s=d;//此时vscode程序不报错,因为d最后赋值是为hello(字符串类型);若赋值为Boolean或number类型则会报错。unknown类型及类型断言：
/unknown表示未知类型的值
let e:unknown;
e=10;
e="hello";
//unknown 实际上是一个类型安全的any，不能直接赋值给其他变量
//s=e;报错不能将unknown类型赋值给string
if(typeof e==="string"){
s=e;
}
//类型断言 可以用来告诉解析器的变量的实际类型
/*
语法：
变量 as 类型
<类型>变量
*/
s=e as string;
s=<string>e;
void类型
//void用来表示空，以函数为例，就表示没有返回值的函数
function fn(){
//返回void
}
function fn2(){
return true;//返回boolean
}never类型
//never：表示永远不会返回结果
function fn3(): never{
throw new Error("报错了！");
}注：throw代表抛出异常。
object类型
//object表示一个js对象
let a2:object;
a2={};
a2=function(){};
//{}用来指定对象中可以包含哪些属性
//语法：{属性名:属性值,属性名:属性值},不能多也不能少 可加?表示可选
let b2:{name:string,age?:number};
//b2={};//报错 因为没有包含name属性
b2={name:"孙悟空"};
b2={name:"孙悟空",age:20};
//[propName:string]:any 表示任意类型的属性
let c2:{name:string,[propName:string]:any};
c2={name:"猪八戒",age:18,gender:"男"};
//设置函数结构的类型声明
//语法：(形参:类型，形参：类型...)=>返回值
let d2:(a:number,b:number)=>number;
d2=function(n1,n2){
return n1+n2;
}
数组类型
/*
数组的类型声明：
类型[]
Array<类型>
*/
//string[] 表示字符串数组
let e2:string[];
e2=["a","b"];
//number[] 表示数值数组
let f2:number[];
let g2:Array<number>;
g2=[1,3,4,5];
元组类型
/*
元组：元组就是固定长度的数组
语法：[类型,类型,类型]
*/
let h:[string,string];
h=["hello","abc"];
//h=["hello","abc","123"];//报错
//h=["hello"];//报错
枚举类型
*
enum枚举
*/
enum Gender{
Male=1,
female=0
}
let i:{name:string,gender:Gender};
i={
name:"孙悟空",
gender:Gender.Male
}
console.log(i.gender===Gender.Male)|的用法
//可以使用|来连接多个类型 |表示联合类型
let b:"male"|"female";
b="male";
b="female";
let c:boolean | string;
c=true;
c="hello";
&的用法
//&表示同时
let j:{name:string}&{age:number};类型的别名
//类型的别名
type myType=string;
type myType2=1|2|3|4|5;
let k:myType2;
let l:1|2|3|4|5;
let m:myType;ts编译选项
tsc 要执行的文件 表示编译文件
tsc 要执行的文件名 -w 表示ts编辑器可以监视文件，即每隔一定时间ts编辑器检查文件，若文件内容有变化就编译更新，但只能编译选定的文件。
在一个文件夹下存放有tsconfig.json文件，则该文件夹下所有文件都被监视,后输入tsc即可全部编译。tsc --init即可创建tsconfig.json
{ //tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译 /* "include"用来指定哪些ts文件需要被编译 **表任意目录 *表任意文件 "include":[ "./src/ ** /*" ] "exclude"不需要被编译的文件目录 默认值：["node_modeles,"bower_components","jspm_packages"] "exclude":[ ] "extends"定义被继承的配置文件 "extends":"./src/base"当前配置文件会自动包含src目录下base.json中的所有配置信息 "files"指定被编译文件的列表，只有需要编译的文件较少时才会用到 "files":[ 指定的文件 ] }{ /* "compilerOptions 编译器的选项" "compilerOptions"{ //target 用来指定ts被编译的es的版本 es3,4,5,6 es2015,16,17,18,19,20 esnext "target":"esnext", //module指定要使用的模块化规范 //"none" "commonjs "amd "system" "umd" "es6" "es2015" "es2020" "esnext"推荐用es6 "module":"commonjs", //lib 用来指定项目中要使用的项目 一般不需要设置 //上述均可传错误的值来查看可选值 "lib":["dom","es6"] //outDir用来指定编译后文件所在的目录 "outDir":"./dist", //outFile将代码合并为一个文件 //设置outFile后，所有的全局作用域中的代码会合并到同一个文件中，如果是由模块的化，需要将module设置为system "outFile":"./dist/app.js" //allowJs是否对js文件进行编译，默认是false "allowJs":false //checkJs是否检查js的语法是否符合规范，默认是false "checkJs":false //removeComments编译的js文件是否移除注释 "removeComments":true //noEmit不生成编译后的文件，一般用来检查 "noEmit":true //noEmitOnError当有错误时不生成编译后的文件 "noEmitOnError":true //strict严格检查的总开关，一般设置为true "strict":true //alwaysStrict用来设置编译后的文件是否使用严格模式，默认为false //若有导入引出模块时，默认编译后是有严格模式的 "alwaysStrict":false //noImplicitAny不允许隐式的any "noImplicitAny":false //noImplicitThis不允许不明确类型的this "noImplicitThis":false //strictNullChecks严格的检查总值 "strictNullChecks":true */ }
使用webpack打包ts代码
1 npm init -y生成package.json
npm i -D webpack webpack-cli typescript ts-loader或cnpm i -D webpack webpack-cli typescript ts-loader安装四个依赖包
依赖包安装成功图
同时生成这个文件
2 编写配置文件
在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',
//要排除的文件
exclude:/node_modules/
}
]
}
}3 配置tsconfig.json文件
{
"compilerOptions": {
"module": "es2015",
"target": "es2015",
"strict": true
}
}4 package.json添加build命令
配置完成，使用npm run build命令即可打包
注：使用vscode在webpack后面需要加上--mode development。不加虽然也能编译成功，但是会有警告
成功使用webpack打包示意图
安装webpack插件
自动生成js文件插件
npm i -D html-webpack-plugin
cnpm i -D html-webpack-plugin
下载成功后在package.json中显示
在webpack.json.js文件中引入插件
重新编译后生成html和js文件
内置服务器插件
npm i -D webpack-dev-server
cnpm i -D webpack-dev-server
在package.json中配置服务器启动命令（可设置所要打开的浏览器也可不设置，即open后不加浏览器，不设置打开的是默认的浏览器）
注：vscode后面还要加--mode development 不然会有警告
在终端中输入npm start启动
成功示意图
运行成功后会自动打开网页
文件清除插件
清除的是旧文件，会用新的编译文件替换
npm i -D clean-webpack-plugin
cnpm i -D clean-webpack-plugin
下载成功后在package.json中显示
在webpack.json.js文件中引入插件
有关模块的设置
引用模块要在webpackage.config.json中配置
兼容性插件
解决浏览器兼容性问题
npm i -D @babel/core @babel/preset-env babel-loader core-js
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
下载成功后在package.json中显示
在webpack.json.js文件中配置
完整代码
webpackage.config.js
//引入一个包 const path=require("path"); //引入html插件 const HTMLWebpackPlugin=require('html-webpack-plugin'); //引入clean插件 const {CleanWebpackPlugin}=require('clean-webpack-plugin'); const { resolve } = require("path"); //webpack中的所有的配置信息都应该写在module.exports中 module.exports={ //指定入口文件 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:{ "edge":"106", "ie":"11", "chrome":"99" }, //指定corejs的版本 "corejs":"3", //使用corejs的方式 "usage"表示按需加载 "useBuiltIns":"usage" } ] ] } }, 'ts-loader', ], //要排除的文件 exclude:/node_modules/ } ] }, //配置webpack插件 plugins:[ new CleanWebpackPlugin(), new HTMLWebpackPlugin({ //title:"这是一个自定义的title" template:"./src/index.html"//以他作为模板生成js文件 }), ], //用来设置引用的模块 resolve:{ extensions:['.ts','.js']//以.ts ,.js结尾的文件都可以作为模块来使用 } }tsconfig.json
{ "compilerOptions": { "module": "es2015", "target": "es2015", "strict": true } }package.json
{ "name": "part3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode development", "start": "webpack serve --open --mode development " }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.19.3", "@babel/preset-env": "^7.19.4", "babel-loader": "^8.2.5", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.25.5", "html-webpack-plugin": "^5.5.0", "ts-loader": "^9.4.1", "typescript": "^4.8.4", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1" } }总结
学习了类型声明及各种类型以及webpack。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
