typescript 类型案例集合

75 阅读3分钟
let a: number;
//声明了一个变量a,同时指定他的类型为number
a = 10;
a = 100;
// a='123213'  报错
function sum(a: number, b: number) {
  return a + b;
}

//元组tupel

let x: [string, number];
x = ["你好", 123];
console.log(sum(1, 2));
console.log(x, x[0].length, x[1]);

//enum 枚举

enum Color {
  red = 100,
  green,
  yellow = "小红",
}
console.log(Color.yellow, "color", Color);

//any

let str: any = "我无敌什么类型都能用";
console.log((str = "23432432"), (str = 3324324), (str = null));

// void

function VoidDome(): void {
  console.log("我不会返回任何东西,只能展示");
}
VoidDome();

//Never

 function error(message:string):never{
    throw new Error(message);
 }
 console.log(error("我抛出了一个错误"));

//类型断言:我知道我再干什么别说了

let value: any = "我是帅哥";
let valueLength: number = (<string>value).length;
console.log(valueLength);

//非空断言: 好啦好啦我知道了,听我的可以的

function fun(value: string | undefined | null) {
  // let str:string=value  //报错
  let strTwo: string = value!;
  //告诉他浏览器知道啦都知道啦
}

let nameTwo!: string;

//类

class PerSon {
  name: string;
  age: number;
  sex: string;
  constructor(name: string, age: number, sex: string) {
    this.name = name;
    this.age = age;
    this.sex = sex;
  }
  eat(food: string): void {
    console.log(`出${food}很健康`);
  }
}
let p = new PerSon("tom", 19, "男");
console.log(p);
p.eat("苹果");
//sonOne
class Son extends PerSon {
  sonOne: any;
  constructor(name: string, age: number, sex: string, sonOne: any) {
    super(name, age, sex);
    this.sonOne = sonOne;
  }
  studay(foot: string): void {
    console.log(`${foot}`);
  }
}
let p1 = new Son("jarry", 19, "女", "son");
console.log(p1);
p1.eat("南瓜");
p1.studay("学习");

//剩余参数

let argga = (...arg: number[]): number => {
  let sum = 0;
  for (let i in arg) {
    sum = sum + arg[i];
  }
  return sum;
};
console.log(argga(1, 2, 3, 4, 5), "剩余参数");

//函数重载
//根据参数的类型不同或者数量不同提供不同的功能

// 1.先声明所有方法重载的定义,不包含方法的实现;
function funNo(a: number, b: number): number;
function funNo(a: string, b: string): string;

// 3.实现any类型的方法并通过参数类型(和返回类型)不同来实现重载;
function funNo(a: any, b: any): any {
  let result  
  if (typeof a == 'number' && typeof b == 'number') {
    result = a - b;
  }
  if (typeof a == 'string' &&  typeof b == 'string') {
    result = a + b;
  }
  return result;
}
console.log(funNo(2,1));
console.log(funNo("1+","2"));


//多态

class Animal{
  name:string;
  constructor(name:string){
    this.name=name;
  }
  eat(){

  }
}

//定义猫
class Car extends Animal{
  color:string;
  constructor(name:string,color:string){
    super(name);
    this.color=color
  }
  eat(): string {
    return `${this.color}${this.name}抓老鼠`
  }
}

//定义狗
class Dog extends Animal{
  age:number
  constructor(name:string,age:number){
    super(name)
    this.age=age;
  }
  eat(): string {
     return `${this.age}岁的${this.name}吃肉`
  }
}
let c1=new Car("虎斑","白灰")
console.log(c1.eat());

let c2 =new Dog("大黄",8)
console.log(c2.eat());

//抽象类和抽象方法

// 抽象类不能被实例化 // 抽象方法必须放到抽象类 //子类必须实现抽象类的抽象方法


abstract  class SonOne {
  name:string
  constructor( name:string){
    this.name=name
  }
  abstract one1():string
}
 
// let SonDom=new SonOne  
//报错:抽象类不能被实例化

class Bact extends SonOne{
  eat :string
  constructor(name:string ,eat:string ){
    super(name)
    this.eat=eat;
  }
  one1(): string {
    return `${this.name}${this.eat}`
  }
}

let k1=new Bact("小甜","吃")
console.log(k1.one1());

//接口

interface FullName {
  firName:string;
  listName:string;
  //定义了一个属性接口

}

let getFullName=(name:FullName):string=>{
   return name.firName +""+name.listName
}

console.log(getFullName({firName:"xiao",listName:"qi"}))


// 类接口

interface PaersOne{
  name:string;
  age:number;
  eat(foot:string):any
}
class Onec implements PaersOne{
 name:string ;
 age:number;
 dog:string ;
constructor(name:string,age:number,dog:string){
  this.name=name;
  this.age=age;
  this.dog=dog
}
eat(foot:string):any{
  alert (`${this.name}是一个${this.dog} 今年${this.age}岁了喜欢吃${foot}`)
}
}
let k2=new Onec("小黄",6,"金毛")
console.log(k2.eat("饭饭"));

//接口继承

interface King1 {
eat():any;
}
interface Parssa extends King1{
  work():any;
}

//泛型


//案例:
function geOne1 (value:string):string{
  return value
}
function geOne2 (value:number):number{
  return value
}
//以上代码中除了类型不同 其余功能一样我们就要用到泛型

function getFanx <T>(value:T):T{
  return value
}
//使用的时候:
console.log(getFanx<string>("小七"));
//简写
//ts引擎可以进行类型推断:根据参数类型推断出类型
console.log(getFanx("小七"));

function getFanx1 <T,U>(t:[T,U]):[U,T]{
      return  [t[1],t[0]]
}
console.log(getFanx1([100,"tom"]));

//约束泛型


interface Ilength{
  length:number;
}
function getValue<T extends Ilength>(arg:T):T {
  console.log(arg.length);
  return arg
}
console.log(getValue([1,2,3,4]));
console.log(getValue("affafadfdfds"));
console.log(getValue({name:"tom",length:100}));