学vue必须要会ajax,Vue3.0马上就要来了,TypeScript学会了没？

1⃣️、Typescript介绍

Typescript 是由微软开发的一款开源的编程语言

Typescript 是 JavaScript 的超集 遵循最新的ES6、ES5 规范，Typescript 扩展了 JavaScript的语法

Typescript 更像后端 java、C# 这样的面向对象语言 可以让JavaScript开发大型企业项目

谷歌也在大力支持 Typescript 的推广 谷歌的 angular2.x+ 就是基于 Typescript 语法

最新的 Vue、React 也开源集成 Typescript

2⃣️、Typescript 安装 编译

安装 sudo npm install -g typescript

编译 tsc helloworld.ts

3⃣️、Typescript 开发工具 Vscode 自动编译.ts 文件 (保存就编译)

3⃣️、1⃣️ 生成 tsconfig.json 配置文件 命令生成tsc --init

修改里面的outDir(取消注释)

3⃣️、2⃣️ 点击菜单 终端 => 运行任务 => tsc: 监视 - tsconfig.json

即可实时将Typescript文件编译成浏览器可运行的JavaScript文件

4⃣️、Typescript 数据类型

4⃣️、1⃣️ 布尔类型(boolean)

let bool: boolean = true

bool = false

console.log(bool); // false

4⃣️、2⃣️ 数字类型

let num: number = 1

num += 10

console.log(num); // 11

4⃣️、3⃣️ 字符串类型

let str: string = "hello ts"

str += "!"

console.log(str); // hello ts!

4⃣️、4⃣️ 数组类型

4⃣️、4⃣️、1⃣️ 规定统一数组中元素的数据类型

let arr1: number[] = [2, 1]

console.log(arr1);

4⃣️、4⃣️、2⃣️ 元组类型 属于数组类型的一种

规定数组中所有的元素统一类型

let arr2: Array = ["hehe", "heh", "hehh"]

console.log(arr2);

规定数组中每个元素的数据类型

let arr3: [number, string, number] = [1, "2", 3]

console.log(arr3);

4⃣️、4⃣️、3⃣️ 三、数组中的元素可以是任意数据类型

let arr4: any[] = [2, 3, "ss"]

console.log(arr4);

4⃣️、5⃣️ 枚举类型

// 规定一组特殊表达某个意义的词汇 如数字状态码

/**

* success 成功 对应 1

* errpr 失败 对应 2

* ...

*/

// 后面的标示符没有给值会默认根据前面的标示符( <= number)生成对应的值(递增)

// 注意 如果前面的标示符是字符串 后面的标示符必须赋值！！！

enum Flag { success = 1, error }

let s: Flag = Flag.success

console.log(s); // 1

let e: Flag = Flag.error

console.log(e); // 2

// 如果标识符没有给值 默认是下标

enum Color { red, yellow, blue, hotpink }

let { red, yellow, hotpink } = Color

console.log(red, yellow, hotpink); // 0 1 3

4⃣️、6⃣️ 任意类型

// 可以赋值任意类型的数据

// 用途 如获取DOM元素后为这个DOM元素设置样式

let isTs: any = 1

isTs = "is typescript"

console.log(isTs); // is typescript

4⃣️、7⃣️ null 和 undefined

let n: null

n = null

console.log(n); // null

let u: undefined

u = undefined

console.log(u); // undefined

4⃣️、8⃣️ 混合数据类型

// 设置一个变量可能是undefined 可能是number

let numUndefind: number | undefined

console.log(numUndefind); // undefined

numUndefind = 1

console.log(numUndefind); // 1

4⃣️、9⃣️ void类型

表示没有任何类型 一般用在定义方法的时候没有返回值

let myFn = (): void => { }

函数定义返回值

let myFn1 = (): number => {

return 1

}

let myFn2 = (): string => {

return "myFn2"

}

5⃣️、Typescript 函数

5⃣️、1⃣️ 函数的定义

规定形参的类型和函数返回值的类型

let fnInfo = (nickname: string, age: number): string => {

return `${nickname} -- ${age}`

}

console.log(fnInfo("lanhai", 11)) // lanhai -- 11

5⃣️、2⃣️ 可选参数

形参后面加问号即可 默认是必传

