了不起的typescript

//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);