TypeScript及TypeScript在vue3.0项目中的基本使用
一、 TypeScript是什么
-
TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持。它是JavaScript的一个超集,扩展了JavaScript的 语法,因此现有的 JavaScript 代码可与TypeScript 一起工作无需任何修改。
-
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript可以运行在任何浏览器上。 TypeScript 是 Angular2、vue3的开发语言
二、 TypeScript与JavaScript的区别
- 语言层面:JavaScript和TypeScript都是ECMAScript(ECMA-262)的具体实现。
- 执行环境层面:浏览器引擎和Node.js都能够直接运行JavaScript,但无法直接运行TypeScript。
- 时序层面:TypeScript被真正执行前,会通过编译转换生成JavaScript,之后才能被解释执行。
- 厂商层面:JavaScript由Netscape率先推出,现在主要由各大浏览器厂商实现。而TypeScript is a trademark of Microsoft Corporation,目前由微软进行设计和维护。
三、 为什么要用TypeScript
(一)类型检查,语法提示
在TS中允许你为变量指定类型。当你给已定义类型的变量赋值的时候,值的类型不对,便会有错误提示
(二)约束类型,减少不必要的代码逻辑
//定义一个函数计算二个数据的合计
function sum(x,y){ if(typeof x != 'number') { //对于形参的类型要添加转换 x = parseInt(x); }return x+y
};
sum('1',2);
//TS的方式,直接约束了类型
function sum2(x:number,y:number){ return x+y
};
(三)代码重构
Typescript 支持类型最大的好处是可读性。 类型可以给开发者更多的信息,是最有价值的文档。类型很好的体现了代码即文档这一思想。
四、 TypeScript开发的使用建议
是否使用ts来开发项目?或者说ts有必要吗?----- 根据开发场景,怎么方便怎么来
开发条件:
- 大型项目,代码量较多
- 进行封装,组件化开发的时候(有一定开发基础)
- 开发团队中至少一半的成员对ts要有基本的了解,至少有一个成员对ts相关知识点很熟悉
影响:
对前端来说,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等可能不是很熟悉的知识点,有一定的学习成本。
五、支持TypeScript的编辑器
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。 主流的编辑器都支持 TypeScript,推荐使用 Visual Studio Code。
获取其他编辑器或 IDE 对 TypeScript 的支持:
- Sublime Text
- Atom
- WebStorm
- Vim
- Emacs
- Eclipse
- Visual Studio 2015
- Visual Studio 2013
- IDEA 系列
六、TypeScript的安装及 .ts 文件的编译
(一)全局安装
npm install -g typescript
以上命令会在全局环境下安装 tsc 命令,安装完成之后,我们就可以在任何地方执行 tsc 命令了。
(二)查看版本
tsc -v
(三)编译一个 .ts文件
tsc hello.ts
七、TypeScript各类型的定义
TypeScript写法
使用 :指定变量的类型,:的前后有没有空格都可以
let num:number = 15;
num(变量名):number(类型) = 15(具体值)
表示定义一个变量num,指定类型为number; let str:string = 'abc';
表示定义一个变量str,指定类型为string;
(一) 基础类型
字符串类型 string
// 普通字符串
let name = ref<string>("jeasu");// 带变量的字符串
let msg = ref<string>(`my name is ${name.value}`);// 拼接的字符串
let sentence = ref<string>("Hello, my name is " + name + ".\n\n" + "I'll be " + (age + 1) + " years old next month.");
布尔类型 boolean
// 布尔类型
let isAdult = ref<boolean>(false);
数字类型 number
// 数值类型
let age = ref<number>(17);
任意值类型 any
如果是一个普通类型,在赋值过程中改变类型是不被允许的,任意值(Any)用来表示允许赋值为任意类型。
let a1 = ref<string>('seven');
a1 = 7;//error //但如果是 any 类型,则允许被赋值为任意类型。
let sim = ref<any>("seven");
sim = 7;
console.log(sim, "任意类型"); //7//变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型
let a3;
a3 = 'seven';
a3 = 7;
//相当于
let a3:any;
a3 = 'seven';
a3 = 7; //any定义多元数组
let arr = reactive<any[]>([1, true, "hellow"]);
arr[1] = 100;
console.log(arr, "any定义多元数组"); // [1,100,'hellow']
枚举类型 enum
//枚举类型
enum Color {red,blue,green} // 取索引
let c11 = ref<Color>(Color.blue); // 1
// 取内容
let c21 = ref<string>(Color[2]); // green //枚举默认值,默认值可以为小数
enum Color2 {red = 1.5,blue = 10,green = 20}
let c111 = ref<Color2>(Color2.blue); // 10
let c222 = ref<string>(Color2[10]); // blue 根据默认值取对应内容
//由此可见:
enum Color {red,blue,green} //=>{red=0,blue=1,green=3}//若是只有一个添加默认值如下
enum Color3 {red,blue = 5,green}
let c333 = ref<Color3>(Color3.red); //0 未加默认值,默认从0 开始
let c444 = ref<Color3>(Color3.blue); //5 //默认值5
let c555 = ref<Color3>(Color3.green); //6 //从默认值开始+1
let c666 = ref<string>(Color3[6]); //green
//取内容,根据默认值
let c555: string = Color3[6]; //green //任意值,任意值后面不能加别的类型(未赋予默认值)enum Color4 {red,blue = 5,green = <any>"abccc",// green = <any>4, //4// green = <any>true, //true// yellow, //undefinedyellow = "BALUE".length,}let c777 = ref<Color4>(Color4.blue); //5let c888 = ref<Color4>(Color4.green); //abccclet c999 = ref<Color4>(Color4.yellow); //6let c100 = ref<string>(Color4[<any>"abccc"]); //green
数组类型 array
两种方式定义数组:
第一种方式:元素类型后面加上[ ]
let list1 = ref<number[]>([1, 2, 3]);
let list2 = ref<string[]>(["1", "2", "a"]);
let list3 = ref<any[]>([1,true,'abc',{id:2}])
第二种方式是使用数组泛型,Array<元素类型>:
let hobbies = ref<Array<string>>(["历史", "地理", "生物"]);
let list4 = ref<Array<number | string>>(['dasahk',10])
联合类型
一个变量定义可能的多种类型
// 联合类型
let collection1 = ref<number | string | boolean>(6);
let collection2 = ref<number | string | boolean>("good");
let collection3 = ref<number | string | boolean>(true);// 联合类型数组
let collection4 = ref<(number | string | boolean)[]>(["hasd", true, 36]);//联合类型的注意点:对联合类型的数据的操作
// const fn = (str: string | number): number => {
// return str.length; //红波浪线报错,原因是number 没有length属性
// };
// fn("hello");
元组类型 Tuple
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,且数组各项类型与定义一一对应。元组的长度和类型不可变:
let arr1 = ref<[number, string]>([8, "haode"]);
// let arr1 = ref<[number, string]>(["haode", 10]); //ERROR
Void类型
它表示没有任何类型。
// 声明一个void类型的变量没什么大用,只能赋予undefined和 null两种值
let unusable: void = undefined;//但是我们通常在定义函数的时候用它,当一个函数没有返回值时,你通常会见到其返回值类型是void
const warnUser =(x:number,y:number): void=> { console.log("This is my warning message"); if (x > y) {console.log("x>y");} else {console.log("x<y");}
}
Null 和Undefined
默认情况下Null 和Undefined是所有类型的子类型。 就是说你可以把 Null 和Undefined赋值给number类型的变量
// undefind类型
let u: undefined = undefined; // null类型
let n: null = null;
Never 类型
表示永远不会存在值的类型,常用来定义抛出异常或根本就不会有返回值的函数
never 类型是任何类型的子类型,也可以赋值给任何类型;没有类型是never的子类型或者可以赋值给类型(除了never本身)
never 和 void 之间的区别是void 意味着至少要返回一个 undefined 或者 null ,而 never 意味着不会正常执行到 函数的终点。
// 返回never的函数必须存在无法达到的终点const error = (message: string): never => {throw new Error(message);};const infiniteLoop = (): never=> { while (true) { }
}
// 推断的返回值类型为never
const fail = ()=> { return error("Something failed");
}
Object 类型
object 表示非原始类型,也就是除number,string,boolean,symbol,null或者undefined之外的类型,使用object类型,就可以更好的表示想Object.create这样的API
const create = (o: object | null): void => {};create({ prop: 0 }); // OKcreate(null); // OK// create(42); // Error// create("string"); // Error// create(false); // Error// create(undefined); // Error
(二) 类型断言
类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。
类型断言有两种形式。 其一是“尖括号”语法:
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;另一个为 as 语法:
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
(三) 类型别名 type
type abc = string | number[];type n = number;let n1: abc;n1 = "4";n1 = [1];const fn1 = (str: abc): n => {return str.length;};fn1("a");
(四) 对象类型(引入概念:接口 Interfaces)
在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象。接口(Interfaces)可以用于对「对象的形状(Shape)」进行描述。
注意:顺序可以乱,但是定义的对象要受到接口的约束
//定义对象属性interface defineObj {readonly name: string; //只读属性age: number; //必填sex?: string; //选填call(): string; //有返回值,类型为stringaction(): void; //必填、无返回值[propName: string]: any; //任意属性//需要注意的是,一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性}const obj = reactive<defineObj>({name: "abc", //只读,不可修改age: 18, //sex:'男',a: "a",b: 9,c: true,call: () => "call",action: function () {console.log("void接口");},o: { id: 1 },});console.log(obj.call()); //callobj.action(); //void接口return {obj,};
(五) 函数类型
函数类型的定义有两点:参数类型、返回值类型
//有返回值
const f1 = (x: number, y: number): number => {return x + y;
};
console.log(f1(1, 3)); //4//无返回值
const f2 = (n1: number, n2: number): void => {if (n1 > n2) {//处理逻辑console.log(n1 + ">" + n2);} else {//处理逻辑console.log(n1 + "<" + n2);}
};
f2(9, 7); //9>7//有返回值,比较数据
const f3 = (n1: number, n2: number): boolean => {if (n1 > n2) {return true;} else {return false;}
};
console.log(f3(1, 2)); // false//组合数据
const f4 = (n1: string, n2: string): string[] => {return [n1, n2];
};
console.log(f4("a", "b")); // ['a','b']//数据判断校验
const f5 = (s1: string, s2: string): boolean => {let i = s1.search(s2);return i > -1;
};
console.log(f5("abc", "a")); // true// 函数默认值
const f6 = (x: number = 1, y: number = 2): number => {return x + y;
};
console.log(f6()); //3//可选参数,y可以传,也可以不传,可选参数后面是不允许出现必填参数,只能放在最后
const f7 = (x: number = 1, y?: number, z?: number): number => {// return x + y; //报错,y为可选参数,不能加减或拼接return x + (y! ?? 0) + (z! ?? 0);
};
console.log(f7()); // 1
(六) 接口 Interfaces
1、接口在函数中的运用
当传入的参数是对象类型的时候:
//不用接口定义时
const fn = (obj: { id: number; name: string }): string => {return obj.name;
};
const oh = reactive({ id: 3, name: "jeasu" });
console.log(fn(oh)); //jeasu//仅对函数入参做约束
interface params {id: number;name: string;age: number;
}
const fn1 = (o: params): number => {return o.age;
};
const oh1 = reactive({ id: 3, name: "jeasu", age: 18 });
console.log(fn1(oh1)); //18//对整个函数的类型检查,建议对返回值类型也要定义
iinterface SearchFun {(a: string, b: string): boolean;
}
const fn2: SearchFun = (s1, s2) => {let i = s1.search(s2);return i !== -1;// return s1;
};
console.log(fn2("dsdahjk", "jk")); // true
2、接口继承接口
// 二维坐标接口
interface TwoDPoint{x: number,y: number
}
//三维坐标中的z坐标接口
interface ThreeDPoint{z: number
}//四维坐标接口继承了二维坐标接口的x,y坐标和三维接口的z坐标
interface FourDPoint extends ThreeDPoint, TwoDPoint{//内还定义了四维坐标独有的时间坐标time: Date
}
//实例化四维坐标接口
const poi2 = reactive<FourDPoint>({z: 100,x: 200,y: 300,time: new Date(),
});
console.log(poi2, "poi2");//Proxy对象{{z: 100,x: 200,y: 300,time: Mon Oct 11 2021 15:29:15 GMT+0800 (中国标准时间)}}
(七)泛型 Generics
泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
写法是 <变量类型>
泛型的产生条件:定义相同结构的函数时,如下
// 如果根据业务需要传入不同类型的数据,就需要一个类型一个类型的写
// 这样容易造成代码冗余
function fnn(x:number,y:number):number[]{return [x,y]
}function fnn(x:string,y:string):string[]{return [x,y]
}function fnn(x:boolean,y:boolean):boolean[]{return [x,y]
}
因此我们可以将类型用一个变量替代,在使用的时候,将变量类型传过去。
1、泛型变量
泛型变量 T ,T 表示任何类型,也可以用其他字母代替
因此我们上面的代码可以写成:
//函数声明方式
function declaration<T>(x: T, y: T): T[] {return [x, y];
}//函数表达式方式
const expression = <T>(n1: T, n2: T): T[] => {return [n1, n2];
};
// 单类型
console.log(declaration<string>("1", "2")); //['1','2']
console.log(expression<boolean>(true, false)); //[true,false]
console.log(expression<number>(6, 7)); //[6,7]//联合类型console.log(expression<number | string>(6, "a")); //[6,"a"]//当我们不给传类型的时候,类型推断编译器会自动的帮我们判断传入的是什么类型,此时传入的数据只能为单一类型
console.log(expression(1, 23)); //[1,23]//泛型的约束
//错误示范 求变量的长度
// let variable1 = <T>(str: T): number => {
// return str.length; // T是变量,未指定类型,未必会有length这个属性
// };
//修改:
// 给参数限制类型
let limit1 = <T>(str: string | T[]): number => {return str.length;
};
console.log(limit1<number>([1, 3])); //2//或者给泛型变量添加约束 extends
let limit2 = <T extends String>(arr: T): number => {return arr.length;
};
console.log(limit2<string>("one")); //3//泛型的接口约束:就是让这个变量必须有length属性,此时就限定了变量类型有length属性,只能为string ,或者数组类型
interface ILengthNum {length: number;
}
const limit3 = <T extends ILengthNum>(str: T): number => {return str.length;
};
console.log(limit3<string>("oneworld")); //8
console.log(limit3<string[]>(["dasjd", "dhksah", "dahskdha"])); //3
console.log(limit3<number[]>([12, 456, 79, 465])); //4//多个类型参数
const multi = <N, S>(sum: [N, S]): [S, N] => {return [sum[1], sum[0]]; //实现的是交换数组内两项的位置
};
console.log(multi<number, string>([1, "one"])); //["one",1]
2、泛型接口
//泛型接口
interface genface1 {<T>(a: T, b: T): boolean;
}
const func1: genface1 = (x, y) => {return x == y;
};
console.log(func1<number>(1111, 5)); //false
console.log(func1<string>("abc", "abc")); //true//另一种 把泛型参数提前放在接口名上
interface genface2<T> {(a: T, b: T): boolean;
}
const func2: genface2<number> = (x, y) => {return x == y;
};
console.log(func2(7, 5)); //false//另一种写法,先定义类型,再赋值函数
let func3: genface2<string>;
func3 = (x, y) => {return x == y;
};
console.log(func3("abc", "abc")); //true//多类型泛型接口
interface createA3<N, T> {(a: N, b: T): Array<T>;
}
let func4: createA3<number, string>;
func4 = function (i, s) {let arr: string[] = [];arr[i] = s;return arr;
};
func4(1, "dqwy");//泛型约束
interface Length4 {length: number;
}
interface createA4<N, T extends Length4> {(a: N, b: T): string;
}
let func5: createA4<number, string>;
func5 = function (i, s) {//var arr:string[] = []//return arrreturn s;
};
func5(2, "dqwy");
3、用泛型变量和any的区别
//使用泛型变量 T
function fun6<T>(x: T, y: T): T[] {return [x, y];
}
fun6<string>("a", "b");//使用 any:缺点就是传入的类型和返回的类型不确定
function fun7(x: any, y: any): any[] {return [x, y];
}
fun7("a", "b");
(八)Class类
1、ES5:构造函数方式
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。
function Cat(name,color){this.name = name;this.color = color;
}
Cat.prototype.type = '动物';
Cat.prototype.eat = function(){console.log('吃');
}
var c1 = new Cat('tom','blue')
2、ES6:Class 类定义
从ECMAScript 2015,也就是ECMAScript 6开始,JavaScript程序员将能够使用基于类的面向对象的方式。
class Cat1 {name: string;color: string; //属性constructor(name: string, color: string) {//构造函数this.name = name;this.color = color;}eat() {//方法console.log("吃");}
}
const cat1 = new Cat1("tom", "blue");
console.log(cat1.name); //tom
console.log(cat1.color); // blue
cat1.eat(); //吃
3、类的继承
class Animal {type: string;constructor(type: string) {this.type = type;}eat() {return "吃";}say() {return "叫";}
}
class Dog extends Animal {name: string;age: number; //属性constructor(type: string, name: string, age: number) {//构造函数//Animal.prototype.constructor.call(this)super(type); //继承父类的属性和方法this.name = name;this.age = age;}action() {console.log("hsgdajsd");}
}
//实例化
let d = new Dog("犬", "tom", 2);
console.log(d.type); // 犬
console.log(d.name); //tom
console.log(d.age); //2
// d.eat();
// d.say();
d.action(); //hsgdajsd
4、修饰符
static 静态方法
不需要通过实例化处理,可以直接通过类来调用
class Obj {static str: string = "abc";//constructor可以不写,因为上面已经给变量赋值//constructor(str){// this.str = str;//};static action() {console.log("static 静态方法");}
}
//不需要实例化,直接调用Obj
console.log(Obj.str); //abc
Obj.action(); //static 静态方法
public 修饰公共属性或方法
public 修饰的属性或方法都是共有的,可以在任何地方被访问到,默认所有属性和方法都是public。用下面的方式来重写 Cat2:
class Cat2 {public name: string;public color: string; //属性public constructor(name: string, color: string) {//构造函数this.name = name;this.color = color;}public action() {console.log("public 修饰公共属性或方法");}
}
//实例化对象再取值、调用
let cat2 = new Cat2("John", "white");
console.log(cat2.name); //John
console.log(cat2.color); //white
cat2.action(); //public 修饰公共属性或方法
private 修饰私有属性或方法
修饰的属性或方法是私有的,不能在声明它的类外部访问。我们将上例中的 action 方法修饰符改为 private:
class Cat3 {public name: string;private color: string; //属性public constructor(name: string, color: string) {//构造函数this.name = name;this.color = color;}private action() {console.log("private 修饰私有属性或方法");console.log(this.name); //jack ,在内部能访问到该类中的属性}
}
//实例化对象再取值、调用
let cat3 = new Cat3("jack", "black");
console.log(cat3.name); //jack
//下面能打印值,但是有红波浪线报错
// console.log(cat3.color); //报错,说明访问不到 private 修饰的属性
// cat3.action(); //报错,说明访问不到 private 修饰的方法
protected 修饰受保护的属性或方法
修饰的属性或方法是受保护的,它和private类似,区别是它在子类中也是允许被访问的。我们将上例中的 action 方法修饰符改为 protected:
class Cat4 {protected name: string;protected color: string; //属性public constructor(name: string, color: string) {//构造函数this.name = name;this.color = color;}protected action() {console.log("protected 修饰受保护的属性或方法");}
}
//实例化对象再取值、调用
let cat4 = new Cat4("tom", "yellow");
//能打印出来,但是页面书写红波浪报错
// console.log(cat4.name); //说明访问不到 protected 修饰的变量
// console.log(cat4.color); //说明访问不到 protected 修饰的变量
// cat4.action(); //说明访问不到 private 修饰的方法//创建一个子类继承Cat3
class littleCat extends Cat4 {constructor(name: string, color: string) {super(name, color);this.name = name;this.color = color;}say() {//return this.name //tom 可以访问父类里面 protected 修饰的属性console.log(this.name);console.log(this.color);return this.action();}
}
const dog2 = new littleCat("tom", "hua");
dog2.say(); //tom //hua //protected 修饰受保护的属性或方法
5、类实现接口 implements实现
接口和类的区别
接口,对属性和方法类型的约束,抽象的约束
interface ObjType{name:string;action():string;
}
类,对属性和方法的定义,具体的内容
class Obj5{name:string;constructor(name){this.name = name}action(){console.log('执行')}
}
回顾之前的接口定义对象:
interface ObjType{name:string;action():string;
}
let o6:ObjType = { //强制指定类型,添加或减少属性或方法会报错name:'abc',action(){return '123'}
}
类 实现 接口 (implements 实现)
interface ClassType {name: string;action(): void;
}
class Obj implements ClassType {//类Obj受到接口ClassType的约束// 类中的属性和方法要受到接口的约束,但是添加属性或方法不会报错//属性和方法只能比接口里定义的多,不能少name: string;age: number; //新增属性,接口里未定义constructor(name: string, age: number) {this.name = name;this.age = age;}action() {console.log("执行");}a() {return "sah";} //新增方法,接口未定义
}
const obj1 = new Obj("hahaha", 18);
console.log(obj1.name); //hahaha
console.log(obj1.age); //18
console.log(obj1.a()); //sah
obj1.action(); //执行
不同类实现同一个接口
不同类之间有共同的特性,我们把这个特性提出来,就可以定义成一个接口,然后不同类中再去用 implements 去实现这个接口:
//警报功能
interface Alam {name: string;ring(): void;
}
//公共类 门
class Door implements Alam {name: string;constructor(name: string) {this.name = name;}ring() {console.log("我是门这个类");}
}
const door = new Door("door");
door.ring(); //我是门这个类
//门的子类防盗门 拥有报警功能
class SecurityDoor extends Door implements Alam {//里面不写任何东西,完全继承父类// 若添加,则属性和方法是这个子类自己的price: number;constructor(name: string, price: number) {super(name);this.name = name;this.price = price;}ring() {console.log("我是安全门,门的一个字类");}
}
const securityDoor = new SecurityDoor("door", 2889);
console.log(securityDoor.price); //2889
securityDoor.ring(); //我是安全门,门的一个字类
//车 这个类 拥有报警功能
class Car implements Alam {name: string;constructor(name: string) {this.name = name;}ring() {console.log("我是车这个类");}
}
const car = new Car("door");
car.ring(); //我是车这个类
一个类实现多个接口
//警报功能
interface Alam1 {ring(): void;
}
//开灯关灯
interface Light {lightOn(): boolean;lightOff(): boolean;
}
//车实现这两个功能
class Car1 implements Alam1, Light {//用逗号链接接口名ring() {console.log("车的报警功能");}lightOn() {return true;}lightOff() {return false;}a() {} //只能多不能少
}
const car1 = new Car1();
car1.ring(); //车的报警功能
console.log(car1.lightOn()); //true
console.log(car1.lightOff()); //false
6、接口继承类
//定义了一个Bird类
class Control {private state: any; //state是Control的私有属性,只能在Control中访问该变量constructor(state: any) {this.state = state;}print() {console.log("这是Control类的打印操作");console.log(this.state, "打印Control的私有属性state");}
}
const control = new Control(false);
control.print();interface SelectableControl extends Control {select(): void;
}class Button extends Control implements SelectableControl {// state: any;name: string;constructor(name: string, state: any) {super(state);this.name = name;}select() {console.log("这是Button类的操作");// console.log(this.state); //Control中state修饰符改为protected这个才对}
}
const button = new Button("button", true);
console.log(button); //button中有state,但是无法访问state
// console.log(button.state); //Control中state修饰符改为public这个才对
button.select();class TextBox extends Control {constructor(state: any) {super(state);}select() {console.log("这是textbox的select");}
}
const textbox = new TextBox("true");
textbox.select(); //这是textbox的select
7、泛型在类中的运用
class A2<T> {n: T;constructor(num: T) {this.n = num;}add(x: T): T {return x;}
}
var a2 = new A2<number>(1);
console.log(a2.n); //1
console.log(a2.add(3)); //3
八、vue3.0项目中使用typescript
(一)项目的创建
新版本脚手架@vue/cli 创建项目的方式:vue create 项目名称
- 注意点:项目名称不能用驼峰命名法,可以用下划线链接,例如 ts_demo3.0
选择第三个手动创建
选择配置项,因为要演示ts的基本使用,所以一定要选这个
选择vue的版本
提示你是否需要使用class-style,这里不使用使用这个类样式语法,选N
是否使用typescript 和 babel 的形式编译 jsx ,这里选择N
选择路由模式,是否使用history模式
选择css 预处理语言
选择ESLint 配置
选择什么时候进行代码规则检测,保存的时候检测
选择如何存放配置,放在package.json中
是否保存当前配置,方便下次使用
项目创建完成
(二)声明变量的两种方式
1、 ref
ref 常用来监听基本类型数据的变化
<template><div><p>{{count}}</p><p>{{msg}}</p><p>{{isShow}}</p><button @click="myFun">按钮</button></div>
</template><script>
import { ref } from 'vue'
export default {name: 'App',setup() {const count = ref(5)const msg = ref('这是字符串')const isShow = ref(true)const myFun = ()=>{console.log(count.value)console.log(msg.value)console.log(myFun.value)}return {count,msg,isShow,myFun}}
}
</script>
2、 reactive
reactive常用来定义复杂类型数据
<template><div><ul><li v-for="(item,index) in state.list":key="item.id"style="cursor:pointer"@click='remove(index)'>{{item.name}}------{{item.age}} </li></ul></div>
</template><script>
import { reactive } from 'vue'
export default {name: 'App',setup() {const state = reactive({list: [{ id: 1, name: 'zs', age: 10 },{ id: 2, name: 'ls', age: 20 },{ id: 3, name: 'ww', age: 30 },]})const remove = (index) => {//点击删除当前项state.list = state.list.filter((item, idx) => idx !== index)}return {state,remove }}
}
</script>
九、vue3.0+ts项目中引用第三方类库
(一)问题及解决:
在开发过程中,不可避免要引用第三方 javascript 类库。通过直接引用可以调用库的类和方法,但是却无法通过 TypeScript 的严格类型检查机制。此时我们便需要必须为它编写一个声明文件,对外暴露它的 API,有些源码包含了声明文件,有些则需要单独安装。
(二)如何判断是否需要手动添加声明文件:
安装插件/组件库后,在他的安装包里检查是否包含声明文件(后缀以 .d.ts结尾的文件),如果已经包含则不需要处理,可在项目中按正常流程使用;如果不包含声明文件,可以在 typescript 社区搜索 查询相关第三方库的声明文件并通过 npm install 下载;如果社区搜索里也没有的话,则需要自己添加声明文件
(三)三种情况的详细展示:
第一种:ts类库,自带声明文件
由typescript编写或者有些源码包含了声明文件,例如:element-plus,类似的还有axios等等
安装:
npm install element-plus --save
全局注册:
//main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) app.mount('#app')
安装完成后:
源码里每个组件或方法都有它对应的声明文件
第二种:非ts类库,但是已经存在声明文件
当我们发现安装的依赖里面没有声明文件,例如:lodash
安装:
npm i lodash --save
安装完成后:
node_modules中lodash内没有 任何声明文件
我们先去 typescript 社区查询是否有别的贡献者已经编写好的声明文件
我们发现社区里有,并写后面附上了声明文件的安装命令
此时我们已经安装过lodash,所以只需要输入下面安装声明文件的命令:
npm i @types/lodash --save-dev
安装完成后,在node_modules中的@types目录下我们找到lodash,展开可以看到对lodash内的对象或方法做的声明
在页面中局部使用:
//引入
import _ from 'lodash'//调用lodash
const aa = _.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
第三种:非ts类库,也不存在声明文件
这时需要我们手动编写声明文件,例如:indexof
安装:
npm i indexof
安装完成后,安装包内没有声明文件:
我们再去 typescript 社区搜索 查询,没有单独的这个函数插件的声明文件:
因此我们可以手动添加一个声明文件:
1、创建声明文件目录
在src目录下创建@types文件夹,该文件夹内存放自定义声明文件,例如: indexof / indexof.d.ts
2、tsconfig.json 配置编译识别路径
在根目录下的tsconfig.json文件中,includes属性下添加:“src/**/*.d.ts” ,表示src文件夹下的所有 .d.ts文件都会被识别
3、在项目中试用
在使用之前我们一定要看看这个组件或方法的暴露方式,查看它的依赖文件,暴露方式是module.exports = ,我们取用的的时候用 require ,用 import 会报错!
代码测试,console.log(bb)
(四)其他常用插件的使用
全局使用jquery
全局挂载是vue2.x中的思想,vue3.0中已经不推荐使用这种,我们可以在vue.config.js中配置全局使用(vue2.x中也可以使用):
a、使用@vue/cli脚手架构建的项目,在根目录新建vue.config.js文件:
var webpack = require("webpack")
module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({jQuery: "jquery",jquery: "jquery", $: "jquery","windows.jQuery": "jquery"})]}
}
b、在webpack构建的项目中,在webpack.base.conf.js文件中:
const webpack = require('webpack')
module.exports = {plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery",jquery: "jquery", "window.jQuery": "jquery"})]
}
配置完成后,需要在main.js中引入
import $ from 'jquery'
然后就可以直接使用了
$("#main").html("hsahashhadsahsdajsgd").css("background-color", "yellowgreen");
局部使用echarts
1、安装
npm install echarts --save
本次默认安装echarts版本:“^5.2.1” ,这个版本自带声明文件,所以不需要安装@types/echarts,其他版本安装 Vue+Typescript项目中使用echarts (未尝试)
2、引入
在需要引用echarts的组件script中引入echarts:
import echarts from 'echarts';
3、使用
const myChart = echarts.init(document.getElementById("myecharts"));
myChart.setOption({xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: "bar",showBackground: true,backgroundStyle: {color: "rgba(220, 220, 220, 0.8)",},},],
});
写完后,我们会发现有红波浪线报错:
Argument of type ‘HTMLElement | null’ is not assignable to parameter of type ‘HTMLElement’. Type ‘null’ is not assignable to type ‘HTMLElement’.
就是我们没有给获取到的dom加类型,有可能他是null,此时的解决办法是:添加类型断言
然后运行,结果在控制台发现报错:
原因: 在官网中我们可以看到,v5中去除了default exports 的支持,导入的写法有所改变
解决方案: 在导入包的时候加上 * as ,刷新页面,图表功能正常显示
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- Visual Studio代码:高级用户指南
In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow. 在本指南中,您将学习如何利用Visual Studio Code来增强开发工作流。 This article is written for Visual Studio Code beginners, and use…...
2024/4/13 2:18:28 - 2020-08-25
实习指导:李春雨 1) Java开发 2) WebUI开发 2. 实习目的:全国疫情可视化平台 3. 当前开发架构 合格软件工程师基本素质 1. 熟悉linux操作系统 2. 能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化 1) 前端工程师…...
2024/4/19 13:52:05 - 杰普实习日志 第一天学习内容
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…...
2024/4/15 6:59:12 - 8月27日学习日志
css基础 选择器 类选择器 .first {} 选中class为first的元素 id选择器 #one {} 选中id为one的元素 标签选择器 div {} 选中所有的div元素 父子选择器 .first > div {} 选中class为first的所有div孩子元素 后代选择器 .first div{} 选中class为first的所有div后代元素 基础布…...
2024/4/12 3:26:54 - 杰普实训日志第一天学习内容
杰普实习日志 第一天学习内容 主讲人:李春雨 主讲人原创内容,https://gitee.com/plusyu/shixun_hdjd/commit/7fd126f6bacfec6b27357a22bfad4afb1a2ad4b3 1 主要学习内容: 2 1) Java开发 3 2) WebUI开发 4 5 2. 全国疫情可视化平台 6 7 3. …...
2024/4/12 3:26:36 - 实训上课内容1
实训第一天上课内容汇总 概述 Java开发WebUI开发 全国疫情可视化平台 当前开发架构 合格软件工程师基本素质 熟悉linux操作系统能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化 前端工程师 1. 重构技能:html/css/js 2. 交互技能&…...
2024/4/6 1:20:53 - day1 笔记
day1笔记 李 Java开发WebUI开发 全国疫情可视化平台 当前开发架构 合格软件工程师基本素质 熟悉linux操作系统能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化 前端工程师 1. 重构技能:html/css/js 2. 交互技能:ajax 3. …...
2024/4/15 22:02:55 - 8.25日学习日志
Java开发WebUI开发 全国疫情可视化平台 当前开发架构 合格软件工程师基本素质 熟悉linux操作系统能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化 前端工程师 1. 重构技能:html/css/js 2. 交互技能:ajax 3. 企业级框架技能…...
2024/4/12 3:26:42 - 8.25实训内容
8.25实训内容 1.当前开发架构 合格软件工程师基本素质 1. 熟悉linux操作系统 2. 能够使用终端的绝对不使用图形化界面,能使用英文界面绝对不汉化 前端工程师 1. 重构技能:html/css/js 2. 交互技能:ajax 3. 企业级框架技能:vue…...
2024/4/18 13:16:48 - 华东交通大学18级企业实训day1笔记·讲师:李春雨
前端工程师 1. 重构技能:html/css/js 2. 交互技能:ajax 3. 企业级框架技能:vue/vuerouter/vuex/elementui | react | angular 4. 移动端技能:webapp、hybirdapp、小程序 5. 通用技能:linux/svn/git/vscodeJava工程师 …...
2024/4/12 3:26:36 - 做双眼皮的疤痕
...
2024/4/16 22:47:36 - 开刀双眼皮怎么弄成
...
2024/4/12 13:12:20 - 哪里双眼皮医院好心情
...
2024/4/17 7:07:12 - 上海开邯郸天姿割割了双眼皮多久能恢复吗
...
2024/4/19 20:20:23 - 开双眼皮多少宽合适
...
2024/4/19 12:02:03 - SolidWorks 2016 SP5.0 64位 中文版
万万没想到下载安装的SolidWorks 2018 SP4.0我的老爷机独显4G居然带不动了,略卡绘图还是挺难受的。于是打算装回SolidWorks 2016 SP5.0 结果发现自己引文一心要装18版本把之前的16版删除了,百度云真的是下载慢。但是还是下载下来了,不删了,再删我是Dog。自己留着备份吧!每…...
2024/4/13 23:54:46 - ionic3使用iframe引用外部网站
1,在configxml文件中添加 <access origin"*" /> <allow-intent href"*" /> <allow-navigation href"*" /> 2.html中加入iframe标签 <ion-content > <iframe id"iframe" sandbox&…...
2024/4/12 13:48:16 - 在开双眼皮哪里好找
...
2024/4/18 2:00:48 - 什么脸型不适合长沙双眼皮价格要美莱
...
2024/4/12 3:27:42 - 哈尔滨双眼皮艺星医生
...
2024/4/12 3:27:30
最新文章
- java音乐播放器系统设计与实现springboot-vue
后端技术 SpinrgBoot的主要优点有: 1、为所有spring开发提供了一个更快、更广泛的入门体验; 2、零配置; 3、集成了大量常用的第三方库的配置; Maven: 项目管理和构建自动化工具,用于java项目。 java: 广泛使用的编程语…...
2024/4/19 21:48:22 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - Docker - Nginx
博文目录 文章目录 说明命令 说明 Docker Hub Nginx 数据卷数据卷印射在容器内的路径nginx.conf/etc/nginxnginx.html/usr/share/nginx/htmlnginx.log/var/log/nginx 容器内的路径说明/etc/nginx/nginx.conf配置文件/etc/nginx/conf.d配置目录/usr/share/nginx/html静态目录/…...
2024/4/19 0:58:44 - dp小兰走迷宫
昨天学习了bfs的基本概念,今天来做一道经典习题练练手吧! bfs常用的两类题型 1.从A出发是否存在到达B的路径(dfs也可) 2.从A出发到B的最短路径(数小:<20才能用dfs) 遗留的那个问题的答案- 题目:走迷宫 #incl…...
2024/4/18 22:34:00 - xv6项目开源—05
xv6项目开源—05.md 理论: 1、设备驱动程序在两种环境中执行代码:上半部分在进程的内核线程中运行,下半部分在中断时执行。上半部分通过系统调用进行调用,如希望设备执行I/O操作的read和write。这段代码可能会要求硬件执行操作&…...
2024/4/18 10:53:48 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/19 14:24:02 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/19 18:20:22 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/19 11:57:31 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/19 11:57:31 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/19 11:57:52 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/19 11:57:53 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/19 11:58:14 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/19 11:58:20 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/19 11:58:32 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/19 11:58:39 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/19 11:58:51 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/19 18:09:34 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/19 11:59:15 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/19 11:59:23 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/19 11:59:44 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/19 11:59:48 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/19 12:00:06 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/19 16:57:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/19 12:00:25 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/19 12:00:40 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57