zoukankan      html  css  js  c++  java
  • typescript 入门教程一

    从今天开始,持续更新typescript入门教程系列....

    目前ts越来越火,主流的前端框架,好比angular,vue 3均是采用ts来编写,所有很多公司的项目都是用ts来写的,所有是时候认真学习ts
    ts来源于微软公司,越是大的公司,越是大的项目,越是推荐使用ts来编码,ts是js的超集,在js上面增加一些内容,相对于js,ts具有以下的优点:

    • 支持面向对象方法,之前js实现面向对象是通过prototype,function实现的,有点繁琐。ts提供了Class,Interface
    • 类型检查。ts能够在编译的阶段就可以发现错误,减少bug率。在实际开发中,需要将ts编译成js,而且目前浏览器支持的是es5版本
    • 自带文档特性。通过类型注解,很容易知道某一个参数或者变量是什么类型
    • IDE或者是编辑工具支持良好(自动完成提示)

    总的来说ts=js+type+(一些其他特性:枚举,接口等)
    使用ts之前,首先需要安装node,安装好node之后会自带npm,npm是node包管理工具,其可以下载一些社区常用的包,我们通过npm来安装ts编译工具typescript , npm install typescript -g
    编写一个ts文件:index.ts,通过下面命令行工作tsc index,.ts,就可以将index.ts编译成index.js,最后在浏览器中运行(ts是没法在浏览器中运行的,必须进行编译)

    var a:number
    a=10
    console.log(a)
    

    上面就是定义了a的变量类型是number类型,如果这时候传string类型赋值给a,编译器就会保存
    数据类型主要有:

    • number,string,boolean,Array

    示例,定义数组有两种方法:

    let myArr1:string[]=["st1","st2"]
    let myArr2:Array<string>=["st1","st2"]
    

    也可以给函数参数添加类型限制,这时如果传入的参数个数和类型和定义的形参不匹配,编译时候就会报错:

    const add=(a:number,b:number)=>{
        return a+b
    }
    console.log(add(2,4))
    

    也可以为函数返回值添加类型

    const add=(a:number,b:number):number=>{
        return a+b
    }
    

    也可以给函数加上默认的参数,如果函数的返回值是空,可以设置返回值类型是void

    const add=(a:number=8,b:number=10):void=>{
        console.log(a+b)
    }
    

    也可以设置可选参数,如下:这时候b可以传可以不传

    const add=(a:number=8,b?:number):void=>{ 
        console.log(a+b)
    }
    

    如果需要将一个变量设置为任何类型。可以使用any,但是尽量少用any

    let a:any;
    a=10;
    a="str"
    a=[1,2,3]
    

    如果需要设置一个变量为两种或者更多类型,可以使用联合类型的方式,|

    let a:number | string
    

    很多语言具有面向对象的属性,包括ts,面向对象三大属性:封装,继承,多态了,可以将现实生活中的一切内容看成类或者对象一个Class,通过new()得到一个对象,一个对象有属性和方法(方法就是对属性进行操作)

    class Person{
        // 构造方法
        constructor(fn:string,ln:string){
            this.firstName=fn
            this.lastName=ln
        }
        firstName:string;
        lastName:string;
     }
    

    通过extends关键字,可以让一个类继承已有类的属性和方法:

    class Person{
        firstName:string
        lastName:string
     }
     class Programmer extends Person{
     }
     let p=new Programmer()
     p.firstName='jack'
     p.lastName='chen'
     console.log(p)
    

    子类如果调用某个方法,如果在子类中已有该方法,则直接调用该方法,如果没有,则去调用父类的方法,如果强制调用父类的方法,可以把this换成super
    类成员的可见性主要有public,private,protected
    public:在类中和类的外面均是可以调用,默认就是public
    private:只能在类中调用,子类和类外面是不能调用的,如果要调用私有的属性或者方法,可以通过公有的方法来访问,对外暴露公有的方法,子类也是可以继承父类的私有的方法和属性,但是必须通过父类暴露的公有方法进行访问
    protected:只能在类中或者是子类中调用 ,即使子类和父类生成的对象也是不能访问
    总的来说权限范围:public>protected>private
    未完待续。。。


    *如果觉得本文有收获,请我喝杯咖啡吧,你们的支持是我最大的动力*
  • 相关阅读:
    log4j.properties 配置示例
    spark去重计数操作(代码示例)
    mysql数据库
    Mysql之sql语句操作
    mysql修改root密码的多种方法
    mysql的主从复制过程
    mysql命令用法复习笔记
    Linux下如何查看系统启动时间和运行时间安装时间
    一键系统优化15项脚本
    MongoDB
  • 原文地址:https://www.cnblogs.com/tangkaizhen/p/11762857.html
Copyright © 2011-2022 走看看