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

2019-08-11 本文已影响98人蓝海00

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<string> = ["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<number>) => {
    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>): 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("王者荣耀")

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

1⃣️、Typescript介绍

2⃣️、Typescript 安装 编译

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

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

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

4⃣️、Typescript 数据类型

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

4⃣️、2⃣️ 数字类型

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

4⃣️、4⃣️ 数组类型

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

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

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

4⃣️、5⃣️ 枚举类型

4⃣️、6⃣️ 任意类型

4⃣️、7⃣️ null 和 undefined

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

4⃣️、9⃣️ void类型

5⃣️、Typescript 函数

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

5⃣️、2⃣️ 可选参数

5⃣️、3⃣️ 默认参数

5⃣️、4⃣️ 剩余参数

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

6⃣️、Typescript 类

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

6⃣️、2⃣️ 声明类

6⃣️、3⃣️ 类的继承

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

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

6⃣️、6⃣️ 多态

6⃣️、7⃣️ 抽象类

7⃣️、Typescript 接口

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

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

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

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

7⃣️、5⃣️ 接口扩展

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

8⃣️、XMind笔记

猜你喜欢

热点阅读

2⃣️、Typescript 安装编译

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

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

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

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