重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述 (2)

继承

class ITBook extends Book { constructor (title, author, isbn, technology) { // 代表调用父类构造函数 super(title, author, isbn) this.technology = technology } printTechnology () { console.log(this.technology) } } let jsBook = new ITBook('JS数据结构与算法', 'Groner', '123456789', 'JavaScript') jsBook.printIsbn() jsBook.printTechnology() 乘方运算符 let r = 2 let area = Math.PI * r ** 2 console.log(area) 模块

CommonJS规范是服务器端模块化开发规范,使用require方法加载;

AMD(Asynchronous Module Definition) 异步模块定义,RequireJS是AMD最流行的实现,是浏览器端模块化开发规范;

CMD(Common Module Definition) 通用模块定义,SeaJS是CMD的流行实现,是浏览器端模块化开发规范

ES6模块化开发

export 导出模块;import 导入模块

// moduleA.js export const moduleA = 'moduleA' // html中引入,注意type="module" <script type="module"> import { moduleA } from './moduleA.js' console.log(moduleA) </script> 2.3 介绍TypeScript

TypeScript是一个开源的、渐进式包含类型的JavaScript超集,由微软创建并维护。目的是让开发者增强JavaScript的能力并使应用的规模扩展变得更容易。

TS在JavaScript中提供类型支持可以实现静态检查,从而更容易地重构代码和寻找BUG。最后,TypeScript为被编译为简单的JavaScript代码。

编写时为.ts文件,使用TypeScript对其进行tsc编译,最终为js文件

下载TypeScript

npm i -g typescript

创建.ts文件,写入内容

// demo.ts let a = '初始化为字符串内容' a = 10 console.log(a)

编译ts文件

tsc demo.ts

此处回生成demo.js文件,同时控制台报警告信息:error TS2322: Type '10' is not assignable to type 'string'. 说明TS对变量类型进行了校验,但并未阻止编译器生成最终的js代码。

TS类型推断 // 定义变量,并约束变量类型 let age: number = 20 let flag: Boolean = true

TS允许我们给变量设置一个类型,但是此种写法太麻烦。TS提供了便捷的类型推断机制,相当于在给变量赋初始值时就约束了变量的类型。

// 上面的代码改造 let age = 20 // 数值类型 let flag = true // 布尔值类型

那么,什么时候需要给变量设置类型呢?声明变量,但没有设置其初始值的时候!

如果没有给变量设置类型,那么它的类型会被自动设置为any,意思为接受任何类型的值。

接口

在TS中,有两种接口概念:

第一种:给变量设置类型,是对一个对象必须包含的属性和方法的描述 interface Person { age: number, name: string } function printName (person: Person) { console.log(person.name) } const john = { name: 'john', age: 21 } const mary = { name: 'mary', age: 20, phone: '123456' } printName(john) printName(mary)

执行tsc编译,木有任何问题。但是小伙伴可能会比较奇怪,对象mary中属性多了个phone,但是并未影响代码的执行。

鸭子类型概念:如果它看起来像鸭子,像鸭子一样游泳,像鸭子一样叫,那么它一定是一只鸭子!

变量mary的行为与Person接口定义的一样,那么它就是一个Person。

第二种:TS接口的概念和面向对象编程相关

接口视为一份合约,在合约里可以定义这份合约的类或接口的行为

interface Comparable { compareTo (b): number } class myObject implements Comparable { age: number compareTo(b): number { if (this.age === b.age) { return 0 } return this.age > b.age ? 1 : -1 } } let obj = new MyObject() obj.age = 10 let res = obj.compareTo(20) console.log(res) // -1

Comparable接口告诉MyObject类,它需要实现一个叫做compareTo的方法,并且该方法接收一个参数。

泛型

对数据结构和算法作用强大的TS特性是泛型这一概念

interface Comparable<T> { compareTo (b: T): number } class MyObject implements Comparable<MyObject> { age: number compareTo(b: MyObject): number { if (this.age === b.age) { return 0 } return this.age > b.age ? 1 : -1 } } let obj = new MyObject() obj.age = 10 let obj2 = new MyObject() obj2.age = 20 let res = obj.compareTo(obj2) console.log(res) // -1 后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!

长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwyzxy.html