关于ts的数据类型以及用法

目录

一、 基础的数据类型

任意类型any:

数字类型number:

字符串类型string:

布尔类型boolean:

数组类型:

元组:

枚举enum:

void :

null:

undefined:

never:

二、any、null、undefined、never简述

any           

null、undefined

never

三、联合类型

四、ts接口


一、 基础的数据类型


  • 任意类型any

                声明为 any 的变量可以赋予任意类型的值。

  • 数字类型number

                双精度 64 位浮点值,它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
  • 字符串类型string

                一个字符系列,使用单引号'或双引号"来表示字符串类型,反引号(`)来定义多行文本和内嵌表达式。

let name: string = "cuiht";
let years: number = 25;
let words: string = ` ${ name }年龄 ${ years + 1} 。`;
  • 布尔类型boolean

                表示逻辑值:true 和 false。

let flag: boolean = true;
  • 数组类型:

                声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];
  • 元组:

                元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
  • 枚举enum

                枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
  • void :

                用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {
    alert("Hello World");
}
  • null:

                表示对象值缺失。

  • undefined:

                用于初始化变量为一个未定义的值。

  • never:

      never是其它类型(包括nullundefined)的子类型,代表从不会出现的值。

二、anynullundefinednever简述


any
           

         任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型。示例如下

// 场景一、变量的值会动态改变时,任意值类型可以让这些变量跳过编译阶段的类型检查
let a: any = 1;    // 数字类型
a = 'Hello World';    // 字符串类型
a = false;    // 布尔类型
// 场景二、任意值允许在编译时可选择地包含或移除类型检查
let b:any = '5' , b1:number = 5 , b2:string = '5';
b.toFixed();    // 正确
b1.toFixed();    // 正确
b2.toFixed();    // 错误
// 场景三、定义存储各种类型数据的数组时
let arrayC: any[] = [5, false, 'Hello World'];
arrayList[1] = 100;

nullundefined


   null:在JavaScriptnull表示 "什么都没有",null是一个只有一个值的特殊类型,表示一个空对象引用,用typeof检测null返回是object
   undefined:在JavaScript中, undefined是一个没有设置值的变量,typeof 一个没有值的变量会返回undefined
         Null 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。

let a: number;
a = 1; // 运行正确
a = undefined;    // 运行正确
a = null;    // 运行正确

never


   never是其它类型(包括nulundefined)的子类型,代表从不会出现的值。这意味着声明为never类型的变量只能被never类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环),示例如下:

let x: never;
let y: number;
// 运行错误,数字类型不能转为 never 类型
x = 123;
// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

三、联合类型


        联合类型可以通过管道|将变量设置多种类型,赋值时可以根据设置的类型来赋值。
        语法格式:Type1|Type2|Type3
        示例如下:

let a:string|number;
a = 12;
console.log("数字为 "+ a);
a = "Runoob";
console.log("字符串为 " + a);

四、ts接口

