typescript学习历程

ts的学习历程

认识ts

ts是js的超集，ts的风格更偏向于后端语言，其中ts的类编程，即面向对象编程的方式使得js的写法不再混乱，使得前端能够有效并快速的地写出更加优秀且完美的js代码。但是ts无法被浏览器正确的解读为浏览器语言，所以目前ts依旧是翻译为js再翻译成浏览器语言。

安装

ts翻译成js需要编译工具：npm install -g typescript

编译：tsc [文件名].ts

数据类型

// 布尔类型  简单的true和false  :boolean
    let isDone:boolean=false
    console.log(isDone)
// 数字类型  所有数字类型都是浮点型：number除了支持十进制个16进制的字面量，
// 还支持ECMAScript中引入的二进制和八进制字面量   :number
        // 十进制
        let num10:number=1
        console.log("num10="+num10)
        // 十六进制
        let num16:number=0xf00d
        console.log("num16="+num16)
        // 二进制
        let num2:number=0b1010
        console.log("num2="+num2)
        // 八进制
        let num8:number=0o744
        console.log("num8="+num8)
// 字符串类型  可以是""引用的，也可以是''引用的,还可以是模板字符串 :string
        let str:string="但是覅会计师"
        console.log(str)
// 数组类型  和js数组差不多，但是ts对于数组的定义更加严谨，而且有两种生命方式
        //（1）[]声明方式
        let list:number[]=[1,2,3,4,5]
        console.log(list)
        // 错误示范 可执行，不会报错，但在ts中会有报错警告
        // let listErr:number[]=[1,2,3,'12']
        // console.log(listErr)
        //（2）Array<>声明方式  又叫做数组泛型
        let listArr:Array<number>=[0,1,2,3]
        console.log(listArr)
        // 使用数组泛型声明不同变量数组
        let arr:Array<any>=[1,"2"]
        console.log(arr)
        // 查看是否能够赋空值  会提醒在赋值前使用变量，符合js，单不符合ts
        // let kong:number[]
        // console.log(kong)
// 元组类型  元组类型允许表示一个已知数量和类型的数组，各元素类型可不相同,本质还是数组类型  :[类型,类型]
        let yuan:[string,number]=["1",2]
        console.log(yuan)
        // 数组越界 ,访问越界元素时，会使用联合类型代替
        let yue:[string,number]=["1",2]
        yue[1]=1
        console.log(yue)
        yue[3]="12"//可以使string也可以是number
        console.log(yue)
        // yue[3]=true
        // console.log(yue)
// 枚举类型  enum类型 是对javascript标准类型的补充 、
        enum Color{red,green}
        console.log(Color)
        //  其编号由0开始，可手动改变其编号
        enum Color1 {red=5,green}
        console.log(Color1)
// any类型 指定的未知变量类型的类型，当你写出一个变来个但是不知道接下来会赋值什么类型就可以使用any
        let any:any
        console.log(any)
        // 可使用any指定不知内容类型的数组的内容
        let anyArr:any[]=[1,"2",{num:1}]
        console.log(anyArr)
// void  某种程度上，void和any相反，不代表任何一种类型，当一个函数没有返回值时常用，其返回类型为void
        function voidFun():void{
                console.log(1)
        }
        voidFun()
        //会报错，因为void时在没有返回值得情况下，二而下面我们用到了return返回
        //function voidFun1():void{
        //        return 1
        //}
       //console.log(voidFun1()) 
// null和undefined  在js中undefined是未赋值，已声明，null时未声明
// 在ts中分别叫做undefined类型和null类型，和void相似。他们可以使所有类型的子类型
​
​
// never类型 表示永不存在值得类型，例如总会抛出异常而根本不会有返回值的函数表达式等的返回类型
// 可以使任意类型的子类型，可以赋值给任意类型，即便是any也不可能赋值给never
// function error(message: string): never {
//         throw new Error(message);
//     }
//     error("2323")
​
// object类型表示除number，string，boolean，symbol。null。undefind之外的类型即非原始类型
​
// 类型断言 写法<类型>，as两种
        // <>写法
        let value:string="2323"
        let len=(<string>value).length
        console.log(len)
        // as
        let value1:string="2323sd"
        let len1=(value1 as string).length
        console.log(len1)

