webpack.config.js
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// npm init -y 初始化 创建package.json文件
// npm i -D webpack webpack-cli typescript ts-loader 安装四个依赖
// 编写webpack配置文件
// 编写tsconfig.json文件
// 修改package.json中加上build命令
// npm i -D html-webpack-plugin //自动生成html
// npm i -D webpack-dev-server //自动响应浏览器更新
// npm i -D clean-webpack-plugin //清楚dist目录旧文件
//webpack 中所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
//打包后文件的名字
filename: "bundle.js",
//告诉webpack不使用箭头函数
environment: {
arrowFunction: false,
const: false //兼容ie10
}
},
//指定webpack打包时要使用的模块
module: {
// 指定要loader加载的规则
rules: [
// 设置ts文件的处理
{
// test指定的时规则生效的文件
test: /\.ts$/,//以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"
}
]
]
}
},
// 'babel-loader',
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options:{
postcssOptions:{
plugins:[
[
"postcss-preset-env",
{
browsers: 'last 2 versions',//兼容每个浏览器最新的两个版本
}
]
]
}
}
},
"less-loader"
]
}
]
},
// mode: "development", //设置mode
//配置Webpack 插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"、
template: "./src/index.html"
}),
],
// 用来设置引用模块，可以将这些文件识别为模块
resolve: {
extensions: ['.ts', '.js']
}
}
tsconfig.js
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
// "sourceMap": false
"strict": true,
"noEmitOnError": true
}
}
package.json
{
"name": "part02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.10.1",
"css-loader": "^5.2.1",
"html-webpack-plugin": "^5.3.1",
"less": "^4.1.1",
"less-loader": "^8.1.0",
"postcss": "^8.2.10",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30WouFsZ-1652340089664)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220505152237944.png)]
TS声明变量基本语法 注意点：如果声明变量不指定类型 那么编译器会自动给该变量声明为any类型 例：let b; 等同于 let b:any; 基本语法// 声明一个number类型的变量
// 1.第一种方式 先声明后赋值
let num:number;
num=2;
// 2.第二种方式 声明并赋值 以下声明皆同理
let num2:number=2;
// 声明一个string类型的变量
let str:string;
str='asd';
// 声明一个字符串类型的数组
let arr:string[]; //let arr:number[] number类型数组
arr=['a','b','c'];// arr=[1,2,3]
let arr:string[] = ['a','b','c']; //let arr:number[] number类型数组并赋值
// 声明一个只有两个元素的元组 （元组就是有特定长度的数组）
let arr2:[string,string];
arr2=['a','b'];
// 1.1 声明一个对象 有且只有name和age两个属性
let obj:{name:string,age:number};
obj={name:'孙悟空',age:18};
// 1.2 声明一个对象 有name但是不确定有没有age属性
let obj2:{name:string,age?:number};
obj2={name:'孙悟空'}; // obj2={name:'孙悟空',age:18}都可以
// 1.3 声明一个对象 有name但是不确定有没有其他属性
// name值为string类型，其他属性 key为string类型 value为任意类型
let obj3:{name:string,[propName:string]:any};
obj3={name:'孙悟空',age:18,gender:'male'};
// 2.声明一个对象 不常用 因为js中数组，函数都是对象类型
let obj4:object;
// 声明一个函数 变量类型都为string 返回值类型也为string
// 1.第一种方式
let fn:(a:string,b:string)=>string;
fn=function(a,b){
return a+b;
};
// 2.第二种方式
function fn2(a:string,b:string) :string{
return a+b;
};
// enum 枚举 创建一个枚举类型的变量存储男女性别
enum Gender{
male=0,
famale=1
};
let i:{name:string,gender:Gender};
i={
name:'孙悟空',
gender:Gender.male
}
//类型的别名 自定义一个类型别名 用自定义的mytype代替string声明变量
type mytype = string; // type mytype = 1|2|3|4|5
let a1:mytype; // a1:mytype
a1='abc' // a1=1 || a1=2 ...
class Dog{
//构造函数，创建实例的时候自动调用
constructor(){
}
}
class Dog{
//静态属性 只能在类访问到的属性 实例访问不到
//也可以设置静态方法
static kind:string = '金毛'
name:string,
age:number,
constructor(name:string,age:number){
this.name=name,
this.age=age
}
sayHello(){
console.log('汪汪汪！')
}
}
const dog=new Dog('旺财'，7)
console.log(dog) // Dog{name:'旺财',age:7}
console.log(dog.name) // '旺财'
//用类访问静态属性
console.log(Dog.kind) // '金毛'
dog.sayHello() // '汪汪汪'
//语法糖形式
class Dog{
//静态属性 只能在类访问到的属性 实例访问不到
//也可以设置静态方法
constructor(public name:string,public age:number){
}
sayHello(){
console.log('汪汪汪！')
}
}
const dog=new Dog('旺财'，7)
console.log(dog) // Dog{name:'旺财',age:7}
//父类
class Animals{
name:string,
constructor(name:string){
this.name=name,
}
sayHello(){
console.log('动物在叫！')
}
//子类通过extend关键字继承父类
class Dog extend Animals{
age:number,
constructor(name:string,age:number){
//通过super关键字调用父类的构造函数，把name传过去
super(name),
this.age=age,
}
//1.第一种
sayHello(){
//super相当于调用了父类
super.sayHello()
}
//2.第二种 也可以重写父类方法
sayHello(){
console.log('汪汪汪！')
}
}
const dog = new Dog('旺财'，6)
console.log(dog) // Dog{name:'旺财',age:6}
dog.sayHello() // 1.'动物在叫'
dog.sayHello() // 2.'汪汪汪！'
//将父类定义成抽象类 此时父类只能用来继承 不能用来当作构造函数使用
abstract class Animals{
name:string,
constructor(name:string){
this.name=name,
}
//将方法定义为抽象方法 此时子类必须要重写此方法 不然会报错
abstract sayHello(){
console.log('动物在叫！')
}
//子类通过extend关键字继承父类
class Dog extend Animals{
age:number,
constructor(name:string,age:number){
//通过super关键字调用父类的构造函数，把name传过去
super(name),
this.age=age,
}
sayHello(){
console.log('汪汪汪！')
}
}
const dog = new Dog('旺财'，6)
console.log(dog) // Dog{name:'旺财',age:6}
dog.sayHello() // 2.'汪汪汪！'
//类型别名 作用：对对象的结构做了一个限制 类型别名不能重复定义
type:mytype = {
name:string,
age:number
}
//限制了obj对象必须要有name和age俩个属性
const obj:mytype = {
name:'张三',
age:18
}
//定义接口 也是对对象结构的限制 接口可以重复定义 内容会进行叠加
interface myInterFace{
name:string,
age:number
}
interface myInterFace{
gender:'male'
}
//由于定义了两个相同名字的接口 所有内容进行了叠加 因此这个接口要求有三个属性
const obj:myInterFace = {
name:'张三',
age:18,
gender:male
}
//定义接口 接口也可以对类进行限制
//接口中的属性和方法不能有实际的值，相当于抽象类，只限制类的结构
interface myInter{
name:string,
age:number,
sayHello():void
}
//用类来实现接口
//就是定义类满足接口的结构
class MyClass implements myInter{
//满足接口的结构
name:string,
age:number,
//构造函数
constructor(name:string,age:number){
this.name=name,
this.age=age
}
sayHello(){
console.log('sss')
}
}
class Animals{
//private标识符表示该属性只能在此类中访问 外部访问不到
private _name:string,
constructor(name:string){
this.name=name,
}
//js语法糖 使外部能够访问到内部的私有属性
get name(){
return this._name
}
//js语法糖 使外部能够设置内部的私有属性
set name(value:string){
this._name = value
}
sayHello(){
console.log('动物在叫！')
}
const dog = new Dog('旺财')
console.log(dog.name) //报错 不能访问到私有属性 要想访问到可以通过getter 和setter方法
console.log(dog.name) //'旺财' 使用语法糖后能够访问到
dog.name='张三' //使用语法糖后能够在外部改变属性值
console.log(dog.name) // '张三'
//当变量类型不明确时，可以定义一个泛型来占位
//当函数调用时，就会知道T的类型是什么
function fn (a:T) :T{
return a;
}
fn(10) //此时泛型T的类型就是number
fn(10) //也可以在调用的时候手动指定泛型的类型为number
//泛型也可以同时使用多个
function fn (a:T,b:K) :T{
console.log(b);
return a;
}
//使用接口限制泛型的结构
interface myInter{
length:number;
}
//泛型实现接口直接使用extend关键字
function fn2(a:T) :number{
return a.length;
}
//此时泛型必须满足接口的结构 也就是必须要有length属性
fn2('123') // 3
fn2({length:5}) // 5
fn2(123) //报错
//当变量类型不明确时，可以定义一个泛型来占位
//当函数调用时，就会知道T的类型是什么
function fn (a:T) :T{
return a;
}
fn(10) //此时泛型T的类型就是number
fn(10) //也可以在调用的时候手动指定泛型的类型为number
//泛型也可以同时使用多个
function fn
console.log(b);
return a;
}
//使用接口限制泛型的结构
interface myInter{
length:number;
}
//泛型实现接口直接使用extend关键字
function fn2(a:T) :number{
return a.length;
}
//此时泛型必须满足接口的结构 也就是必须要有length属性
fn2(‘123’) // 3
fn2({length:5}) // 5
fn2(123) //报错
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）