首页 > 其他 > 详细

Typescript 总结

时间:2020-08-21 16:10:04      阅读:49      评论:0      收藏:0      [点我收藏+]

 

/* boolean */
var b:boolean = true

/* number */
var a:number = 123

/* string */
var str:string = "this is str"

/* array */
var arr1:number[] = [1,2,3]
var arr2:string[] = ["java","C#"]
var arr3:Array<number> = [1,2,3]
var arr4:Array<string> = ["java","C#"]
 
/* tuple元组类型(数组的一种) */
var tup:[string,number,boolean] = ["ts",123,true]

/* enum 枚举*/
enum flag{success = 1,error = 2}
var f:flag=flag.success  /* 1 */

/* any 任意类型 */
var num:any = 123;
num = true;

/* null 和 undefined 其他(never类型)的子类型 */
var num2:number|undefined 
var num3:number|null
var num4:number|null|undefined

/* void 用于定义方法没有任何类型,一般用于定义方法没有返回值*/
function run():void
{
   console.log("run")
}

/* never:其他类型(包括null和undefined), 表示从不会出现的值(声明never的变量只允许被never类型所赋值) */
var u:undefined
u = undefined

var c:null
c = null

/* --------------------------------函数定义---------------------------------------- */

/* 函数声明法 */
function fun1():string
{
  return "fun1"
}

/* 匿名函数法 */
var fun2=function():string
{
   return "fun2"
}

/* 定义方法传参 */
function getInfo(name:string,age:number):string
{
    return `${name} -- ${age}`
}

var say = function(name:string):string
{
    return `say ${name}`
}

/* 无返回值 */
function run1():void{
  console.log("run1")
}

/* 可选参数 */
/* 注意:可选参数必须配置在参数的最后面 */
function getInfo2(name:string,age?:number):string  /* 调用时age参数可选 */
{
  if(age){return ‘age ${age}‘}
  else{return "age secret"}
}

/* 默认参数 */
function getInfo3(name:string,age:number = 20):string
{ 
   return `${name}-age:${age}` 
}

getInfo3("jack")  /* jack-age:20 */
getInfo3("jack",30) /* jack-age:30 */

/* 剩余参数 */
function sum(...result:number[]):number{
    var sum:number = 0;
    for(var i = 0; i<result.length;i++)
    {
        sum+=result[i]
    }
    return sum
}

/* 函数重载 */
function fun3(name:string):string{
    return ‘name‘
}
function fun4(age:number):number{
    return 100
}

/* 箭头函数 */
setTimeout(()=>{alert("hi")},1000)

/* es5中的继承 */
function Person(name,age){
    this.name = name; 
    this.age = age;
    this.run = function() // 实例方法 
    {
        alert(this.name+"在run")
    }
}
Person.prototype.work = function()
{
    alert(this.name+"在work")
}

//web 类继承Person 

/* 通过对象冒充实现继承 */
function Web(name,age)    
{
    Person.call(this)  
}
var w = new Web()
w.run() //对象冒充可以继承构造函数中的属性和方法

w.work()//报错,无法调取work(), 因为对象冒充无法继承原型链上的属性和方法

/* 通过原型链实现继承 */
function Web2(name,age)
{

}
Web2.prototype = new Person() //既可以继承构造函数里的属性和方法,也可也继承原型链中的属性和方法
var w2 = new Web2("jack",11)  //但是实例化时无法给父类传参
w2.run()  //undefined在run

/* 原型链和对象冒充组合继承 */
function Web3(name,age)
{
    Person.call(this,name,age)  
}
Web3.prototype = new Person() //或者写成 Web3.prototype = Person.prototype
var w3 = new Web3("jack",11)
w3.run() //jack在run
w3.work() //jack在work

/* TS中类的定义 */
class Person
{
    name:string; //属性,前面省略public关键词
    constructor(name:string)
    {
        this.name = name
    }
    run():void
    {
        alert(this.name)
    }
    getName():string{
        return this.name
    }
    setName(name:string):void{
        this.name = name
    }
}

var p = new Person("Jack")
p.run()
alert(p.getName())
p.setName("Lucy")

/* TS中实现继承 */
class Person2
{
    name:string; //属性,前面省略public关键词
    constructor(name:string)
    {
        this.name = name
    }
    run():void
    {
        alert(this.name)
    }
}

class P extends Person2{
    constructor(name:string)
    {
       super(name) //初始化父类构造函数
    }
    work(){
        alert(`${this.name} is working`)
    }
}
var pp = new P("mike")
pp.run()
pp.work()

/* 类里面的修饰符 */
public : 类里面和外面以及子类都可访问
protected:类里面和子类里可以访问,外部无法访问
private:类里可以访问,子类和外部都无法访问

属性不加修饰符, 默认表示public


/* 静态属性和静态方法 */

class Person3
{
    name:string; //属性,前面省略public关键词
    static age:number = 20
    constructor(name:string)
    {
        this.name = name
    }
    run():void
    {
        alert(this.name)
    }
    static print()  //静态方法,里面无法调用类里面的属性,比如name
    {
        alert("print!")
    }
}

Person3.print() // 静态方法直接调用
var A = Person3.age

/* 多态:父类定以一个方法但不实现,让继承它的子类去实现,每一个子类有不同的表现 */
class Animal{
    name:string
    constructor(name:string)
    {
      this.name = name 
    }
    eat(){
       console.log("吃的东西")
    }
}

class Dog extends Animal
{
    constructor(name:string)
    {
        super(name)
    }
    eat()
    {
        return this.name + "is 狗粮"
    }
}

class Cat extends Animal
{
    constructor(name:string)
    {
        super(name)
    }
    eat()
    {
        return this.name + "is 猫粮"
    }
}

/* TS中的抽象类,它提供其他类继承的基类,不能直接被实例化
用abstract关键字定以抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准
*/
abstract class Car{
    public name:string
    constructor(name:string)
    {
        this.name = name
    }
    abstract drive():any
}
class Car1 extends Car{
    constructor(name:string)
    {
      super(name)
    }
    drive():any{      
       console.log("Car1 drive")
    }
}


/* TS中接口 */

/* 1.属性接口 */
//自定义方法传入参数对json进行约束
function print(labelInfo:{label:string}):void{

}

print({label:"123"})

//对批量方法传入参数进行约束

interface FullName{
    firstName:string;
    secondName:string;

}
function printName(name:FullName):void{
    console.log(name.firstName+‘--‘+name.secondName)
}
printName({firstName:"Jack",secondName:"Ma"})

var obj = {   //这种写法的话只需要obj包含了firstName和secondName即可
    age:12,
    firstName:"Jack",
    secondName:"Ma"
}

printName(obj)  

//接口:可选属性
interface FullName2{
    firstName:string;
    secondName?:string;  //可选参数
}
function getName2(name:FullName2)
{
    console.log(name.firstName)
}
getName2({firstName:"jack"}) //secondName是可选参数可不传

 

Typescript 总结

原文:https://www.cnblogs.com/Aaron-Lee/p/13541036.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!