美文网首页互联网科技Web前端之路让前端飞
Vue3.0马上就要来了,TypeScript学会了没？

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

作者: 蓝海00 | 来源:发表于2019-08-11 10:04 被阅读98次

    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("王者荣耀")

    8⃣️、XMind笔记

    相关文章

      网友评论

        本文标题：Vue3.0马上就要来了,TypeScript学会了没？

        本文链接：https://www.haomeiwen.com/subject/doncjctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        互联网科技

        Web前端之路

        让前端飞

        前端

        VUE技术与项目

        呆鸟的Python数据分析

        程序员技术栈

        关于我们|服务条款|联系我们|Vue3.0马上就要来了,TypeScript学会了没？|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！