• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

了不起的typescript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请 
//TypeScript-基本数据类型和报错解析

//基本数据类型
//let num = 25;
/* let flo = 25.5;
let hex = 0xf000;
let binary = 0b1001;
let octal = 0o733; */

//重新赋值
//num = '25';//不能存储非原有数据类型的数据

//ts 原型
//let num:number = 25; //等同于 let num = 25;


//booleab
//let islogin = false;
let islogin:boolean = false;
islogin = true;


//string
let str:string = "hello world";
str = "12";

let anything;//这样做是可以的 等同于 let anything:any
anything = 25;
anything = "hello";





　　


 


 




//数组 元组 枚举

//数据
let names:Array<string> = ["shaozhu","douddouy","chixing"];
console.log(names);
//names[0] = 100;//不能这样写
names[0] = "hhee";//这样写可以



let numbers:number[] = [1,2];//也可以这样写 数字数组
let anyarray :any[] = [1,true,"11"];//这样什么数据都可以写


//元组
let colors:[string,number] = ["try",99];//这个是按照顺序的 不能换顺序



//枚举 enum
enum Color{
    Black = 100,
    Yellow,
    Red,
    Blue
}

let myColor:Color = Color.Red;
console.log(myColor);//值是 从0开始的





　　


 


 




//TypeScript-函数类型
//函数的相关类型

//必须返回字符串 函数返回值的类型
function returnvalue():string{
    return "hello";
}

console.log(returnvalue());


//没有任何返回值
function sayhello():void{
    console.log("hello !@");
}


//参数类型 指定传的参数
function sumvalue(value1:number,value2:number):number{
    return value1+value2;
}

console.log(sumvalue(10,6));


//函数类型
let myfunc:(a:number,b:number)=>number;// 声明传的参数和返回的类型
myfunc = sumvalue;
//myfunc(10,20);
console.log(myfunc(10,20));





　　


 


 


 




//TypeScript-对象类型和type

let dataobj:{name:string,age:number} = {
    name:"shaozhu",
    age:31
}

dataobj = {
    name:"1222",
    age:25
};


//复杂的对象类型
let complex:{data:number[],myfunc:(item:number)=>number} = {
    data:[12,23,364,6564],
    myfunc:function(item:number):number{
        return item+1;
    }
}


//type 生成类型 可以复用

type Mytype = {data:number[],myfunc:(item:number)=>number} 
let complex2:Mytype = {
    data:[12,23,364,6564],
    myfunc:function(item:number):number{
        return item+1;
    }
}





　　


 




//TypeScript-never和null类型
//uni type  检查类型 null undefined never

let uniintype:number|string|boolean = 12;
uniintype = "12";
uniintype = false;


//检查类型
let checktype = 10;
if(typeof checktype == "number"){
    console.log("1");
}


//null 和 undefined
let mynull = null;
mynull = undefined;

//never 类型 任何类型的子类型
//never  never类型是任何类型的子类型 也可以赋值给任何类型 然后 没有类型是
//never 的类型或者可以赋值给never 
//另外 （处理never 本身之外） 即使any和不可以赋值给never
//通常表现为抛出异常或无法执行到终止点 （例如无限循环）

let x:never;
//x = 123;
//不能将其它类型转换为 never 类型


///never 使用场景 抛出异常
function error(message:string):never{
    throw new Error(message);
}


//死循环
function loop():never{
    while(true){

    }
}


//异常也是 never
let y:number;
y = (()=>{
    throw new Error("message");
})()





　　




//TypeScript-类型练习
type sunmvalue = {money:number,count:(val:number)=>void}

let sumvalue:sunmvalue = {
    money:200,
    count:function(value:number):void{
        this.money += value;
    }
}


let handleCount:{name:string,symvalue:sunmvalue,friends:string[]} = {
    name:"henry",
    symvalue:sumvalue,
    friends:["bucky","elyse","hhe"]
};



handleCount.symvalue.count(500);
console.log(handleCount);





　　




//TypeScript-类(属性和方法)

//public 公开的 
//private 私有的
//protected 被保护的

class Person{
    public name:string;
    protected gender:string;
    private age:number=27;
    constructor(name:string,public username:string,gender:string){
        this.name = name;
        this.username = username;
        this.gender = gender;
    };

    printAge(age:number){
        console.log(this.age);
        this.age = age;
    };
    setGender(gender:string){
        this.gender =gender;
        console.log(this.gender);
    }
}




