首页 > 代码库 > typescript

typescript

ts兼容js,微软开发,ts会移除注释,
类 接口  模块

class hello{}//就是function,function就是class
function demo(){}  //支持js语法
---------------------------------------------------------
数据类型:Boolean Number String Array Enum Any Void

var isBoolean;//js
var isBoon : boolean = false;//ts,不给false是undefined
function tell(){
    alert(isBoon);
}
tell();
-------------------------------------------
var num;//js
var num : number = 1;//ts
num++;
-----------------------------------------
var s : string = "sss";
s += "dd";
-----------------------------------------
var list : number[] = [1,2,3];
var list1 : Array<string> = [‘1‘,‘2‘,‘3‘];
alert(list[1]);
alert(list1[1]);
-------------------------------------------
enum Color{Red,Green,Blue};//下标从0开始
var c:string = Color[1];

enum Color{Red = 1,Green,Blue};//下标从1开始
var c:string = Color[2];//Green

enum Color{Red = 5,Green = 10,Blue = 20};//下标是50,10,20
var c:string = Color[10];//Green

enum Color{Red,Green,Blue};
var c:Color = Color.Green;//1,获取下标
alert(c);
-------------------------------------------
var is : any = 123;
is = "hello";
is = true;
alert(is);//flase
--------------------------------------------
var list:any[] = [1,"hello",true];
alert(list[1]);
----------------------------------------
//Void是对函数声明的。
function tell():string{
    return "www";
}

function say():number{
    return 10;
}

function tee():void{
    return;
}
---------------------------------------------------------
//js是通过prototype实现复用,
class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){//构造方法不是跟类名一样
        this.name = name;
        this.age = age;
    }
    print(){//方法不需要function
        return this.name + this.age;
    }
}

var p = new Person("sss",111);
p.print();

--------------------------------------------------------
//类的继承
class Person{
    name:string;
    age:number;
    tell(){ 
        return this.name + this.age;
    }
}

class stud extends Person{//stud有name和age
    school:string;
    tell(){
        return this,name + this,age + this,school;
    }
}
var s = new stud("sss",111);
s.name = "nnn";
s.age = 22;
s.school = "sss";
s.tell();
--------------------------------------------------------------

class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    tell(){ 
        return this.name + this.age;
    }
}

class stud extends Person{//stud有name和age
    school:string;
    constructor(school:string){
        this.school = school;
        super("sss",222);
    }
    tell(){
        return this,name + this,age + this,school;
    }
}
var s = new stud("ssss");
s.tell();

--------------------------------------------------------
//public private,什么都不写是public

class People{
    public name:string;
    private age:number;//报错,
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        this.name + this.age;
    }
}
class Teacher extends People{
    school:string;
    constructor(school:string){
        this.school = school;
        //super("aaa",222);
    }
    print(){
        return this.name + this.age + this.school;
    }
}
var t = Teacher();
t.name = "aaa";
t.age = 44440;
t.school = "ddddd";
t.print();
------------------------------------------------------
//封装
class Hello{
    private _name:string;
    tell(){
        return this.name;
    }
    get name():string{
        return this._name;
    }
    set name(name:string){
        this._name = name;
    }
}
var h = new Hello();
h.name = "sss";//set方法
h.tell();
-------------------------------------------------------
//static
class Person{
    static name:string;
    tell(){
        alert(Person.name);
    }
}
var p = new Person();
Person.name = "sss";
p.tell();
//引用数据类型
class Greet{
    greeting:string;
    constructor(message:string){
        thius.greeting = message;
    }
    greet(){
        return this.greeting;
    }
}
var greet:Greet = new Greet("ssss");//引用数据类型
greet.greet();

-----------------------------------------------------
//函数类型,
//js有名函数和匿名函数。
function add(x,y){
    return x + y;
}
var myadd = function(x,y){
    return x + y;
}

function add(x:number,y:number):number{
    return x + y;
}

var myadd = function(x:number,y:number):string{
    return "ssss";
}

var myadd1:(name:string,age:number) =>number = function(n:number,a:number):number{
    return a;
}
----------------------------------------------------
//默认参数、可选参数
function bulidName(firstName:string,lastName?:string){//第二个参数可以不传,第一个参数加?号则可以不传参数,
    if(lastName){
        return firstName + lastName;
    }else{
        return firstName;
    }
}
var r1 = buildName("ss","www");
var r2 = buildName("sss");//传一个参数也可以,不能传3个参数,


function bulidName(firstName:string,lastName = "ssss"){
    return firstName + lastName;
}
var r1 = buildName("ss","www");
var r2 = buildName("sss");//传一个参数也可以,不能传3个参数
----------------------------------------------------------
//可变参数
function pp(f:string, ...abc:string[]){
    return f + abc.join(" ");
}
var p = pp("ss","ss",‘dee‘,"ssww");
-----------------------------------
//Lambads/this关键字
var people = {
    name:["w",‘e‘,‘f‘,‘b‘],
    getName:function(){
        return function(){
            var i = Math.floor(Math.random() * 4)
            return {
                n:this.name[i]
            }
        }
    }
}
var d = people.getName();
d().n; //获取不到

