草庐IT

ts的接口和泛型的基本语法

chenxian123m 2023-03-28 原文

一、接口

 

1.接口定义

       接口是一种规范的定义，它定义行为和规范，在程序设计中接口起到限制和规范的作用。

2.接口的声明与使用

//声明对象类型接口

interface Person {

  name: string,

  age: number,

  say(): void

}



// 使用接口

let person: Person = {

  name: 'jack',

  age: 18,

  say() {

  }

}

 
  interface Config{
    type:string; //get post
    url:string;
    data?:string;//可选传入
    dataType:string;//json xml等
}

//原生js封装的ajax
function ajax(config:Config){

    var xhr=new XMLHttpRequest();
    xhr.open(config.type,config.url,true);

    if(config.data){
        xhr.send(config.data);
    }else{
        xhr.send();
    }

    xhr.onreadystatechange=function(){

        if(xhr.readyState==4 && xhr.status==200){
            console.log('请求成功');
            if(config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText));
            }else{
                console.log(xhr.responseText)
            }
        }
    }
}
ajax({
    type:'get',
    data:'name=zhangsan',
    url:'http://www.example.com/api', // api接口url
    dataType:'json'
})
 

3.函数类型接口

 // 对方法传入的参数以及返回值进行约束 批量约束
  interface encypt{
    (key:string, value:string):string;
  }
  
  var md5:encypt = function (key, value):string{
    return key + ' ' + value 
  }
  console.log(md5('李', '二狗'))
  
  var sha1:encypt = function(key, value):string{
    return key + '--' + value
  }
  console.log(sha1('dog', 'zi'))

 

 

 

4.接口（interface）和类型别名（type）的对比

// 相同点：都可以给对象指定类型

//定义接口

interface Person {

  name: string,

  age: number,

  say(): void

}

//类型别名

type Person= {

  name: string,

  age: number,

  say(): void

}



// 使用接口

let person: Person = {

  name: 'jack',

  age: 18,

  say() {

  }

}

// 不同点：1.接口只能为对象指定类型，接口可以通过同名来添加属性

          // 2.类型别名不仅可以指定类型，还可以为任意类型指定别名


interface Bat {

   name: string

  }

  interface Bat {

  age: number

  }

  function fgh(id: Bat) {

  

  }

  fgh({

  name: "dfsd",

  age: 12

  })

5.接口可选属性和只读性

interface FullName{

       readonly id：string
        firstName:string;
        lastName?:string;
}
 
function getName(name:FullName){
        console.log(name)
}
 
getName({
        firstName:'zhang'，
})

6.任意类型

interface UserInfo {

  name: string,

  age: number,

  sex?: string

  [propName: string]: any //一旦定义了任意属性,那么确定属性和可选属性类型都必须是任意属性类型的子类



}

const myInfo: UserInfo = {

  name: "jack",

  age: 18,

  test: "123123",

  test1: 23

}

7.接口的继承

// 使用extends关键字继承，实现接口的复用

interface Point2D {
  x: number;
  y: number
}

interface Point3D extends Point2D {
  z: number
}

let P: Point3D = {

  x: 1,

  y: 2,

  z: 3

}

8.通过implements来让类实现接口

interface Single {

  name: string,

  sing(): void

}

class Person implements Single {

  name = "tom"

  sing(): void {

    console.log("qwe");


  }

}

//Person 类实现接口Single，意味着Person类中必须提供Single接口中所用的方法和属性

二、泛型

1.泛型的理解

泛型是指在预先定义函数、接口或者类的时候，不预先指定数据的类型，而是在使用的时候指定，从而实现复用。

2.使用泛型变量来创建函数

// 使用泛型来创建一个函数
//格式： 函数名<泛型1,泛型2> (参数中可以使用泛型类型)：返回值也可以是泛型类型
// 但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

// K（Key）：表示对象中的键类型；
// V（Value）：表示对象中的值类型；
// E（Element）：表示元素类型。
 

//调用泛型函数

const num = id(10)

const str = id("as")

const ret = id(true)

//多个泛型变量

function identity <T, U>(value: T, message: U) : T {

console.log(message); return value;

}

console.log(identity(68, "Semlinker"));

3.泛型约束

// 如果我们直接对一个泛型参数取 length 属性, 会报错, 因为这个泛型根本就不知道它有这个属性

// 没有泛型约束

function fn<T>(value: T): T {

  console.log(value.length);//error

  return value

}

//通过extends关键字添加泛型约束，传入的参数必须有length属性

interface Ilength {

  length: number

}