接口是代码的一种规范、约束和规定,ts中接口可分为以下几类:

  • 对象型接口 :对对象的规范
  • interface Fullname {
      firstName: string;
      secondName: string;
      flag?: boolean;
    }
    function printName({firstName, secondName, flag}: Fullname) {  //解构 objName: Fullname
      console.log(firstName);
      console.log(secondName);
      if(flag){}
    }
    printName({ firstName: "shun", secondName: "ershun" });

  • 函数型接口 :对函数的规范
  • /*
    * ts中接口
    *  函数型接口 ,非常类似于java、c#中使用lambda表达式传入匿名函数
    *
    * */
    //
    // //对两个数进行运算得到另一个数  函数型接口
    interface  CalcTwo{
        (a:number,b:number):number;
    }
    
    
    /**
     * 计算数组被某种算法运算的结果
     * @param {number[]} arr  数组
     * @param {CalcTwo} calc  用户指定的算法函数
     * @param {number} initVal  传入初始值
     * @returns {number}  得到最终运算结果
     */
     function calcArr(arr:number[],calc:CalcTwo,initVal:number):number{
           var result=initVal;
          arr.forEach((value)=>{
              result = calc(result,value);
          });
    
         return result;
     }
    
     var arr:number[]=[1,3,5,7,9];
     var  add=function(a:number,b:number):number{
          return a+b;
      };
    
     var  multiply=function(a:number,b:number):number{
         return a*b;
     };
    console.log("相加",calcArr(arr, add, 0));//25
     console.log("相乘",calcArr(arr, multiply, 1));//945
    //或者直接传入一个匿名函数亦可
    var s1=calcArr(arr,function(a,b){
        return a*b;
    },1);
    console.log("s1",s1);//945
    
     var s2=calcArr(arr,function (a,b) {
         return (a+1)*(b+1);
     },1);
    console.log("s2",s2);//10170

  • 可索引(数组型)接口:对数组(or对象)的规范
  • /*
    * ts中接口
    *   可索引(数组型)接口   数组  可索引对象(hash、堆栈)  不常用
    * */
    
    //可索引接口
     interface UserArr{
         //定义索引key为number类型,索引值为string类型
         [index:number]:string
     }
    
     var arr1:UserArr;
      arr1=["aa","bb","cc"];
     var arr2: UserArr
      arr2={1:"hello",2:"world"};
     console.log(arr1);
     console.log(arr2);
    
    
    /*
    * ts中接口
    *   可索引(数组对象)
    * */
    interface hanleA {
      [index:number]:hanleB
    }
    
    interface hanleB {
      name: string,
      age: number,
      flag?: boolean
    }
    function handleReduce(arr: hanleA) {
      console.log(arr)
    }
    
    handleReduce([{name: 'shun', age: 12}, {name: 'enne', age: 12}])

  • 类类型接口: 对类的规范
  • /*
    * ts中接口
    *     类类型接口: 对类的规范  ,这种类型的接口在传统面向对象语言中最为常见,
    *     比如java中接口就是这种类类型的接口 。这种接口与抽象类比较相似,但是接口只能含有为抽象方法、成员属性。
    *     实现类中必须实现接口中所有的抽象方法和成员属性。
    * */
    
    interface  Animal{
        name:string;
        eat(s:string):string;
    }
    
    //实现接口使用implements关键字,继承 使用extends关键字
    //狗类
    class Dog implements Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        //实现接口中抽象方法
        eat(s){
           return  this.name+"吃肉:"+s;
        }
    }
    //猫类
    class Cat implements Animal{
        name:string;
        constructor(name:string){
            this.name=name;
        }
        //实现接口中抽象方法
        eat(s){
            return  this.name+"吃鱼:"+s;
        }
    }
    
    var dog=new Dog("tom");
    var cat=new Cat("kitty");
    console.log(dog.eat("五花肉"));
    console.log(cat.eat("乌鳢鱼"));

  • 其他接口:泛型接口、继承接口的接口 等
  • /*
     * ts中泛型
     *    泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型
     */
    
    //1 泛型函数
    
    /**
     * 获取数组中最小值 (数字)
     * @param {number[]} arr
     * @returns {number}
     */
    function  getMinNumber(arr:number[]):number{
        var min=arr[0];
        arr.forEach((value)=>{
            if(value<min){
                min=value;
            }
        });
        return min;
    }
    
    /**
     * 获取数组中最小值 (字符串)
     * @param {number[]} arr
     * @returns {number}
     */
    function  getMinStr(arr:string[]):string{
        var min=arr[0];
        arr.forEach((value)=>{
            if(value<min){
                min=value;
            }
        });
        return min;
    }
    
    console.log(getMinNumber([1, 3, 5, 7, 8]));//1
    console.log(getMinStr(["tom","jerry","jack","sunny"]));//jack
    
    /**
     * 获取数组中最小值 (T泛型通用)
     * @param {T[]} arr
     * @returns {T}
     */
    function getMin<T>(arr:T[]):T{
       var min=arr[0];
       arr.forEach((value)=>{
          if(value<min){
              min=value;
          }
       });
        return min;
    }
    
    console.log(getMin([1, 3, 5, 7, 8]));
    console.log(getMin(["tom","jerry","jack","sunny"]));
    
    
    //2 泛型类
    class GetMin<T>{
         arr:T[]=[];
         add(ele:T){
             this.arr.push(ele);
         }
        min():T{
           var min=this.arr[0];
           this.arr.forEach(function (value) {
              if(value<min){
                  min=value;
              }
           });
           return min;
        }
    }
      var gm1= new  GetMin<number>();
       gm1.add(5);
       gm1.add(3);
       gm1.add(2);
       gm1.add(9);
    console.log(gm1.min());
    
    var gm2= new  GetMin<string>();
    gm2.add("tom");
    gm2.add("jerry");
    gm2.add("jack");
    gm2.add("sunny");
    console.log(gm2.min());
    
    
    
    /**
     * 3 泛型函数接口
     */
    interface ConfigFn{
        <T>(value:T):T;
    }
    
    var getData:ConfigFn=function<T>(value:T):T{
        return value;
    }
    getData<string>('张三');
    // getData<string>(1243);  //错误
    
    
    // 类似  Map<String,Object> Param  接口
    interface Param{
        [index:string]:any
    }
    
    
    
    //4 泛型类接口
    
    /**
     * page分页对象
     */
    class Page{
        private currentPage:number=1; //当前页码 默认1
        private pageSize:number=10;//每页条数 默认为10
        private sortName:string; //排序字段
        private sortOrder:string="asc"; // 排序规则 asc | desc 默认为asc正序
    
    
         constructor(param:Param){
             if(param["currentPage"]){
                 this.currentPage=param["currentPage"];
             }
             if(param["pageSize"]){
                 this.pageSize=param["pageSize"];
             }
             if(param["sortName"]){
                 this.sortName=param["sortName"];
             }
             if(param["sortOrder"]){
                 this.sortOrder=param["sortOrder"];
             }
         }
    
        public    getStartNum():number{
            return   (this.currentPage-1)*this.pageSize;
        }
    }
    
    
    class User{
         id:number;//id主键自增
         name:string;//姓名
         sex:number;//性别 1男 2女
         age:number;//年龄
         city:string;//城市
         describe:string;//描述
    
    }
    
    //泛型接口
    interface  BaseDao<T> {
         findById(id:number):T;//根据主键id查询一个实体
         findPageList(param:Param,page:Page):T[];//查询分页列表
         findPageCount(param:Param):number;//查询分页count
         save(o:T):void;//保存一个实体
         update(o:T):void;//更新一个实体
         deleteById(id:number);//删除一个实体
    }
    
    /**
     * 接口实现类
     */
    class UserDao<User> implements BaseDao<User>{
         findById(id:number):User{
    
            return null;
         }
        findPageList(param:Param,page:Page):User[]{
             return [];
        }
        findPageCount(param:Param):number{
             return   0;
        }
        save(o:User):void{
    
        }
        update(o:User):void{
    
        }
        deleteById(id:number){
    
        }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值