变量 声明

和js一样

接口

// 简单接口使用 
interface spConfig{
        color:string;
}
function sp(color:spConfig):void{
        console.log(color)
}
sp({color:'red'})
// 1 可选属性 接口中某些属性不全是必需的，只在某些条件下存在，或者根本不存在，可选属性在应用option bags模式时
// 很常用。即给函数传入的参数对象中只有不分属性赋值了  属性?:类型
​
        // 这是用到的接口
        interface dataConfig{
                name:string;
                age?:number;
                height?:string;
                weight?:string
        }
        //这是定义的方法 
        function data(config:dataConfig):void{
                console.log(config.name)
                console.log(config.age)
                console.log(config.height)
                console.log(config.weight)
        }
        // 这是要传入的值
        let option={
                name:"伊始",
                height:"170cm",
                weight:"106kg"
        }
        // 调用方法
        data(option)
// 只读属性  readonly
interface phoneConfig{
        readonly vesin:string
}
function phone(pOption:phoneConfig):void{
        console.log(pOption.vesin)
        // 此处报错
        // pOption.vesin="1.2"
}
phone({vesin:"1.1"})
        //readonly和const的区别
                // readonly 主要作为属性。const主要作为变量
// 额外的检查属性 当我们将未定义的接口值传入时，建辉在javascript中失败。
// 那么在我们引入和一个意外变量时如何处理呢 [propName:string]:any
interface colorConfig{
        r:number;
        g:number;
        b:number;
        [propName:string]:any
}
function setColor(color:colorConfig):void{
        console.log(color)
}
let colorOption={
        r:0,
        g:0,
        b:0,
        a:0
}
setColor(colorOption)
// 函数类型  为了使用接口表示函数类型，我们需要给接口定义一个调用签名，它就像时一个只有参数列表和返回值类型的函数定义
// 参数列表里的每个参数都需要名字和类型
interface searchFun{
        (key:string,str?:string):boolean
}
let search:searchFun
search=function(key:string,str?:string){
        console.log(key)
        console.log(str)
        return true
}
console.log(search("111","222"))
// 可索引的类型
interface indexConfig{
        [index:number]:string
}
let iConfig:indexConfig
iConfig=["non","coc"]
let istr:string=iConfig[0]
console.log(istr)
// 类类型 与c#和java的接口的基本作用一样，ts也能够用它来明确的强制一个类去符合某种契约
interface ClassInterface{
        time:Date;
        name:string;
}
class Person implements ClassInterface {
        time:Date;
        name:string;
        constructor(){
                this.time=new Date()
                this.name="伊始"
        }
}
let personFun=new Person()
console.log(personFun)
// 类静态部分和实例部分的区别  当你操作接口和类的时候，你要知道类是有两个类型的:静态部分的类型和实例的类型，
// 你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误
        // interface timeIn{
        //         new (h:number,m:number)
        // }
        // class time implements timeIn{
        //         newTime:Date;
        //         constructor(h:number,m:number){
        //                 this.newTime=new Date()
        //         }
        // }
// 当我们去处理他的时候应该直接操作类的静态部分
        interface timeCu{
                new (h:number,m:number):timeIn
        }
        interface timeIn{
                tick():any;
        }
        function createTime(ct:timeCu,h:number,m:number):timeIn{
                return new ct(h,m)
        }
        class ct implements timeIn {
                constructor (h:number,m:number){};
                tick() {
                    console.log("实现")
                }
        }
        let aTime=createTime(ct,12,1)
        console.log(aTime)
// 继承接口  和类一样，接口也可以互相继承
interface Shop{
        color:string
}
interface Goods extends Shop{
        name:string
}
// 这里使用到了断言
let windows =<Goods>{}
// let windows ={} as Goods
windows.color="red"
windows.name="vivo"
console.log(windows)
// 混合类型 接口能够描述javascript里的丰富类型
​
//接口继承类
class Control{
        public state:any
} 
interface select extends Control{
         name:string
}
// function selectFun(option:select):void{
//         console.log(option)
// }
// selectFun({name:"12",state:"23"})
class button extends Control implements select{
        name:string;
        constructor(){
                super()
                this.name="1212"
        }
}
let btn=new button()
console.log(btn)