function fn1<T extends Ilength>(value: T): T {

  console.log(value.length);

  return value

}

fn1("asdad")

fn1([1,4,5])

fn1(12323) //报错

4.泛型接口

// 接口可以配合泛型来使用，以增加其灵活性，增强复用性

// 定义

interface IdFunc<T> {

  id: (value: T) => T

  ids: () => T[]

}

// 使用

let obj: IdFunc<number> = { //使用时必须要加上具体的类型

  id(value) {

    return value

  },

  ids() {

    return [1, 4, 6]

  }

}

//函数中的使用
    (value:T):T
  }
  function getData<T>(value:T):T{
    return value
  }
  var myGetData:ConfigFn<string>=getData
  myGetData('abc')
 

5.泛型类

//创建泛型类
class GenericNumber<Numtype>{
  defaultValue: Numtype
  constructor(value: Numtype) {
    this.defaultValue = value
  }

}
// 使用泛型类
const myNum = new GenericNumber<number>(100)

6.泛型工具类型

   作用:TS内置了一些常用的工具类型，用来简化TS中的一些常见操作

 6.1 partail

// partial<T>的作用就是将某个类型中的属性全部变为可选项?
interface Props {
  id: string,
  children: number[]
}
type PartailProp = Partial<Props>

let obj1: PartailProp = {

}

6.2 Readonly

// Readonly<T>的作用将某个类型中的属性全部变为只读
interface Props {
  id: string,
  children: number[]
}
type PartailProp = Readonly<Props>

let obj1: PartailProp = {
  id: "213123",
  children: []
}
obj1.id="122" //报错

6.3 pick

// Pick<T, K>的作用是将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型
interface Todo {
  title: string,
  desc: string,
  time: string
}
type TodoPreview = Pick<Todo, 'title' | 'time'>;
const todo: TodoPreview = {
  title: '吃饭',
  time: '明天'
}

6.4 Record

// Record<K , T>的作用是将K中所有的属性转换为T类型
interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

6.5. Exclude

// Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉
type Prop = "a" | "b" | "c"
type T0 = Exclude<Prop, "a">; // "b" | "c"
const t: T0 = 'b';

 

的接口spannbspstyleJavaScript

有关ts的接口和泛型的基本语法的更多相关文章

  1. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  2. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  3. ruby - 覆盖相似的方法，更短的语法 - 2

    在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？ 最佳答案 如何使用别名？classExampleClassdefconfirmation_required?is_a

  4. ruby 语法糖 : dealing with nils - 2

    可能已经问过了，但我找不到它。这里有2个常见的情况(对我来说，在编程Rails时......)用ruby​​编写是令人沮丧的:"astring".match(/abc(.+)abc/)[1]在这种情况下，我得到一个错误，因为字符串不匹配，因此在nil上调用[]运算符。我想找到的是比以下内容更好的替代方法:temp="astring".match(/abc(.+)abc/);temp.nil??nil:temp[1]简而言之，如果不匹配，则简单地返回nil而不会出错第二种情况是这样的:var=something.very.long.and.tedious.to.writevar=some

  5. ruby - Ruby 语法糖有 "rules"吗？ - 2

    我正在学习Ruby的基础知识(刚刚开始)，我遇到了Hash.[]method.它被引入a=["foo",1,"bar",2]=>["foo",1,"bar",2]Hash[*a]=>{"foo"=>1,"bar"=>2}稍加思索，我发现Hash[*a]等同于Hash.[](*a)或Hash.[]*一个。我的问题是为什么会这样。是什么让您将*a放在方括号内，是否有某种规则可以在何时何地使用“it”？编辑:我的措辞似乎造成了一些困惑。我不是在问数组扩展。我明白了。我的问题基本上是:如果[]是方法名称，为什么可以将参数放在括号内？这看起来几乎——但不完全是——就像说如果你有一个方法Foo.d

  6. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  7. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  9. ruby - 如何让Ruby捕获线程中的语法错误 - 2

    我正在尝试使用ruby​​编写一个双线程客户端，一个线程从套接字读取数据并将其打印出来，另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误，这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然，如果我在线程外键入abc.putsef，代码将永远不会运行，因为Ruby将报告“undefinedvariableabc”。但是，如果它在一个线程内，则没有错误报告。我的问题是，如何让Ruby捕获这样的错误？或者至少，报告线程中的错误？

  10. ruby -::在 Ruby 语法中是什么意思？ - 2

    这个问题在这里已经有了答案:WhatisRuby'sdouble-colon`::`?(12个答案)关闭8年前。什么是::？@song||=::TwelveDaysSong.new

随机推荐