TypeScript（数据类型、函数、接口、泛型）
文章目录
提示：以下是本篇文章正文内容，下面案例可供参考
一、typeScript中的数据类型？
typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型
1-1 布尔类型（boolean） let flag: boolean = true;
1-2 数字类型（number） let num: number = 6;
1-3 字符串类型(string) let str: string = “str”;
1-4 数组类型（array）
var arr:number[]=[11,22,33];
var arr:Array=[11,22,33];
var arr3:any[]=[‘131214’,22,true];
1-5 元组类型（tuple）
属于数组的一种，例如数组中既可有string、又可有number
let arr:[number,string]=[123,‘this is ts’];
缺点是，必须指定的位置对用指定的类型，后面这种情况会用到任意类型 any
1-6 枚举类型（enum）
一般用于表示错误码，为了易读性强，单词可以用引号也可以不用，一般不写就是下表（从0开始，但是如果前一个有值，则从前一个的下表往后默认赋值）
enum statetype{
state1=1,
state2,
state3,
}
const str=statetype.state3
conssele.log(str) //3
1.7 任意类型（any）
场景：比如获取dom节点，ts中不加类型会提示dom节点是object，但是类型没object，给了也会报错，
这种情况就需要用到any类型。
1.8 null 和 undefined 其他（never类型）数据类型的子类型
一个元素可能是 number类型 可能是null 可能是undefined
var num:number | null | undefined;
1.9 void类型
typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
无返回值
function run():void{
console.log('run')
}
run();
二、typeScript中的函数
2.1 函数的定义
es5定义函数的方法1函数声明法2匿名函数
ts中定义函数的方法
代码如下（示例）：
//函数声明法
function handle():string{
return 'handle';
}
//匿名函数
var funName=function():number{
return 123;
}
ts中定义方法传参
function getInfo(name:string,age:number):string{
return `${name} --- ${age}`;
}
alert(getInfo('zhangsan',20));
//没有返回值的方法
function handle():void{
console.log('handle')
}
handle();
2.2 函数的可选参数
es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
function getInfo(name:string,age?:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
注意:可选参数必须配置到参数的最后面
2.3 函数的默认参数
es5里面没法设置默认参数，es6和ts中都可以设置默认参数
代码如下（示例）：
function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年龄保密`;
}
}
2.4 函数的剩余参数
es5里面没法设置默认参数，es6和ts中都可以设置默认参数
代码如下（示例）：
function sum(...result:number[]):number{
var sum=0;
for(var i=0;i<result.length;i++){
sum+=result[i];
}
return sum;
}
alert(sum(1,2,3,4,5,6)) ;
function sum(a:number,b:number,...result:number[]):number{
var sum=a+b;
for(var i=0;i<result.length;i++){
sum+=result[i];
}
return sum;
}
alert(sum(1,2,3,4,5,6)) ;
三、typeScript中的接口
接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中增加了更灵活的接口类型，包括属性、函数、可索引和类等。
1 函数类型接口
对方法传入的参数 以及返回值进行约束 批量约束
加密的函数类型接口
interface encrypt{
(key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
//模拟操作
return key+value;
}
console.log(md5('name','zhangsan'));
var sha1:encrypt=function(key:string,value:string):string{
//模拟操作
return key+'----'+value;
}
console.log(sha1('name','lisi'));
2 可索引接口
数组、对象的约束 （不常用）
//可索引接口 对数组的约束
interface UserArr{
[index:number]:string
}
var arr:UserArr=['aaa','bbb'];/*正确*/
console.log(arr[0]);
var arr:UserArr=[123,'bbb']; /*错误*/
console.log(arr[0]);
//可索引接口 对对象的约束
interface UserObj{
[index:string]:string
}
var arr:UserObj={name:'张三'};
3 类类型接口
对类的约束 和 抽象类抽象有点相似
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小黑');
d.eat();
//-----------------
class Cat implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(food:string){
console.log(this.name+'吃'+food);
}
}
var c=new Cat('小花');
c.eat('老鼠');
4 接口扩展
接口可以继承接口
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Web implements Person{
public name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'喜欢吃馒头')
}
work(){
console.log(this.name+'写代码');
}
}
var w=new Web('小李');
w.eat();
继承类实现接口
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Programmer{
public name:string;
constructor(name:string){
this.name=name;
}
coding(code:string){
console.log(this.name+code)
}
}
class Web extends Programmer implements Person{
constructor(name:string){
super(name)
}
eat(){
console.log(this.name+'喜欢吃馒头')
}
work(){
console.log(this.name+'写代码');
}
}
var w=new Web('小李');
// w.eat();
w.coding('写ts代码');
四、 typeScript中的泛型
泛型： 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)。可以支持不特定的数据类型 要求：传入的参数和返回的参数一直，T表示泛型，有时候要求类型检测，但是返回任意类型，这也是泛型，只不过不常用
————————————————
版权声明：本文为CSDN博主「有梦想必远方」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qzf_hainenggaima/article/details/103730898
1 泛型函数
function getData<T>(value:T):T{
return value;
}
getData<number>(123);
getData<string>('1214231');
2 泛型类
类的泛型， any没有类型校验
class MinClas<T>{
public list:T[]=[];
add(value:T):void{
this.list.push(value);
}
min():T{
var minNum=this.list[0];
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum=this.list[i];
}
}
return minNum;
}
}
var m1=new MinClas<number>(); /*实例化类 并且制定了类的T代表的类型是number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())
var m2=new MinClas<string>(); /*实例化类 并且制定了类的T代表的类型是string*/
m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())
3 泛型接口
函数类型接口
interface ConfigFn{
(value1:string,value2:string):string;
}
var setData:ConfigFn=function(value1:string,value2:string):string{
return value1+value2;
}
setData('name','张三');
定义泛型接口的两种方法
//1、泛型接口
interface ConfigFn{
<T>(value:T):T;
}
var getData:ConfigFn=function<T>(value:T):T{
return value;
}
getData<string>('张三');
getData<string>(1243); //错误
//---------------------
//2、泛型接口
interface ConfigFn<T>{
(value:T):T;
}
function getData<T>(value:T):T{
return value;
}
var myGetData:ConfigFn<string>=getData;
myGetData('20'); /*正确*/
// myGetData(20) //错误
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
