大新._社区达人页_阿里云开发者社区

你还在认为TypeScirpt 是 AnyScript ？ --《前端那些事》

前言聊聊为何要学习TypeScript?从开发角度来讲, TypeScript 作为强类型语言，对属性有类型约束。在日常开发中少了减少了不必要的因参数类型造成的BUG,当你在使用同事封装好的函数时，类型不知道怎么传递，在开发TS 时，它会有很友好类型的提示，此时你就知道该函数需要传递哪些参数，并且参数类型是什么类型。从项目结构来讲, 使用TypeScript 可以很好的管控项目，通过建立各个模块的类型管理，通过interface 或者类型断言来管理项目中类型，在对应的模块使用类型，当项目需要迭代更新时，只需要进行对对应的模块类型进行更改。从前端全局观来讲，社区三大框架早已结合TypeScript 了，社区也很完善，已经过了该不该学习TypeScript 的阶段了。去年还有很多朋友犹豫用不用学习TypeScript , 很多被社区朋友发的文章误导， TypeScript 就是 AnyScript。TypeScript 对没有接触过强类型语言的朋友有点学习成本，而且在使用TypeScript 进行开发时，前期可能代码会很臃肿，让你觉得看起来有很多无用的代码，不过在后期，你就可以感觉到 TypeScript 给你带来的乐趣了。学会 TypeScript 也对你在职场竞争有点优势，在跳槽时，假如你已经使用 TypeScript 结合框架做过一些项目，面试官也会优先考虑你的，薪水从而也提升了。前端之路还有很长，新的技术/框架更新频率很快，最终还是离不开 JavaScript。下面，我们一起来看看 TypeScript,本文是对标 TypeScript 文档进行来讲解，更加大白话的简单讲述如何使用TypeScript .入手导图TypeScript一，安装环境#npm install -g typescript1.1 VSCode 配置自动编译文件#1. 在目录下 tsc --init 自动生成 tsconfig.json tsconfig.json 下 outdir 是输出的路径 #2. 任务--- 运行任务监视 tsconfig.json 二，基本语法2.1 数组定义使用// 第一种定义方法 let 数组名：类型[] = [] var arr:number[] = [1,2,3]; console.log(arr); // 第二种定义方法 let 数组名：Array[类型] = [] var newArr:Array<number> = [1,2,3]; console.log(newArr)2.2 元组它表示已经元素的个数和元素类型的数组，各个元素类型可以不一样。访问元组长度和元素var strArr:[number,string,boolean] = [22,'测试',false] console.log(strArr.length) console.log(strArr[0]) #它只能按类型的优先顺序输入内容，否则报错2.3 枚举 enumenum类型是对JavaScript标准数据类型的一个补充。如果没有给枚举指定索引的话，默认为 0 ，通过枚举对象[索引] 可以获取值如果指定了枚举索引为字符串的话，通过枚举.属性获取的它的值enum Sex {Man,Woman} let m:Sex = Sex.Man; console.log(m) //0 let w: string = Sex[1] console.log(w) //Woman enum Animal {Dog = 3, Cat, Tiger}; console.log(Animal[5]) //Tiger enum info {student = '学生', teacher = '教师', parent = '家长' }; console.log(info.teacher) //教师2.4 任意类型 anyany 为任意类型，一般在获取dom 使用// 任意类型 const newArrs:any = ['测试不同数据 ',222,false] console.log(newArrs) # 输出结果为[ '测试不同数据 ', 222, false ] # 使用场景：当你不知道类型或一个对象或数据需要多个类型时，使用any2.5 undefined 类型let num:number | undefined ; console.log(num) // 输出 undefined，但是不会报错 let newNum:number | undefined = 33; console.log(newNum) // 输出 33 2.6 never 类型never 代表不存在的值类型，常用作为抛出异常或者无限循环的函数返回类型# 应用场景 #1. 抛错误 const errDate = (message:string): never => { throw new Error(message) } #2. 死循环 const date_for = (): never => { while(true) {} } # never 类型是任意类型的子类型，没有类型是never 的子类型别的类型不能赋值给never类型，而 never 类型可以赋值给任意类型2.7 void 类型void 为函数没有类型，一般用在没有返回值的函数# 如果方法类型为number，则必须返回内容，内容且必须为数字 function add():number{ return 2323; } # 如果方法类型为void，不需要返回内容 function getAdd():void{ console.log('测试') } # 如果方法类型为any，则可以返回任意类型 function getAny():any{ return 999 + 'Hello TypeScript' } console.log(getAny())//999 'Hello TypeScript'三，类型断言什么是类型断言？有时候你在定义一个变量时，起初是不知道是什么类型，但在使用过程中知道是什么类型，这时就会用到类型断言了。3.1第一种写法尖括号const str = '测试' const resLength : number = (<string>str).length3.2第二种写法 asconst str = '测试' const resLength : number = (str as string).length四，接口TypeScript的核心原则之一是对值所具有的结构进行类型检查。验证类型时，顺序不影响验证。简单的来说，它是类型约束的定义，当你使用这个定义接口时，它会一一匹对接口中定义的类型。只要不满足接口中的任何一个属性，都不会通过的。4.1 接口可选属性有时候，接口属性不是必须全部需要的，满足某些条件才会需要，这时，就可以采用可选属性格式：属性 ?: 类型interface Login{ userName: string, password: string, auth ?: string } function getLogin(obj: Login) { if(obj.auth == '管理员') { console.log('可以查看所有菜单') } else { console.log('您的权限比较低,目前不能查看') } } getLogin({ userName:'zhangsanfeng', password: '12121121sd', auth: '管理员' }) //可以查看所有菜单 getLogin({ userName:'zhangsanfeng', password: '12121121sd' }) //您的权限比较低,目前不能查看 4.2 接口只读属性只读属性：意味着给属性赋值了后，不可改变。格式： readonly 属性 : 类型 interface Menus { readonly title?:string, icon?:string, readonly path?:string, readonly Layout?:string } function getMenuInfo(data:Menus){ console.log(data) data.icon = '修改图标' // 可以修改 // data.path = '/home' 报错，禁止修改，接口属性为只读 console.log(data) } getMenuInfo({ title: '主页', icon:'homes', path:'/home', Layout: 'Layput' }) 4.3 接口函数类型用来约束函数传递参数类型函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。格式： (参数1：类型，参数2：类型) ：返回值类型 // 获取用户信息 interface UserInfo { (name: string,adress: string,phone: number) : string } let getUsefInfo:UserInfo = function(name,adress,phone){ return `${name}住在${adress},手机号为${phone}` } console.log(getUsefInfo('张锋','天津南开区xx小区',188888888))4.4 接口可索引类型在定义一个数组时，可以定义一个索引类型接口，这样就约束了它必须传递哪些类型的值。访问: 通过变量[索引]interface Code{ [index : number] : string } let errCode : Code = ['200 成功','301 重定向', '400 客户端错误', '500 服务端出错'] console.log(errCode[3]) //500 服务端出错4.5 类型接口实现接口描述了类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。interface Animals { eye: number, leg: number, } class Dog implements Animals { eye: number; leg: number; kind: string constructor(eye: number, leg: number, kind: string) { this.eye = eye this.leg = leg this.kind = kind } getDogInfo(){ console.log(`品种为${this.kind},有${this.eye}只眼，${this.leg}条腿`) } } let hashiqi = new Dog(2,4,'哈士奇'); hashiqi.getDogInfo() //品种为哈士奇,有2只眼，4条腿4.6 接口继承(多合一)接口之间可以互相继承，这样可以更灵活地将接口分割到可重用的模块里。interface Shape1 { data: string } interface Shape2 extends Shape1{ code: number // Shape2 具有 Shape1 的特征 } class Message implements Shape2 { code: number; data: string; constructor(code : number,data: string) { this.code = code; this.data = data } getCodeInfo(){ console.log(`状态码为${this.code},返回信息为${this.data}`) } } let err = new Message(500,'服务端错误') err.getCodeInfo() //状态码为500,返回信息为服务端错误4.7 接口继承类当接口继承了一个类，那么接口也会拥有类的属性和方法。当别的类实现这个接口时，会同时实现接口的属性和方法，继承类的属性和方法class Log { time: string = '2020-11-2'; getLog(){ console.log('测试') } } interface Shape3 extends Log{ message : string } class ErrLog implements Shape3 { message: string ; time: string; constructor(message: string, time: string) { this.message = message; this.time = time } getLog(): void { console.log("Method not implemented."); } } let errs = new ErrLog('测试','2020-11-2') errs.getLog() //Method not implemented. 五，泛型接触过JAVA 的同学，应该对这个不陌生，非常熟了。作为前端的我们，可能第一次听这个概念。通过字面意思可以看出，它指代的类型比较广泛。作用： : 避免重复代码，代码冗余但是它和 any 类型还是有区别的。any 类型：如果一个函数类型为any，那么它的参数可以是任意类型，一般传入的类型与返回的类型应该是相同的。如果传入了一个 string 类型的参数，那么我们也不知道它返回啥类型。泛型：它可以使返回类型和传入类型保持一致，这样我们可以清楚的知道函数返回的类型为什么类型。5.1 泛型接口泛型接口可以这样理解：当你需要给接口指定类型时，但目前不知道属性类型为什么时，就可以采用泛型接口你可以给接口指定参数为多个泛型类型，也可以单个；当使用时，明确参数类型即可。 interface User <T,S,Y> { name: T; hobby: S; age: Y; } class People implements User<String,String,Number> { name: String; hobby: String; age: Number; constructor(name:string,hobby:string,age:number){ this.name = name; this.hobby = hobby; this.age = age; } getInfo(){ console.log(this.name+"------------------"+this.hobby) console.log(`${this.name}的年龄为${this.age}`) } } let xiaoZhou = new People('小周','敲代码',22) xiaoZhou.getInfo() //小周------------------敲代码 // 小周的年龄为22 5.2 泛型函数定义泛型函数，可以让传入参数类型参数和返回值类型保持一致。泛型标志一般用字母大写，T 可以随意更换格式：函数名<T> (参数1：T) : 返回值类型 Tfunction genericity<T> (data: T) : T { console.log(data) return data } genericity("测试") genericity(666) genericity(['前端','后端','云端']) 5.3 泛型类什么是泛型类它规定了类中属性和方法的类型，而且必须和类型定义的类型保持一致。泛型类的作用可以帮助我们确认类的所有属性都在使用相同的类型使用格式class 类名<T> { name!: T; hobby!: T; } # 这样这个类的所有类型为 number let 实例 = new 类名<number>(); class GenericityA<X>{ sex!: X; age!: X; } let gen = new GenericityA<number>(); // gen.sex = '测试' 报错 gen.age = 3 console.log(gen.age)5.4 泛型约束接口约束通过定义接口，泛型函数继承接口，则参数必须实现接口中的属性，这样就达到了泛型函数的约束类约束通过给类的泛型指定为另一个类，这样就规定了类泛型的类型都为另一个类# 第一种 // 定义接口 interface DataInfo{ title: string, price: number } // 泛型函数继承接口，进行对参数类型约束, 如果传入的参数中，没有包含接口属性，则编译不通过 function getDataInfos< T extends DataInfo> (obj: T) : T { return obj } let book = { title: '前端进阶', price: 50, author: '小新' } console.log(getDataInfos(book)) //{ title: '前端进阶', price: 50, author: '小新' }# 第二种 // 通过类来约束 class Login{ username: string; password: string; constructor(username: string,password:string){ this.username = username this.password = password } } class Mysql<T>{ login<T>(info:T):T{ return info } } let x = new Login('admin','12345'); let mysql = new Mysql<Login>(); console.log(mysql.login(x)) //Login { username: 'admin', password: '12345' }<hr/>六，类 Class说到类，做后端的朋友应该都了解，前端在ES6 中，才出现了类 Class 这个关键词。Class 有哪些特征属性构造器方法继承 extends属性 / 方法修饰符静态属性抽象类存取器 getters/setters6.1 修饰符public 共有的当属性 / 方法修饰符为 public 时，如果前面没有，默认会加上，我们可以自由的访问程序里定义的成员。class Fruit { public name: string; price: number; // 以上为等价 constructor(name: string, price: number) { this.name = name; this.price = price } getFruitInfo(){ console.log(`您要购买的水果为${name},价格为${this.price}`) } }private 私有的当成员被标记成 private时，它就不能在声明它的类的外部访问。class Fruit { public name: string; private price: number; // 以上为等价 constructor(name: string, price: number) { this.name = name; this.price = price } getFruitInfo(){ console.log(`您要购买的水果为${name},价格为${this.price}`) } } const apple = new Fruit('苹果',22) // console.log(apple.price) 报错，实例不可以访问私有属性 protected 受保护的protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问,不可以通过实例来访问受保护的属性。class A { protected name : string; protected age : number; constructor(name: string , age: number) { this.name = name; this.age = age } getA(){ console.log('A') } } class B extends A { protected job : string; constructor(name: string, job: string,age: number) { super(name,age) this.job = job } getB(){ console.log(`B 姓名为${this.name} && 年龄为${this.age} && 职业为${this.job},`) } } let b = new B('小飞','前端工程师',22) b.getA() //A b.getB() //B 姓名为小飞 && 年龄为22 && 职业为前端工程师, // console.log(b.name) 报错，访问不了，protected成员只能在派生类中可以访问，不能通过实例来访问。6.2 静态属性类的静态成员(属性和方法) 只能通过类来可以访问。定义： static 属性 / static 方法class Food { public name: string; private price: number; static adress: string = '四川'; // 以上为等价 constructor(name: string, price: number) { this.name = name; this.price = price } getFruitInfo(){ console.log(`您要购买的东西为${name},价格为${this.price}`) } } const spicy = new Food('辣条',3) console.log(Food.adress) //四川 // console.log(spicy.adress) 报错类的实例对象不可以访问类的静态属性。只可以通过类.属性来访问 6.3 继承 extend继承的本意很好理解，当子类继承了父类，那么子类就拥有了父类的特征(属性) 和行为(方法)，class T { name:string; constructor(name:string){ this.name = name } getNames(){ console.log('继承类T') } } class S extends T { constructor(name:string){ // 派生类拥有T属性和方法 super(name) } getName(){ console.log(this.name) } } let ss = new S('测试继承') ss.getName() ss.getNames() // 测试继承 // 继承类T6.4 抽象类抽象类可以包含成员的实现细节。 abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。abstract class E{ abstract name: string; abstract speak():void; abstract play():void; } class F implements E { name: string; constructor(name:string){ this.name = name } // 派生类 F 必须实现抽象类E 的方法和属性 speak(): void { console.log('具有聊天功能') } play(): void { console.log('具有娱乐功能') } get(){ console.log(this.name) } } let f = new F('测试'); f.play() //具有娱乐功能 f.get() // 测试 f.speak() //具有聊天功能七，TS 中的函数函数类型包括参数类型和返回值类型7.1 函数添加返回值类型每个参数添加类型之后再为函数本身添加返回值类型.TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。下面会介绍在TS 中，两种写函数的格式// 第一种写法 let getInterFaceInfo : (obj:object) => void = function(obj){ console.log(obj) } let infos: object = { code: 200, message: '发送成功' } getInterFaceInfo(infos) // 第二种写法 function getCode(code: number, message:string) : void { console.log(`code为${code}，message为${message}`) } getCode(200,'接受成功') 7.2 函数可选参数 / 默认参数JavaScript里，每个参数都是可选的，可传可不传。没传参的时候，它的值就是undefined。在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。可选参数必须放在必须参数后面。格式：函数名（变量名？：类型）:类型 {} 默认参数，在传递参数时，指定默认值格式：函数名（变量名：类型 = "xx"）:类型 {} // 可选参数 function getNetWork(ip:string,domain:string,agreement?:string){ console.log(`ip地址为:${ip},域名为${domain},协议为${agreement}`) } getNetWork('127.0.0.1','www.xiaomi.com') //ip地址为:127.0.0.1,域名为www.xiaomi.com,协议为undefined // 默认参数 function getNetWorks(ip:string,domain:string,agreement:string = 'http'){ console.log(`ip地址为:${ip},域名为${domain},协议为${agreement}`) } getNetWorks('127.0.0.1','www.xiaomi.com') //ip地址为:127.0.0.1,域名为www.xiaomi.com,协议为http 7.3 函数剩余参数有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。在JavaScript里，你可以使用 arguments来访问所有传入的参数。在TypeScript 中，可以把所有参数集中在一个变量中，前面加上... 表示剩余参数。注意直接通过变量访问也可以通过索引访问只能定义一个剩余参数，且位置在默认参数和可选参数后面function getNumberInfo(num:number,...peopleArray: string []) { console.log(`人员个数为${num},成员为${peopleArray}`) // 也可以通过索引来获取元素 console.log(`人员个数为${num},成员为${peopleArray[1]}`) } getNumberInfo(4,'小明','小李','小红','小张') //人员个数为4,成员为小明,小李,小红,小张 //人员个数为4,成员为小李<hr/>八，枚举枚举可以清晰地表达一组对应关系。TypeScript支持数字的和基于字符串的枚举。8.1 数字枚举默认枚举的顺序以 0 开头，然后自动递增。枚举顺序也可以指定值，指定后，它前面第一个还是以0 递增访问通过枚举名.属性访问到的是序号通过枚举名[序号] 访问到的是属性名enum Sex { x, man = 4, woman } console.log(Sex.x) //0 console.log(`小红的性别为${Sex[5]}`) //小红的性别为woman console.log(`后端接受小红的性别ID ${Sex.woman}`) //后端接受小红的性别ID 58.2 字符串枚举enum Job { frontEnd = '前端', backEnd = '后端' } console.log(Job) //{ frontEnd: '前端', backEnd: '后端' } 九，高级类型9.1 交叉类型它指可以将多个类型合并为一个类型。标识符为 & , 当指定一个变量类型为交叉类型时，那么它拥有交叉类型的所有属性，也就是并集。interface DonInterface { run():void; } interface CatInterface { jump():void; } //这里的pet将两个类型合并,所以pet必须保护两个类型所定义的方法 let pet : DonInterface & CatInterface = { run:function(){}, jump:function(){} } 9.2 联合类型联合类型表示一个值可以是几种类型之一。用竖线（ |）分隔每个类型。一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员。 function getMenus(info: string | number) { console.log(info) } getMenus("测试") getMenus(2) // getMenus(false) 报错十，模块模块：定义的变量，函数，类等等，只能在自身的作用域里使用。如果想在外部访问使用，那么必须使用export 将其导出即可。使用模块：通过 import 将模块内容导入即可使用。模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。10.导出10.1 导出声明任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出。导出可以对任何声明进行重命名，防止命名冲突，通过 as 来修改# 模块A 文件 // 导出接口 export interface A { getList() : void } // 导出变量 export const GET_METHOD = "get" // 导出类 export class S implements A { getList(): void { console.log("导出类") } } function getQueryData():void { console.log("获取分页数据") } // 导出模块变量重命名 export { getQueryData as getQuery} # 文件B import {getQuery,S,A} from './模块A'; // 使用模块中的函数 getQuery() // 实例模块中类的对象 const a = new S(); a.getList() // 输出导出类 // 实现模块中的 A 接口 class Y implements A { getList(): void { throw new Error('Method not implemented.'); } } 10.2 组合模块使用通常一个大的模块是多个子模块组成的。那么我们可以通过在大的模块中导入多个子模块。格式： export * from "模块" 使用组合模块： import * as 重命名变量 from ‘组合模块路径’ # 模块C // 导出变量 export const GET_METHOD = "get"# 模块B export const str: string = "B模块" export function getContent():void{ console.log("我是模块B的内容") }#组合模块 const res : object = { code: 200, message: "请求成功" } export function getRes(): void { console.log(res) } # 导出子模块 export * from "./modulesC" export * from "./moduleB"10.3 使用组合模块import * as T from "./modulesA"; // C 模块中的 console.log(T.GET_METHOD) // B 模块中的内容 console.log(T.str) //B模块 T.getContent() //我是模块B的内容 // A 模块中的内容 T.getRes() //{ code: 200, message: '请求成功' } 10.4 默认导出每个模块都可以有一个default导出。默认导出使用 default关键字标记；并且一个模块只能够有一个default导出。#模块 export interface K { name:string; birth:string; } export default class Student implements K { name: string; birth: string; constructor(name:string,birth:string){ this.name = name; this.birth = birth; } getStudentInfo(){ console.log(this.name+this.birth) } }#文件A import D,{K} from './modulesD' // 使用默认导出 const d = new D('小明','1998') d.getStudentInfo() // 参数类型为接口K function getMessage(obj: K): void { console.log(obj) } let obj = { name:"小红", birth: "1998" } getMessage(obj);10.5 export = 和 import = require()CommonJS和AMD的环境里都有一个exports变量，这个变量包含了一个模块的所有导出内容。CommonJS和AMD的exports都可以被赋值为一个对象 exports 和 export default 用途一样，但是 export default 语法不能兼容CommonJS和AMD的exports。在TypeScript 中，为了达到这样效果，可以这样写:导出： export = 等于 exports 导入： import module = require("module")# 模块 // 相当于默认导出 export = class Mongodbs{ host:string; user:string; password:string; port:number; databaseName:string; constructor(host:string,user:string,password:string,port:number,databaseName:string) { this.host = host; this.user = user; this.password = password; this.port = port; this.databaseName = databaseName } query(table:string){ console.log(`select * from ${table}`) } } #使用模块 import MogoDb = require("./modulesE") const mogodb = new MogoDb('1270.0.1','admin','123456',3006,'TypeScript') mogodb.query('Vue') //select * from Vue 十一，命名空间定义“内部模块”称为“命名空间”“外部模块”称为“模块”作用减少命名冲突，将代码组织到一个空间内，便于访问。使用格式通过 namespace 空间名 { } ，内部通过 export 导出来使用内部成员namespace XiaoXin { export interface GetData{ name: string; price: number; getInfo(obj:object):any; } export interface GetMessage { code: number; message: string; } export class Book implements GetData{ name: string; price: number; constructor(name:string,price:number){ this.name = name; this.price = price } getInfo(obj: object) { throw new Error("Method not implemented."); } buyBook(obj: GetMessage) { console.log(obj) } } } const fontEnd = new XiaoXin.Book("前端开发手册",99) var obj = { code: 200, message:"购买成功" } fontEnd.buyBook(obj) //{ code: 200, message: '购买成功' } function test(obj:XiaoXin.GetMessage){ console.log(obj) } test(obj) //{ code: 200, message: '购买成功' } 11.1 拆分命名空间当应用变得越来越大时，我们需要将代码分离到不同的文件中以便于维护。我们可以将命名空间文件拆分成多个文件，但是它们的命名空间名还是使用的同一个，各个文件相互依赖使用。但是必须文件最开头引入命名空间文件。格式: /// <reference path="MS1.ts"/> # 根命名空间 namespace School { export const schoolName = "清华大学" }# 子命名空间1 /// <reference path="MS1.ts" /> namespace School{ export class Teacher { faculty:string; name:string; age:number; constructor(faculty:string,name:string,age:number){ this.faculty = faculty; this.name = name; this.age = age } getInfo(){ console.log(`${this.name}为${this.faculty},年龄为${this.age}`) } getSchool(schoole:string){ console.log(`${this.name}老师就职于${schoole}`) } } }# 子命名空间2 /// <reference path="MS1.ts" /> namespace School{ export class Student{ name:string; age:number; hobby:string; constructor(name:string,age:number,hobby:string) { this.name = name; this.age = age; this.hobby = hobby; } getInfo(){ console.log(`${this.name}是一个学生，年龄为${this.age},爱好是${this.hobby}`) } } } # 使用合并的命名空间导入命名空间 /// <reference path="MS1.ts" /> /// <reference path="MS2.ts" /> /// <reference path="MS4.ts" /> let teacher = new School.Teacher('计算机教授','张博士',34); teacher.getInfo() //张博士为计算机教授,年龄为34 teacher.getSchool(School.schoolName) //张博士老师就职于清华大学 let students = new School.Student('张三',17,'玩LOL'); students.getInfo() //张三是一个学生，年龄为17,爱好是玩LOL编译命名空间文件第一种方法：会编译为一个js文件 tsc --outFile sample.js Test.ts 第二种方法：会编译为多个js文件，然后通过 <script> src 引入js文件即可 tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts 十二，装饰器装饰器是一种特殊类型的声明，它能够附加到类声明、方法、访问符、属性、类方法的参数上，以达到扩展类的行为。自从 ES2015 引入 class，当我们需要在多个不同的类之间共享或者扩展一些方法或行为的时候，代码会变得错综复杂，极其不优雅，这也是装饰器被提出的一个很重要的原因。12.1 修饰器分类类装饰器属性装饰器方法装饰器参数装饰器修饰器写法： 1. 普通修饰器（不传参数） 2. 装饰器工厂 (传参数)12.2 类装饰器类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。使用场景：应用于类构造函数，可以用来监视，修改或替换类定义。const extension = (constructor: Function):any => { constructor.prototype.coreHour = '10:00-15:00' constructor.prototype.meeting = () => { console.log('重载：Daily meeting!'); } } @extension class Employee { public name!: string public department!: string constructor(name: string, department: string) { this.name = name this.department = department } meeting() { console.log('Every Monday!') } } let e: any = new Employee('装饰器', '测试') console.log(e) //Employee { name: '装饰器', department: '测试' } console.log(e.coreHour) // 10:00-15:00 e.meeting() // 重载：Daily meeting! 12.3 类属性装饰器作用于类属性的装饰器表达式会在运行时当作函数被调用，传入下列3个参数 target、name、descriptor：target: 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象name: 成员的名字descriptor: 成员的属性描述符执行顺序：当调用有装饰器的函数时，会先执行装饰器，后再执行函数。通过修饰器完成一个属性只读功能，其实就是修改数据描述符中的 writable 的值：function readonly(value: boolean){ return function(target:any,name:string,descriptor:PropertyDescriptor) { descriptor.writable = value } } class Student{ name:string; school:string = '社会大学' constructor(name:string) { this.name = name } @readonly(false) getDataInfo(){ console.log(`${this.name}毕业于${this.school}`) } } let sss = new Student('小李子') // 报错, 只能读,不能修改 // sss.getDataInfo = () => { // console.log("测试修改") // } sss.getDataInfo()十三，TS + Vue 环境搭建13.1 升级Vue-cli1. 先卸载旧的版本 npm uninstall -g @vue/cli #or yarn global remove @vue/cli 2.安装最新版本 npm install -g @vue/cli # OR yarn global add @vue/cli 13.2 创建项目vue create projectname 项目名必须小写13.3 关闭变量未声明报错打开 package.json ，修改rules 内容，改为如下： "rules": { "no-unused-vars": 0 } 这样就关闭了更多精彩文章在主页最后文中如有错误，欢迎码友在评论区指正，如果对你有所帮助，欢迎点赞和关注~~~