类

// 简单的类
class Goods{
        // 值
        public name:string;
        private color:string;
        // 构造函数
        constructor(name:string,color:string){
                this.name=name
                this.color=color
        };
        // 函数
        getter(name:string):void{
                console.log(name)
        }
}
let goods=new Goods("手机","红色")
console.log(goods)
// 继承  extends 继承类，允许使用继承来扩展现在所有的类
class Phone extends Goods{
        private vison:string
        constructor(name:string,vison:string){
                super(name,"红色")
                this.vison=vison
        }
}
let phone=new Phone("vivo","1.0")
console.log(phone)
phone.getter("我是方法")
// 在这里。Phone是派生类，派生类需要用super()函数去执行基类的构造函数，在调用this前要使用super()函数
​
​
// public 默认修饰符，在这里是公开
// private 私有的，它不能在声明它的类外部访问
// protected 如果其中一个类里包含一个private，name只有当另一个类中也存在这样一个private成员，并且他们
// 都来自同一处声明时,我们才认为这两个类型是兼容的,对于protected成员也使用这个规则
// readonly 只读,只能在声明时或者在构造函数中被初始化
​
// 存取器,ts通过getters/setters来截取对对象成员的访问，他能帮你有效地控制对对象成员的访问
​
// 静态属性static
​
// 抽象类 abstract 作为其他派生类的积累使用，一般不会被直接实例化，abstract关键字是用于定义抽象类和抽象类内部
// 定义抽象方法
abstract class NewGoods{
        name:string;
        abstract use():void;
        constructor(name:string){
                this.name=name
        }
}
class NewPhone extends NewGoods{
        vison:string;
        use(): void {
            console.log(this)
        }
        constructor(vison:string,){
                super("1")
                this.vison=vison
        }
}
let newPhone=new NewPhone("1.1")
console.log(newPhone)
newPhone.use()
​
​
//构造函数  我们在创建了类时候，同时也创建了一个构造函数，这个构造函数在我们使用new创建类实例的时候被调用
​
// 把类当做接口使用，即接口继承类

函数

// 书写完整的函数类型
// let addGoods:(name:string,vison:string)=>Boolean=function(name,vison):boolean{
//         return true
// }
let addGoods:(name:string,vison:string)=>Boolean=function(name,vison){
        return true
}
console.log(addGoods("1","2"))
// 可选参数和默认参数   ts中每个函数的参数都是必须的，这不是指不能传递null或者undefined作为参数，而是说编译器检查
// 用户是否为每个参数都传入了值，编译器还会假设只有这些参数会被传递进函数，
// 简短的说就是传递给一个函数的参数个数必须与函数期望的参数个数一直
​
// 在js中每个参数都是可选的，然而在ts中我们可以通过  参数名？实现参数的可选
// 可选参数必须在必选参数后面
let selectFun:(obj:object,name?:string)=>number=function(obj){
        console.log(obj)
        return 1
}
        // 插曲
                // 数组的声明
                let arr:Array<number>=[1,2,3,4]
                // 元组
                let arr1:[number]=[1]
                // 数组
                let arr2:number[]=[1,2,5,4]
                // any数组
                let arr3:any[]=[1,"2","3",arr]
                console.log(arr1)
                console.log(arr2)
                console.log(arr3)
selectFun(arr)
// 默认参数  在ts中当用户没有传这个参数的时候或传递的是undefined时，我们可以为参数提供一个默认值。
// 他们叫做有默认初始化值得参数
function selectName(name="12"):void{
        console.log(name)
}
selectName()
// let select:(name:string)=>void=function(name="1"){
//         console.log(name)
// }
// select()
​
// 剩余参数 ...agu
function agu(...agu:any):void{
        console.log(agu)
}
agu([1,2,3],"name",1212)
// this指向
// 重载
function set(a:number):number
function set(a:string):string
function set(a:any):any{
        if(typeof a=='number'){
                return true
        }else if(typeof a==='string'){
                return false
        }else{
                return 1
        }
}
console.log(set(1))

泛型