TypeScript

TypeScript是由微软开发的javascript开发语言。

它是javascript的高级语法定义。

使用,可以在vs 里创建typeScript项目。

或npm install -g typescript 

tsc XX.ts  //编译ts 成js文件。

也可以在webstorm里创建项目再创建typescript文件,编辑器会自动检测语法并生成对应的js文件。


-------------------------------------------------

基本类型

boolean

number

string

array

enum

any 

void

使用:

var bool:boolean=false;
var num:number=33;
var name:string="star";
//特定类型的数组:type[] Array<type>
var arr:number[]=[1,2,3];
var arr2:Array<number>=[1,2,3]
//枚举
enum color {red,blue};
//.值来获取此值的下标,默认从0开始
var c:color=color.blue;
//枚举[]访问它的下标值
var aa:string=color[0];
//给值设置下标,默认从0开始可以指定如从1开始
enum color1 {red=1,blue=2};
var c1:color1=color1.red;
//any 随意类型,可以给任意类型的值
var a:any=3;
a="star";
var cs:any[]=[1,"star",{}];
//设置函数无返回值
function fn():void{
   console.log('a');
}
//设置返回值类型
function fn2():number{
    return 1;
}
TypeScript定义了数据类型,
在定义变量时可在变量名后:type来指定其类型。
一但指定赋值时就必需为符合的类型。
函数参数也可定义类型
(name:star)
也可以定义默认值
(age:number=1)

类的定义-----------------
// class XX{}创建类  括号内不是以对象方式来书写的
//属性以;结束
//构造函数construcotr(){}
//定义方法XX(){}
//方法或函数在定义时可以为参数定义默认的值。
// age:类型=默认值
class Person{
    name:string;//定义属性
    age:number;
    constructor(name:string,age:number=20){
        this.name=name;
        this.age=age;
    }
    print(){
        console.log(this.name+this.age)
    }
}

class 类名{主体}
主体内容必不是对象的形式。
定义属性XX:type;
定义构造函数用到constructor关键字这后是函数参数和函数内容
方法的定义直接方法名(){}
不需要js 里的function 关键字了。
方法内可用this来引用当前对象。
var a=new Person("star",23);
a.print();
创建实例对象用new 和js是一样的。
//继承
//class XX extend child {}
//子类有父类的所有属性和方法,子类可以自定义构造函数,
//构造函数内可用super来调用父类的构造函数并传递值来修改当前属性。
//super.XX也可来调用父类的方法
class Student extends Person{
    school:string;
    constructor(name:string,age:number,school:string){
        this.school=school;
        super(name,age);
    }
    print(){
        console.log(this.name+this.age+this.school);
    }
}
//实例化new XX()
var b=new Student("cc",33,'school');
b.print();

类的继承,用extends 父类{}
继承类有父类的所有属性和方法,也可以添加属于自己的属性和方法。
还可以定义相同的类或构造函数来覆盖父类的。
类中用super来引用父类,super()默认引用父类的构造函数。super.Xx()引用父类的某方法。
//访问修饰符 public private
//未定义的属性修饰符默认是public
//当定义属性为private 私有的时,它只能在类内访问如构造函数方法中获取和修改。
//用实例对象.XX来访问会报错
class People{
    private  name:string;
    age:number;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    print(){
        console.log(this.name+this.age);
    }
}
var cc=new People('star',32);
//私有的类个无法访问
//cc.name='b';
cc.print();

 

默认类的属性是public 全局访问。
当用private定义时,此属性只能在类内方法和修改。
当用实例对象.XX来访问时会报错。

//封装
class Hello{
    private _name:string;
    get name():string{
        return this._name;
    }
    set name(newname:string){
        this._name=newname;
    }
}
var a=new Hello();
a.name='star';
console.log(a.name)

和net 中是一样的。
定义一个私有变量,
用get set来获取和修改变量。
get set 定义的是函数,函数名是一样的.
get set 在webstorm中默认是不可用的。
需要在设置里的languages & frameworks下的typescript内设置command line options:为-target ES5 才可用。


//javascript 中的函数
function add(a,b){
    console.log(a+b);
    return a+b;
}

//指定函数的参数类型和返回值类型
//XX?:type  表示可选 参数
function addb(a:number,b?:number):number{
    console.log(a+b);
    if(b){
        return a;
    }else{
        return a+b;
    }
}

addb(10,20);
addb(10);
//addb(10,30,20); 当参数多或少时会报错

//参数默认值
//调用时可以不传递默认参数,但参数多了会报错
function numadd(a:number,b:number=1){
    console.log(a+b);
    return a+b;
}
numadd(1,2);
numadd(1);
//numadd(1,2,3);

//可变参数,参数的类型需要指定类型
//多个参数需要和指定的类型一样。
//写法在参数前加上...类型是数组的。
//用参数定义名来获取可变参数数组。
//可变参数定义需放到最后。
function numaddb(num:number,...nums:number[]){
    console.log(num+","+nums.join(' '));
}
numaddb(1,2,3,4,5);
numaddb(1,3,3,4);

var mames={
    name:["a","b","c","d"],
    getname:function(){
        var i=Math.floor(Math.random()*4);
        return this.names[i];
    }
}

可为函数的参数指定类型:type 
还可指定返回类型():void  ():type
函数参数可设置默认值 (name:type=1)
函数参数可选传递(name?type)
函数参数可不定传递(num:number,...nums:number[])
也就是指定一个数组参数并定义类型前加上...
引用时用nums来获取参数数组

//指定参数对象的属性和类型
function fn(obj:{name:string}){
    console.log(obj.name);
}
fn({name:'star'});

//interface 创建接口
//指定接口属性和类型
interface nameobj{
    name:string;
}
//函数参数可以指定为接口类型
function fn1(obj:nameobj){
    console.log(obj.name);
}
fn1({name:'cc'})//传递时参数就需要按接口属性和类型要求

//接口可选属性 加上?
interface usb{
    name:string;
    age?:number;
}
function fn2(obj:usb){
    console.log(obj.name+obj.age);
}
fn2({name:'cc'});


//接口方法类型  定义方法的参数类型和返回类型
interface push{
    (name:string,age:number):string;
}
//使用时需指定变量的接口赋值的函数需要符合要求
var su:push=function(name:string,age:number):string{
    return name+age;
}
var result=su('cc',32);
console.log(result);

//接口数组 类型
interface subarr{
    [index:number]:string;
}
var cc:subarr=["a","b"];

//接口 定义用于类的实现
interface cl{
    time:Date;
    settime(d:Date);
}
//类的实现用implements
//接口内定义的属性和方法都需要在类中实现的。

class Ch implements cl{
    time:Date;
    constructor(time:Date){
        this.time=time;
    }
    settime(time:Date){
        this.time=time;
    }
}


//接口继承 混合类型
interface shape{
    color:string;
}
interface stroke{
    width:number;
}
//接口通过extends 实现多继承 。
interface square extends shape,stroke{
    length:number;
}
//定义变量时用<>{};  或用:XX
var objc=<square>{};
objc.color="red";
objc.length=10;
objc.width=10;
//当设置变量类型为接口时且需赋值。
// 那么值必须按要求写,全部必写。也不少参数和多参数。
var cd:square={color:"cc",length:22,width:33};
var bd:square;


//混合类型
interface  cou{
    inter:number;
    reset():void;
    (num:number):void;
}
var cbc:cou;
cbc.inter=33;
cbc.reset=function(){

}


接口:
可用来定义一组规范。
内容用;结束。
接口可当做类型,供变量或参数用。变量或参数赋值传递时就需要按要求设置了。
接口属性可用?来设置可不传递
当定义类型为接口,那么值必须按要求设置,不可多也不可少。
接口定义函数:
指定参数类型和返回类型
接口定义方法和函数一样只是多了个方法名
函数实现按要求
接口数组 :指定数组类型
class classname implements interfacename{}
类需要实现接口的所有属性。
接口继承
interface name extends a,b,c
也是用extends关键字
接口实现包括继承的接口也要实现。


//--------------------------泛
function Hello(name:string):string{
    return name;
}
//泛类型<T> T可以随意指定
//指定函数为泛类型,参数和返回值也一样
function fn<T>(arg:T):T{
    return arg;
}
//使用时指定类型为字符串  那么它的参数和返回就都需是字符串。
var a=fn<string>("star");
console.log(a);

//泛型参数是根据传递的类型来决定它的属性的。
//传递的是数组形参数,它是有length属性的
function fn2<T>(arr:T[]):T[]{
    console.log(arr.length);
    return arr;
}
//使用时指定参数是string的数组,调用时指定泛类型为string参数为string的数组
var c:string[]=fn2<string>(['1','2']);
console.log(c);

//泛型类型
function fn3<T>(str:T):T{
    return str;
}
//创建一个泛类型的函数赋值为fn3
//<T>(str:T)  表示此变量为一个泛函数,参数也是泛类型
// =>T  表示返回值 为泛类型
//=fn3  此变量等于fn3泛函数。
var cc:<T>(str:T)=>T=fn3;
console.log(cc('cc'));
//函数申明的第二种写法
var ccb:{<T>(str:T):T}=fn3;
console.log(ccb('ccb'));

//定义函数类型
//:(参数类型) =>  返回类型   =函数定义
var fun:(num:number) => string=function(a:number){
    return 'val='+a;
}
console.log(fun(33));

//接口中应用泛
//接口函数为泛类型
interface in1{
    <T>(str:T):T;
}
//定义泛函数  函数、参数、返回值为泛类型
function fnc<T>(str:T):T{
    return str;
}
//指定变量类型为接口  值为泛函数
var cs:in1=fnc;
console.log(cs('dd'));
console.log(cs<number>(33));

//接口 类型为泛类型,函数参数返回值为泛类型
interface in2<T>{
    (str:T):T;
}
//函数类型、参数、返回值为泛类型
function fns<T>(str:T):T{
    return str;
}
//变量类型为接口类型为string 赋值为函数
//这个函数变量只能传递string
var dd:in2<string>=fns;
console.log(dd('fd'))


//泛型类
//指定类为泛类型,属性也为泛类型,方法参数和返回值也为泛类型
class cl<T>{
    name:T;
    add:(num:T)=>T;//方法的申明
    getname:{(num:T):T};//方法的申明二
}
//new 创建对象指定类为string类型
//那么对象的属性赋值就需要为string
//对象方法的实现也需是string
//对象方法调用也需要sgring
var cd=new cl<string>();
cd.name="star";
cd.add=function(num:string){
    return num;
}
console.log(cd.add('ss'));



//module name{}
//模块内创建属性、类、接口、需要export关键字
module validation{
    export interface  str{
        isbool(s:string):boolean;
    }
    export  class cla implements  str{
        isbool(s:string):boolean{
            return /^[a-zA-Z]$/.test(s);
        }
    }
    export class clb implements  str{
        isbool(s:string):boolean{
            return /^[0-9]$]/.test(s);
        }
    }
}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值