javascript 开发语言 ecmascript 关于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 = [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是其它类型（包括null和undefined）的子类型，代表从不会出现的值。

二、any、null、undefined、never简述

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;

null、undefined

   null：在JavaScript中null表示 "什么都没有"，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是其它类型（包括nul和undefined）的子类型，代表从不会出现的值。这意味着声明为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=value;

}

});

return min;

}

/**

* 获取数组中最小值 （字符串）

* @param {number[]} arr

* @returns {number}

*/

function getMinStr(arr:string[]):string{

var min=arr[0];

arr.forEach((value)=>{

if(value

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(arr:T[]):T{

var min=arr[0];

arr.forEach((value)=>{

if(value

min=value;

}

});

return min;

}

console.log(getMin([1, 3, 5, 7, 8]));

console.log(getMin(["tom","jerry","jack","sunny"]));

//2 泛型类

class GetMin{

arr:T[]=[];

add(ele:T){

this.arr.push(ele);

}

min():T{

var min=this.arr[0];

this.arr.forEach(function (value) {

if(value

min=value;

}

});

return min;

}

}

var gm1= new GetMin();

gm1.add(5);

gm1.add(3);

gm1.add(2);

gm1.add(9);

console.log(gm1.min());

var gm2= new GetMin();

gm2.add("tom");

gm2.add("jerry");

gm2.add("jack");

gm2.add("sunny");

console.log(gm2.min());

/**

* 3 泛型函数接口

*/

interface ConfigFn{

(value:T):T;

}

var getData:ConfigFn=function(value:T):T{

return value;

}

getData('张三');

// getData(1243); //错误

// 类似 Map 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 {

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 implements BaseDao{

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){

}

}

精彩链接

 您阅读本篇文章共花了：