var people = {
    name:["w",‘e‘,‘f‘,‘b‘],
    getName:function(){
        return ()=>{
            var i = Math.floor(Math.random() * 4)
            return {
                n:this.name[i]
            }
        }
    }
}
var d = people.getName();
d().n; //获取到
-------------------------------------------------------
//函数重载
function aa(name:string):string;
function aa(age:number):number;
function aa(nameorage : any):any{
    if(nameorage && typeof nameorage === ‘string‘){
        alert(‘姓名‘);
    }else{
        alert(‘年龄‘);
    }
}
aa("ss");
aa(19);
-------------------------------------------------------
//接口,类型检查
function print(labelo:{label:string}){
    console.log(labelo.label);
}
var my = {label:"dddd"};
print(my);


interface ppp{
    label:string;
}
function cc(ll:ppp){
}
var dd = {label:"label"};
cc(dd);

//接口可选属性
interface USB{
    name:string;
    age:number;
    schllo?:string;//可选参数,可以不传,
}
function printUSB(us:USB){
    console.log(us.name);
    console.log(us.age);
}
var my = {name:"dd",age:111};
printUSB(my);

//接口,函数类型,对函数规范化
interface search{
    (s:string,su:string):boolean;
}
var v:search;
v = function(a:string,su:string){
}

//接口,数组类型,对数组规范化
interface arr{
    [index:number]:string;//索引是数字,内容是string
}
var myarr = arr;
myarr = [‘ss‘,‘dee‘];

//接口,class类型,对类的规范化
interface cc{
    time:Date;
    settime(d:Date);
}
class CC implements cc{
    time:Date;
    settime(d:Date){
        this.time = d;
    }
    constructor(){
    }
}

//接口继承与混合
interface a{
    co:string;
}
interface ab{
    dd:number;
}
interface b extends a,ab{//b有了2个属性
    cd:number;
}
var s = <b>{};
s.cd = 11;
s.co = "ss";
s.dd = 33;


interface ee{
    ee1:number;
    ee2():void;
    (ee3:number):string;
}
var c:ee;
c(10)
c.ee2();

----------------------------------------------------------
//泛型
function hello(num:number):number{
    return num;
}

function hello<T>(num:T):T{//函数是泛型,参数是泛型,返回值类型是泛型,T是任何大写字母就可以,
    return num;
}
var dd = hello<string>("sss");
alert(dd);
----------------------------------------
function hello<T>(num:T[]):T[]{
    alert(num.length);
    return num;
}
var list:Array<string> = hello<string>([‘ww‘,‘ee‘,‘rr‘]);
alert(list[0]);
---------------------------------------

function Hello<T>(arg:T):T{
    return arg;
}
var m:<K>(arg:K) => K = Hello;//lamdar表达式,指定一个对象m,将其指定成方法,=>K指定返回值,并把函数Hello赋值给他,
m("sss");

---------------------------------------
//lamdar表达式,lamdar表达式是一个匿名函数,myFunc是一个函数,(a:number)是参数,=>string返回值是string类型,
var myFunc:(a:number)=>string = function(aa:number):string{
    return "ssss" + a;
}
myFunc(2);
//var myFunc = function(aa:number):string{
//    return "ssss" + a;
//}

var myh:{<T>(arg:T):T} = Hello;
myh("myh");

----------------------------------------
interface Hello{
    <T>(arg:T):T;//接口中的一个泛型函数
}
function myHeel<T>(arg:T):T{
    return arg;
}
var MH:Hello = myHeel;
MH("ssss");
MH<string>("ssss");

-----------------------------------------
interface Hello<T>{
    (arg:T):T;
}
function myHeel<T>(arg:T):T{
    return arg;
}
var mh:Hello<number> = myHeel;
mh(100);

----------------------------------------
//泛型类
class Hello<T>{
    zer:T;
    add:(x:T,y:T)=>T;
}
var myheel = new Hello<number>();
myheel.zer = 10;
myheel.add = function(x,y){
    return x + y;
}
myheel.add(11,11);
---------------------------------------------------------
//模块:模块化可重用,封装变量和函数
interface str{
    isAcc(s:string):boolean;
}
var le = /^[A-Za-z]+$/;
var num = /^[1-9]$/;
class Letter implements str{
    isAcc(s:string):boolean{
        return s.match(num);
    }
}

----------------------------------------------------
module Validation{
    export interface sv{
        isAcc(s:string):boolean;
    }
    var le = /^[A-Za-z]+$/;
    var num = /^[1-9]$/;
    export class Letter implements str{
        isAcc(s:string):boolean{
            return s.match(num);
        }
    }
}

-------------------
module Time{
    export class Test{
        element:HTMLElement;
        span:HTMLElement;
        timer:number;
        constructor(e:HTMLElement){
            this.element = e;
        }
    }
}

 

typescript