const person = new Person("shaozhu","hhhe","122");
console.log(person.name);
console.log(person.username);

person.printAge(30);
person.setGender("女")





　　


 


 




//TypeScript-类(属性和方法)

//public 公开的 
//private 私有的
//protected 被保护的

class Person{
    public name:string;
    protected gender:string;
    private age:number=27;
    constructor(name:string,public username:string,gender:string){
        this.name = name;
        this.username = username;
        this.gender = gender;
    };

    printAge(age:number){
        //console.log(this.age);
        this.age = age;
    };
    setGender(gender:string){
        this.gender =gender;
        //console.log(this.gender);
    }
}




const person = new Person("shaozhu","hhhe","122");
//console.log(person.name);
//console.log(person.username);

person.printAge(30);
person.setGender("女")



//TypeScript-类的继承
//接着上面的代码写


class Student extends Person{
    public ssid:number=1124;
    constructor(name:string,username:string,gender:string,ssid:number){//
        super(name,username,gender);

        this.ssid = ssid;//让父类的东西可以在子类看到
        //console.log(this.gender);//yes
        //console.log(this.age);//no

        this.setGender("女");
    }
}


const misterxie = new Student("xiexie","xiexie1","xiexie2",1024);
console.log(misterxie.name,misterxie);

misterxie.printAge(22);





　　


 




//TypeScript-set和get和static
//1.class set get 修饰词 用于隔离私有属性 和可公开属性
//2. class 静态属性和方法

class Person{
    private _name:string = "shaozhu";

    static PI:number=3.14;//静态属性

    static callccirle(value:number):number{
        return this.PI*value;
    };

    //私有属性赋值
    set setname(value:string){
        this._name=value;
    }

    //私有属性取值
    get getname(){
        return this._name;
    }
}

/* let person = new Person();
console.log(person.getname)
person.setname = "xiexie"
console.log(person.getname)
console.log(person.PI)// 静态的不能这样取 */


console.log(Person.PI)
console.log(Person.callccirle(8));





　　


 




//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问

namespace MyNath{

    export const PI = 3.14;

    export function sumvalue(num1:number,num2:number):number{
        return num2+num1;
    }

    export function calcacirle(value:number):number{
        return value*PI;
    }

}

const PI = 2.88;


console.log(MyNath.sumvalue(5,10));

console.log(PI);

console.log(MyNath.PI);





　　




//TypeScript-命名空间文件拆分 ！！！！！

//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问

//sumvalue.ts

namespace MyNath{
    export function sumvalue(num1:number,num2:number):number{
        return num2+num1;
    }
}

//TypeScript-命名空间文件拆分

//-------------------------------------------------

//calcacirle.ts

//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
//TypeScript-命名空间文件拆分
namespace MyNath{
    const PI = 3.14;
    export function calcacirle(value:number):number{
        return value*PI;
    }

}

//-------------------------------------------------

app.ts

//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问


console.log(MyNath.sumvalue(5,10));

console.log(MyNath.calcacirle(8));


//TypeScript-命名空间文件拆分

//编译命名空间
//tsc --outfile app.js  sumvalue.ts calcacirle.ts app.ts





　　


 




//多个文件合并
//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问

/// <reference path="calcacirle.ts" />
/// <reference path="sumvalue.ts" />



console.log(MyNath.sumvalue(5,10));

console.log(MyNath.calcacirle(8));
console.log(MyNath.shaozhu.shaozhuwl(100,10));

//TypeScript-命名空间文件拆分

//编译命名空间
//tsc --outfile app.js  sumvalue.ts calcacirle.ts app.ts




//多重命名空间 引入后编译 F是大写
///tsc app.ts --outFile app.js


//--------------------上面这个是app.ts----------------------

//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问

namespace MyNath{
    export function sumvalue(num1:number,num2:number):number{
        return num2+num1;
    }

    //多重命名空间 
    export namespace shaozhu{
        export function shaozhuwl(value1:number,vaule2:number):number{
            return value1-vaule2;
        }
    }
}

//TypeScript-命名空间文件拆分


//--------------------上面这个是sumvalue.ts----------------------


//TypeScript-初识命名空间namespace
//命令空间 namespace
//export 声明允许访问
//TypeScript-命名空间文件拆分
namespace MyNath{
    const PI = 3.14;
    export function calcacirle(value:number):number{
        return value*PI;
    }

}