可选参数必须设置在形参最后面 不能前面是可传 后面是必传

❌(nickname?:string,age:number)

✅(nickname:string,age?:number)

let fnInfo1 = (nickname: string, age?: number): string => {

return age ? `${nickname} -- ${age}` : `${nickname} -- 年龄保密`

}

console.log(fnInfo1("lanhai", 11))

console.log(fnInfo1("lanhai"))

5⃣️、3⃣️ 默认参数

形参后面加等号跟上默认值即可

参数不能同时是默认参数或者是可选参数 默认参数也必须写在形参中的最后面

如果默认参数传递了值 那这个默认参数的值以传递过来的值为准

相当于es5中的 a = a || 20

let fnInfo2 = (nickname: string, age: number = 10): string => {

return `${nickname} -- ${age}`

}

console.log(fnInfo2("hai!"));

5⃣️、4⃣️ 剩余参数

通过三点运算符 接收传递过来的值 赋给对应的数组

相当于es5中的 arguments

let fnSum = (...res: Array) => {

let sum: number = 0;

res.forEach(val => {

sum += val

});

return sum

}

console.log(fnSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // 50

5⃣️、5⃣️ 函数的重载

java中的重载 是指两个以上同名函数 但它们的参数不一样 这时就会出现函数重载的情况

typescript中的重载 “同样的函数传递‘不同类型’的参数 执行不同的功能”

通过为同一个函数提供 形参不同类型来判断实现多种功能

function fn(name: string, sex: string, love: string): string;

function fn(age: number): string;

function fn(str: any, ...res: Array): any {

return typeof str === "string" ? `我叫${str},我是${res[0]}生,我爱好${res[1]}` : `我${str}岁了`

}

console.log(fn("lanhai", "男", "编程"))

function fn1(name: string, sex: string): string;

function fn1(age: number): string;

function fn1(str: any, sex?: string): any {

return typeof str === "string" ? `我叫${str},我是${sex}生` : `我${str}岁了`

}

console.log(fn1("lanhai1", "男"))

6⃣️、Typescript 类

6⃣️、1⃣️ 回顾 es5继承

function Person(this: any, nickname: string) {

this.nickname = nickname

this.sex = "男"

this.run = () => {

console.log(this.nickname + "跑步")

}

}

Person.prototype.sayHi = () => {

console.log(`你好`)

}

let per = new Person("jack")

per.run()

per.sayHi()

function Son(this: any, nickname: string) {

Person.call(this, nickname)

for (var variable in Person.prototype) {

Son.prototype[variable] = Person.prototype[variable]

}

}

let son = new Son("jack")

son.run()

son.sayHi()

6⃣️、2⃣️ 声明类

constructor 构造器 实例化对象的时候就会触发这个方法 把传递过来的值设置给类里面的属性

代码分析

class Person {

nickName: string

// 构造器 实例化对象的时候就会触发这个方法 把传递过来的值设置给类里面的属性

constructor(name: string) {

this.nickName = name

}

getInfo(): string {

return `我叫${this.nickName}`

}

// 可以通过方法设置类里面属性的值

setInfo(name: string): void {

this.nickName = name

}

}

let per = new Person("蓝海")

per.setInfo("jeck")

console.log(per.getInfo())

6⃣️、3⃣️ 类的继承

结合 extends 和 super 关键字继承类

extends 后面跟继承的父类

super 触发父类的构造器 传递参数到父类 /* 初始化父类的构造函数 */

代码分析

class Student {

nick: string

age: number

constructor(n: string, a: number) {

this.nick = n

this.age = a

}

run(): void {

console.log(`${this.nick}在跑步`)

}

}

let stu = new Student("pink", 18)

stu.run()

console.log(stu.age)

// 结合 extends 和 super 关键字继承类

// extends 后面跟继承的父类

// super 触发父类的构造器 传递参数到父类 /* 初始化父类的构造函数 */

class myStudent extends Student {

constructor(mNick: string, mAge: number) {

super(mNick, mAge)

}

// 子类获取属性和方法的规律 先从自己的类里面去找 没有再去继承的父类里面去找

// 类似于es5的构造函数 先从构造函数中找 没有再去构造函数对应的原型对象中找

// (扩展自己的方法) 获取父类里面的属性

run() {

console.log("myRun" + this.nick)

}

}

let myStu = new myStudent("莉丝", 13)

myStu.run()

console.log(myStu.age)

6⃣️、4⃣️ 类里面的修饰符

public

公有的 在类、子类、类外面都可以访问

protected

保护类型 在类、子类里面可以访问，在类外面无法访问

private

私有 在类里面可以访问，在子类、类外面无法访问

属性如果不加修饰符 默认就是公有的

代码分析

class Test {

// 公有的 在类、子类、类外面都可以访问

public nickName: string

// 保护类型 在类、子类里面可以访问，在类外面无法访问

protected age: number

// 私有 在类里面可以访问，在子类、类外面无法访问

private sex: string

// 属性如果不加修饰符 默认就是公有的

constructor(_name: string, _age: number, _sex: string) {

this.nickName = _name

this.age = _age

this.sex = _sex

}

}

class Test_ji_chen extends Test {

constructor(_name: string, _age: number, _sex: string) {

super(_name, _age, _sex)

}

run() {

console.log(this.nickName); // "jack"

console.log(this.age); // 18

// console.log(this.sex); // err 属性“sex”为私有属性，只能在类“Test”中访问。

}

}

let test = new Test_ji_chen("jack", 18, "男")

console.log(test.nickName); // "jack"

// console.log(test.age); // 属性“age”受保护，只能在类“Test”及其子类中访问。

// console.log(test.sex); // 属性“sex”为私有属性，只能在类“Test”中访问。

test.run()

6⃣️、5⃣️ 静态属性和静态方法

通过 static 关键字来声明的属性和方法 就是静态属性和静态方法

静态属性必须赋值 静态方法中 "只能" 访问这个类里面的静态属性 通过类名.静态属性来访问

代码分析

class staticFn {

public nickName: string /* 实例属性 */

static myAge: number = 19 /* 静态属性 必须赋值 */

constructor(name: string) {

this.nickName = name

}

sayHi(): void { /* 实例方法 */

console.log(`sayhi,${this.nickName}`)

}

static myRun(): void {

console.log(`我${staticFn.myAge}岁我可以跑步`);

}

}

let sta = new staticFn("蓝海")

// 实例属性

console.log(sta.nickName);

// 实例方法

sta.sayHi()

// 静态属性

console.log(staticFn.myAge);

// 静态方法

staticFn.myRun()

静态属性和静态方法的用途

如 jquery中

通过 $(el).css()这是实例方法 $(el)返回了 这个方法获取的DOM元素 然后.css()方法设置样式

$.ajax() 这是静态方法 直接通过 $.出来的方法

6⃣️、6⃣️ 多态

父类定义一个方法不去实现 让继承的子类去实现 每个子类有不同的表现

多态属于继承

代码分析

class Animal {

public nickName: string

constructor(name: string) {

this.nickName = name

}

eat() {

console.log(`吃`);

}

}

class Dog extends Animal {

constructor(name: string) {

super(name)

}

eat(): string {

return `小狗${this.nickName}吃骨头`

}

}

class Cat extends Animal {

constructor(name: string) {

super(name)

}

eat(): string {

return `小猫${this.nickName}吃鱼`

}

}

6⃣️、7⃣️ 抽象类

提供其他类继承的基类 “不能直接被实例化”

使用 abstract关键字来定义抽象类和抽象方法 抽象类中的抽象方法“必须在继承的子类中实现”

abstract抽象方法只能放在抽象类中 抽象类和抽象方法是用来定义标准的，父类要求子类必须实现某些方法。

代码分析

abstract class AbsAnimal {

protected nickName: string

constructor(name: string) {

this.nickName = name

// 一些初始化的方法可以在构造器中直接实现

this.run()

}

abstract eat(): void

run(): void {

console.log(`${this.nickName}在跑步`);

}

}

class AbsCat extends AbsAnimal{

constructor(name:string){

super(name)

}

eat(){

console.log(`${this.nickName}吃鱼`);

}

}

let abscat = new AbsCat("Tom")

abscat.eat()

7⃣️、Typescript 接口

7⃣️、1⃣️ 接口的作用

在面向对象的编程中 接口是一种规范的定义 它定义了行为和动作的规范

在程序设计里面 接口起到一种限制和规范的作用

接口定义了某一批类所需要遵守的规范 接口不关心这些类的内部状态数据 也不关心这些类里面的方法的实现细节

它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需求

typescript中的接口类似于Java 同时还增加了更灵活的接口类型 包括属性、函数、可索引和类...

7⃣️、2⃣️ 属性类型接口

对属性(变量、形参)的数据进行约束

如 规定一组数据设置类型 设置给类或函数中形参的数据类型 在使用这个类或函数时必须按照接口的规定来传递数据

代码分析

interface FullName {

firstName: string

// 接口的可选属性 加?号即可 可传可不传

secoundName?: string

}

class MyName {

protected name: FullName

constructor(name: FullName) {

this.name = name

}

allName(): void {

console.log(`${this.name.firstName}${this.name.secoundName ? "---" + this.name.secoundName : ""}`);

}

}

let myname = new MyName({

firstName: "jack"

})

myname.allName()

let YouName = (name: FullName): void => {

console.log(`${name.firstName}${name.secoundName ? "/" + name.secoundName : ""}`);

}

YouName({

firstName: "蓝",

secoundName: "海"

})

案例扩展 ajax接口

/**

* $.ajax({

* type:"get",

* url:"test.json",

* data:{name:"蓝海",age:11},

* dataType:"json"

* })

*/

interface myAjax {

type: string,

url: string,

data?: object,

dataType: string

}

class $ {

static ajax(obj: myAjax) {

// 可以xml小黄人ajax处理请求数据

console.log(obj);

}

}

$.ajax({

type: "get",

url: "test.json",

data: { name: "蓝海", age: 11 },

dataType: "json"

})

7⃣️、3⃣️ 函数类型接口

对方法传入的参数 以及返回值进行约束 可批量约束

函数接口只能用在函数表达式上面

代码分析

interface MyFn {

// 参数的数据类型 // 返回值 的数据类型

(key: string, value: string): string

}

let myFn11: MyFn = (key: string, value: string) => {

return `${key}:${value}`

}

console.log(myFn11("name", "jack"));

let myFn22: MyFn = function (key: string, value: string) {

return `${key}---${value}`

}

console.log(myFn22("age", "11"));

7⃣️、4⃣️ 类 类型接口

对类的约束 和抽象类有点类似

通过关键字 implements 来对类进行接口约束

代码分析

interface MyClass {

// 子类必须实现这里面的属性和方法

nickName: string

eat(food: string): void

}

class AnimalInterface implements MyClass {

nickName: string

constructor(name: string) {

this.nickName = name

}

eat(food: string): void {

console.log(`${this.nickName} eat ${food} !!`);

}

}

let myAnimal = new AnimalInterface("猫")

myAnimal.eat("🐟")

7⃣️、5⃣️ 接口扩展

接口可以继承接口

接口扩展

interface Student1 {

nickName: string

sayHi(): void

}

interface StudentMan extends Student1 {

play(playing: string): void

}

class LanHai implements StudentMan {

nickName: string

constructor(name: string) {

this.nickName = name

}

sayHi() {

console.log(`hi!`);

}

play(playing: string) {

console.log(`i am man ,i play ${playing}`);

}

}

let lh = new LanHai("兰海")

lh.sayHi()

lh.play("王者荣耀")

7⃣️、6⃣️ 类的继承 + 接口扩展

"extends" 子句必须位于 "implements" 子句之前

代码分析

interface Student2 {

nickName: string

sayHi(): void

}

// 接口扩展

interface StudentMan2 extends Student2 {

play(playing: string): void

}

// 类实现接口

class LanHai2 {

public nickName: string

constructor(name: string) {

this.nickName = name

}

work(): void {

console.log(`${this.nickName}-敲代码`);

}

}

// 类的继承

class myLanHai2 extends LanHai2 implements StudentMan2 {

constructor(name: string) {

super(name)

}

sayHi() {

console.log("你好");

}

play(playing: string) {

console.log(`我在玩${playing}`);

}

}

let mylh2 = new myLanHai2("jack")

mylh2.sayHi()

mylh2.work()

mylh2.play("王者荣耀")

8⃣️、XMind笔记