最全总结 JavaScript Array 方法详解--《前端那些事》

前言我们在日常开发中，与接口打交道最多了，前端通过访问后端接口，然后将接口数据二次处理渲染到页面当中。二次处理的过程是考验 Coder 对 Array 是否熟练以及在何种场景下使用哪种方法处理最优。小编，在最近开发中就遇到了 Array 问题，在处理复杂的业务需求时，没想到Array 有类似的方法，然后将方法组合起来解决当下问题。文章用下班时间肝了一周才写完，看完点赞、转发是对我最大的支持。遍历数组方法不会改变原数组的遍历方法forEach()forEach() 方法按照升序为数组中每一项执行一次给定的函数。语法arr.forEach(callback(currentValue , index , array) ，thisArg)currentValue : 数组当前项值index : 数组当前项索引arr : 数组对象本身thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。注意如果使用箭头函数表达式来传入函数参数， thisArg 参数会被忽略，因为箭头函数在词法上绑定了 this 值。forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。every 不会改变原数组。//防盗贴：微信公众号: 前端自学社区 const arr = [2,3,4,1,44] arr.forEach(val =>{ console.log(`值为${val*2}`) }) console.log(`原数组为${arr}`); // 值为4 // 值为6 // 值为8 // 值为2 // 值为88 // 原数组为2,3,4,1,44reduce()reduce()数组元素累计器，返回一个合并的结果值。语法arr.reduce(callback(accumulator, currentValue, index, array), initialValue)accumulator : 累计器，默认为数组元素第一个值currentValue : 当前值index : 当前元素索引可选array : 数组可选initialValue : 初始值可选reduce 有两个参数，一个是回调函数，一个是初始值。它有两种取值情况：当提供了 initialValue 初始值时，那么accumulator 的值为 initialValue , currentValue 的值为数组第一个值当没有提供 initialValue 初始值时，那么 accumulator 的值为数组第一个值， currentValue 为第二个值。注意如果数组为空，且没有提供initialValue 初始值时，会抛出 TypeError .如果数组有一个元素，且没有提供initialValue 或者提供了initialValue ，数组为空，那么唯一值被返回不会执行 callback 回调函数。求和//防盗贴：微信公众号: 前端自学社区/ const arr = [1, 2, 3, 4] const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 10) console.log(sum) //20 // accumulator 累计器 // currentValue 当前值 // initialValue 累计初始值为10 //10 + 1 + 2 + 3 + 4 ## 注意 // 回调函数第一次执行时，accumulator 和currentValue的取值有两种情况： // 如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值； // 如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。计算对象中的值要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。/* * @Description: * @Author: 微信公众号: 前端自学社区 * @Date: 2021-08-07 00:53:51 * @LastEditTime: 2021-08-07 00:53:51 * @LastEditors: Do not edit */ const data = [ { date: '2021-8-1', income: 200 }, { date: '2021-8-2', income: 400 }, { date: '2021-8-3', income: 300 }, ] console.log(`总收入： ${data.reduce( (pre,currentValue) => pre + currentValue.income,0)}`); //总收入： 900二维数组转一位数组const array = [[1,2],[3,4]] console.log(array.reduce((a,b) => a.concat(b))); //[ 1, 2, 3, 4 ]find()find() 返回满足特定条件的元素对象或者元素值，不满足返回 undefined 语法arr.find((element,index,array), thisArg)element ：当前元素index : 当前元素索引可选array : 数组本身可选thisArg : 执行回调时用作this 的对象。可选// 从数据中找出第一个满足特定条件的对象 const data = [ { name:'张三', article: 3 }, { name:'老王', article: 9 }, { name:'老李', article: 10 } ] console.log(data.find(item => item.article > 9 )); // { name: '老李', article: 10 }findIndex()findIndex() 返回数组中符合条件的第一个元素的索引，没有，则返回 -1 。语法arr.findIndex((element,index,array), thisArg)element ：当前元素index : 当前元素索引可选array : 数组本身可选thisArg : 执行回调时用作this 的对象。可选const arr = [22,33,44,55] console.log(arr.findIndex(val => val > 33)); //2 console.log(arr.findIndex(val => val > 99)); //-1key()key() 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键。语法keys()注意如果数组中有空原元素，在获取key 时，也会加入遍历的队列中。const inputModal = [ { name:'' }, { age:'' }, { hobby:'' } ] for(const key of inputModal.keys()){ console.log(key) } // 0 // 1 // 2 const arr = [1,2,,3] for(const key of arr.keys()){ console.log(key); } // 0 // 1 // 2 // 3 //Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组 // 所以 Object.keys(arr) = [ '0', '1', '3' ] for(const key of Object.keys(arr)){ console.log(key); } // 0 // 1 // 3values()values() 方法返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。语法arr.values()const Color = ['red','yelloe','orange'] for(val of Color.values()){ console.log(val); } // red // yelloe // orange<hr/>返回布尔值every()every 用来判断数组内所有元素是否符合某个条件，返回布尔值语法arr.every(callback(currentValue , index , array) ，thisArg)currentValue : 数组当前项值必须index : 数组当前项索引可选arr : 数组对象本身可选thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意当所有的元素都符合条件才会返回trueevery 不会改变原数组。若传入一个空数组，无论如何都会返回 true。//防盗贴：微信公众号: 前端自学社区 const arr = [2,3,4,1,44] console.log(arr.every(val => val > 0 )); //true console.log(arr.every(val => { val > 2 })) //false some()some() 用来判断数组元素是否符合某个条件，只要有一个元素符合，那么返回 true.语法arr.some(callback(currentValue , index , array) ，thisArg)currentValue : 数组当前项值必须index : 数组当前项索引可选arr : 数组对象本身可选thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意some() 被调用时不会改变数组。如果用一个空数组进行测试，在任何情况下它返回的都是false。some() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。const arr = [2,3,4,1,44] console.log(arr.some(val => val > 2)) //true console.log([].some(val => val > 2 )); //false const newList = [11,22,33,44] console.log(newList.some(val => { newList.push(55) newList.push(66) val > 55 })); //false不改变原有数组，形成新的数组filter()filter() 用来遍历原数组，过滤拿到符合条件的数组元素，形成新的数组元素。语法arr.some(callback(currentValue , index , array) ，thisArg)currentValue : 数组当前项值必须index : 数组当前项索引可选arr : 数组对象本身可选thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意filter 不会改变原数组，它返回过滤后的新数组。filter() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。const arr = [11,22,33,44,55,66] console.log(arr.filter(val => val > 44 )) console.log(`原数组为${arr}`); // [ 55, 66 ] // 原数组为11,22,33,44,55,66map()map() 创建一个新的数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。语法arr.map(callback(currentValue , index , array) ，thisArg)currentValue : 数组当前项值必须index : 数组当前项索引可选arr : 数组对象本身可选thisArg : 可选参数。当执行回调函数 callback 时，用作 this 的值。可选注意map 不修改调用它的原数组本身map() 在遍历时，元素范围已经确定，在遍历过程中添加的元素，不会加入到遍历的序列中。const arr = [1,2,3,4] console.log(arr.map(val => val*3 )) // [ 3, 6, 9, 12 ] console.log(arr) // [ 1, 2, 3, 4 ]<hr/>数组 CRUD改变原数组方法reverse()reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。const arr = [1,2,3] console.log(arr.reverse(11,22,33)) //[ 3, 2, 1 ]sort()sort() 方法采用原地算法进行排序并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列原地算法是一个使用辅助的数据结构对输入进行转换的算法。但是，它允许有少量额外的存储空间来储存辅助变量。当算法运行时，输入通常会被输出覆盖。原地算法仅通过替换或交换元素来更新输入序列。const arr = [23,11,33,44,1] console.log(arr.sort()) //[ 1, 11, 23, 33, 44 ] const arr = [23,11,33,44,1000000000] console.log(arr.sort()) // [ 1000000000, 11, 23, 33, 44 ]删除元素shift()shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。语法arr.shift()注意从数组中删除的元素; 如果数组为空则返回undefined const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, { id:3, name:'移动端' }, { id:4, name:'嵌入式开发' }, ] const deleObj = data.shift() console.log('==============删除后的元素======================'); console.log(data); console.log('=================删除后的元素==================='); console.log('===============被删除的元素====================='); console.log(deleObj); console.log('================被删除的元素===================='); // ==============删除后的元素====================== // [ // { id: 2, name: '后端' }, // { id: 3, name: '移动端' }, // { id: 4, name: '嵌入式开发' } // ] // =================删除后的元素=================== // ===============被删除的元素===================== // { id: 1, name: '前端' } // ================被删除的元素====================pop()pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。用法和 shift 类似。语法arr.pop()注意从数组中删除的元素; 如果数组为空则返回undefined const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, { id:3, name:'移动端' }, { id:4, name:'嵌入式开发' }, ] const deleObj = data.pop() console.log(data); // [ // { id: 1, name: '前端' }, // { id: 2, name: '后端' }, // { id: 3, name: '移动端' } // ] console.log(deleObj); // { id: 4, name: '嵌入式开发' }splice()splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。语法array.splice(start,deleteCount, [item1,item2....])start : 开始的索引deleteCount : 删除的个数可选[item1，item2 .....] ；从开始的索引进行添加的增加和替换的元素，可选注意由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。如果只传递了开始的索引位置，则会删除索引后的所有元素对象const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, { id:3, name:'移动端' }, { id:4, name:'嵌入式开发' }, ] data.splice(1) console.log(data) // [ { id: 1, name: '前端' } ]从索引为 2 开始，删除 1 个数组元素对象，添加两个数组元素对象const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, { id:3, name:'移动端' }, { id:4, name:'嵌入式开发' }, ] data.splice(2,1,...[{id:5,name:'人工智能'},{id:6,name:'大数据开发'}]) console.log(data); // [ // { id: 1, name: '前端' }, // { id: 2, name: '后端' }, // { id: 5, name: '人工智能' }, // { id: 6, name: '大数据开发' }, // { id: 4, name: '嵌入式开发' } // ]增加元素splice()上面已经有介绍push()push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。语法arr.push(element1, ..., elementN)const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, ] console.log(data.push({id:3,name:'移动端'})) //3合并数组const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, ] var obj = [ { id:4, name:'嵌入式开发' }, ] // 相当于 data.push({id:4,name:'嵌入式开发'}); Array.prototype.push.apply(data, obj); console.log(data); [ { id: 1, name: '前端' }, { id: 2, name: '后端' }, { id: 4, name: '嵌入式开发' } ]unshift()unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。const arr = [1,2,3] console.log(arr.unshift(11,22,33)) //6 console.log(arr) //[ 11, 22, 33, 1, 2, 3 ]不改变原数组元素方法indexOf()indexOf()方法返回可以在数组中找到给定元素的第一个索引，如果不存在，则返回 -1。语法indexOf(searchElement) indexOf(searchElement, fromIndex)searchElement : 要查找的元素fromIndex ：按指定的索引进行查找出现的指定元素的第一个索引。可选如果索引大于或等于数组的长度，则返回-1如果提供的索引值为负数，则将其视为距数组末尾的偏移量如果提供的索引为负数，仍然从前到后搜索数组如果提供的索引为 0，则将搜索整个数组。默认值：0（搜索整个数组）。const arr = [1,1,2,3,4,5,4,4,6] console.log(arr.indexOf(3)); //3 console.log(arr.indexOf(9)); //-1 console.log(arr.indexOf(3,4)); //-1 //从索引为 4 的元素进行查找 3, 显然后面没有3 ，返回 -1数组去重创建一个新的空数组，通过indexOf 来判断空数组是否第一次存在某个元素，不存在则返回 [ < 0 ] ，push 到空数组中.const newArr = [] arr.forEach(val => { if(newArr.indexOf(val) < 0){ newArr.push(val) } }) console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ] lastIndexOf()lastIndexOf() 查找数组中元素最后一次出现的索引，如未找到返回-1。如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。语法arr.lastIndexOf(searchElement, fromIndex)searchElement : 要查找的元素fromIndex ：按指定的索引进行查找出现的指定元素的第一个索引。可选从指定的索引位置逆向查找默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。注意lastIndexOf 使用的是严格相等 === 比较 searchElement 和数组中的元素。const arr = [1,1,2,3,4,5,4,4,6] console.log(arr.lastIndexOf(4)); //7 console.log(arr.lastIndexOf(4,11)); //7 指定的查找的索引大于数组的长度，会进行整个数组查找 console.log(arr.lastIndexOf(4,-33)); // -1 指定的索引为负数，且绝对值大于数组长度，则返回 -1 console.log(arr.lastIndexOf(4,-5)); //4 指定的索引为负数，且绝对值小于数组长度，则会从向前进行查找inCludes()includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。语法arr.includes(searchElement, fromIndex)searchElement : 要查找的元素查找时，区分大小写fromIndex ：按指定的索引进行查找出现的指定元素的第一个索引。可选从指定的索引进行查找如果为负值，则按升序从 array.length + fromIndex 的索引开始搜如果 fromIndex 大于等于数组的长度，则会返回 false，且该数组不会被搜索。默认为0const arr = [1,1,2,3,4,5,4,4,6] console.log(arr.includes(4)); //true console.log(arr.includes(4,66)); //false console.log(arr.includes(1,-1)); //falseconcat()concat() 方法用于合并两个或多个数组。语法var new_array = old_array.concat([arr1][arr2])注意concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本对象引用（而不是实际对象）：concat将对象引用复制到新数组中。原始数组和新数组都引用相同的对象。也就是说，如果引用的对象被修改，则更改对于新数组和原始数组都是可见的。这包括也是数组的数组参数的元素。数据类型如字符串，数字和布尔（不是String，Number和 Boolean) 对象）：concat将字符串和数字的值复制到新数组中。let arr1 = [1,2,3] let arr2 = [4,5,6] let arr3 = [[1,2],[3,4]] console.log(arr1.concat(arr2)); //[ 1, 2, 3, 4, 5, 6 ] // 嵌套合并 console.log(arr1.concat(arr2).concat(arr3)); // [ 1, 2, 3, 4, 5, 6, [ 1, 2 ], [ 3, 4 ] ] let obj1 = [{a:1},{b:2}] let obj2 = [{c:3},{d:4}] let obj3 = obj1.concat(obj2) console.log(obj3); //[ { a: 1 }, { b: 2 }, { c: 3 }, { d: 4 } ] obj1[0].a = 4 //改变obj[0]对象值，会直接影响合并后的数组，因为是浅拷贝 console.log(obj3); //[ { a: 4 }, { b: 2 }, { c: 3 }, { d: 4 } ]toString()toString() 返回一个字符串，表示指定的数组及其元素。当一个数组被作为文本值或者进行字符串连接操作时，将会自动调用其 toString 方法。对于数组对象，toString 方法连接数组并返回一个字符串，其中包含用逗号分隔的每个数组元素。语法arr.toString()const arr = [1,2,3] console.log(arr.toString()); //1,2,3join()join()方法通过连接数组元素用逗号或指定的分隔符字符串分隔，返回一个字符串。如果数组只有一项，则将在不使用分隔符的情况下返回该项。语法join() join(separator)separator : 指定的分割的字符可选const arr = ['2021','08','08'] console.log(arr.join()); //2021,08,08 console.log(arr.join('-')); //2021-08-08 console.log(arr.join('/')); //2021/08/08slice()slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。语法arr.slice(begin, end)begin : 指定截取的开始索引可选默认从0 开始如果begin 为负数，则以数组末尾开始的绝对值开始截取 slice(-2) 末尾第2个元素如果 begin 超出原数组的索引范围，则会返回空数组。end : 指定截取的结束索引可选如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。如果 end 为负数，则它表示在原数组中的倒数第几个元素结束抽取。const arr = [11,22,33,44,55,66,77,88] console.log(arr.slice(1,4)); // 应该返回索引 1 - 3 的数组元素 // [ 22, 33, 44 ] console.log(arr.slice(-4,2)) //[] console.log(arr.slice(-4)); //[ 55, 66, 77, 88 ] console.log(arr.slice(0,-1)); // [ // 11, 22, 33, 44, // 55, 66, 77 // ]参考文献Array - JavaScript | MDN最后文章用下班时间肝了一周，写作不易，文中的内容都是参考 MDN 文档。如果喜欢的话可以点赞关注，支持一下，希望大家可以看完本文有所收获！