//--------------------上面这个是calcacirle.ts----------------------

//编译命令
//多重命名空间 引入后编译 F是大写
///tsc app.ts --outFile app.js





　　


 




//模块化引入 重点哦！！

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TS第一课</title>
    <script src="https://cdn.bootcss.com/systemjs/0.20.15/system.js"></script>
</head>
<body>
    
    <!-- <script src="./app.js"></script> -->
    <script>
        System.config({
            baseUrl:"/",
            packages:{
                "/":{
                    defayltExtension:"js",
                }
            }
        });

        System.import("app.js");
    </script>
</body>
</html>

---------------上面的是html-------------------


//TypeScript-模块module的使用 模块么么哒


//import {PI,calcacirle} from "./stuff/calcacirle";

import * as circl from "./stuff/calcacirle";


import {sumvalue,shaozhuwl} from "./stuff/sumvalue"

console.log(circl.PI);

console.log(circl.calcacirle(8));


console.log(sumvalue(10,900));
console.log(shaozhuwl(100,90));

//编译 tsc

---------------上面的是app.ts------------------


export const PI = 3.14;
export function calcacirle(value:number):number{
    return value*PI;
}

---------------上面的是calcacirle.ts------------------


//export 声明允许访问
//也可以用 export.default



export function sumvalue(num1:number,num2:number):number{
    return num2+num1;
}

//多重命名空间 

export function shaozhuwl(value1:number,vaule2:number):number{
    return value1-vaule2;
}



---------------上面的是sumvalue.ts------------------



//里面用了这个CDN

//<script src="https://cdn.bootcss.com/systemjs/0.20.15/system.js">





　　


 




//interface接口

//TypeScript-初识interface接口的用法
//interface接口

interface Person{
    name:string;
    age:number;//:必须要传
    sex?:string; // ?: 可以选
    readonly salary:number;// readonly 只读 不能修改
    [propName:string]:any;//any 任意
    greet():void;//无返回值的方法
}


//interface 可以继承 type 不能继承

let person:Person = {
    name:"shaizhu",
    age:28,
    sex:"男",
    salary:6000,
    ids:[1.,5,45,6,42,6,452,1],
    greet(){
        console.log("hello shaozhui");
    }
    
}


function ppringPerse(person:Person){
    console.log(`我的工资是${person.salary}`)
    person.greet();
}

ppringPerse(person);





　　
            
                

                  
 		
                      

                    

                     
                                        
                    
 
                       
                    
                    
 
                      





鲜花




握手




雷人




路过




鸡蛋







 
                    

                    
                     
                    
                    
                    

                     
                    
                  

                   
                  
                   
                  
                

                 
                
                
                
                 
                 
                

  
 
    该文章已有0人参与评论
    
请发表评论

    
  

  
 
    
     
    
        
    
    
    










                













                



    
    
    

   
    
         

    
全部评论

     
    
    
        

    

              

  




 
                     
                

            

            
                    

    	

            
            

                

                    
专题导读

                    
More+

                    

                

                

                    
                    
    
                        
    
                        
                    

                

            


                        

                

                	
上一篇：

                    TypeScript-字符串字面量类型发布时间：2022-07-18                    
下一篇：

                    TypeScript（08）： 循环发布时间：2022-07-18                    

                

            

                        
            

                

                    
热门推荐

                    
More+

                    

                

                

                    

                    

                    

                

                
            

            
            

                

                    
热门话题

                    
More+

                    

                

                

                    
    
                        
    
                        
                    

                

            

            
            

                

                    

                    
                

            

            
            

                

                    
阅读排行榜

                    

                    

                

                

                    
    
                        
    
                                                       
                    

                

                
            

            
            

                

                    

                    
                

            

        

    	












	

    
    

    	

        	

            	

                	
                

            	

                	

                    

                    	
扫描微信二维码

                        
查看手机版网站

                        
随时了解更新最新资讯

                    

                    

                

            	

                	

                    	
139-2527-9053

                        
在线客服（服务时间 9:00～18:00）

                        在线QQ客服
                    

                    
地址：深圳市南山区西丽大学城创智工业园

                    
电邮：jeky_zhao#qq.com

                    
移动电话：139-2527-9053

                

                

            

        

        
        

        	
Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap