Vue3.0马上就要来了,TypeScript学会了没？

4月份的Typescript总结 https://www.jianshu.com/p/a012c5017ce4 可以配合这篇文章一起学习哈～ GitHub代码笔记 https://github.com/LanHai1/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笔记