大新._社区达人页

Vue子组件与父组件(看了就会)

ES6语法学习总结（小白快速入门）（阮一峰）

APP 开发技术该如何选型 ？

Vue权限路由[菜单权限/按钮权限控制]

[前端必知 ]HTTP or TCP/IP 基础

5分钟快速梳理你的HTTP体系

APP 开发技术该如何选型 ？

JavaScript设计模式之单例模式

Vue | 路由守卫面试常考

你还在认为TypeScirpt 是 AnyScript ？ --《前端那些事》

最全总结 JavaScript Array 方法详解--《前端那些事》

JAVA微服务入门总结分享 ——《我的Java打怪日记》

从前端到全栈 -- 最全面向对象总结——《我的Java打怪日记》

Vue3 Study

Nest CRUD

前端不得不了解的5种布局方式

深入 JavaScript 中的执行上下文和执行栈

Vue 自定义指令详解(看了就会)

[ 复习 ] - TypeScript 基础类型

[前端必知 ]HTTP or TCP/IP 基础

JavaScript设计模式之单例模式

JS作用域与作用域链

JS面向对象继承创建和使用

Vue子组件与父组件(看了就会)

ES6语法学习总结（小白快速入门）（阮一峰）

爆 肝 一 周 总 结 最全 JavaScript Array 方法详解

Vue3 + TypeScript 开发实践总结

APP 开发技术该如何选型 ？

程序员如何摆脱内卷？

浅聊函数防抖与节流

React Hook丨用好这9个钩子，所向披靡

Vue权限路由[菜单权限/按钮权限控制]

前端必须熟悉的几种布局方式

APP 开发技术该如何选型？

APP 开发技术该如何选型？

爆肝一周总结最全 JavaScript Array 方法详解

APP 开发技术该如何选型？