写篇文章让自己会写Ts——（3）Ts使用入中门

银雨星空
992 阅读3分钟

本文围绕接口进行讲解，这是ts在实际开发中十分重要的应用，接口的概念不只运用于服务端中。同时开头我们讲解一些 文件类型tsx 的特点。

一、tsx文件类型

tsx是ts和jsx的结合。

  • jsx是react中用来描述界面的语法拓展，可以书写在js文件中：
    const element = <h1>Hello, world!</h1>;

我们设计jsx文件来更好识别jsx语法和格式化。所以jsx通常是用来单独封装组件。

image.png

结合了ts的静态语法标准，推出了react所使用的特殊文件格式tsx，使用ts语法来写jsx。

image.png

我们使用tsx进行react的开发时需要定义接口来规范函数的参数。下面将要讲解接口相关的知识。

二、ts的接口

interface：接口、界面，ts中是被用来定义接口的关键字。

接口多用于定义函数的参数类型，当然不止于此。

比如：

interface test { name: string }
const tests: test[] = [{ name: 'haha' }, { name: 'hehhe' }]

接口

我们在ts中定义接口，如下：

interface ShowName {
    name: string
    age: number
}

总结格式也是十分容易理解：

interface关键字 接口名字 {
    属性A名字:类型a，
    属性B名字:类型b
}

然后我们进行使用：

function handleShow(show: ShowName): void {
    console.log('ssss')
}

似乎于原来的ts静态类型写法没有什么区别。

接口与对象\接口与type

我们发现这和定义一个具体的对象类型是一致的：

const ShowNameObj: {
    name: string,
    age: number,
} = { name: 'saf', age: 3 }

而且进一步结合type又发现：

type ShowNameType = {
    name: string,
    age: number,
}

const ShowNameObj: ShowNameType = { name: 'saf', age: 3 }

于是我们会想有什么不同。

无论是type还是interface都会在编译后被丢弃。

不同点：

  • 除了等号问题上，我们发现interface只能定义对象和函数。type则是涵盖所有类型。
interface func {
    (str: string): void
}
let fn:func = function(){}
fn('')
  • interface支持继承，type只支持合并。前者不允许重复定义属性，后者面对同一属性不同类型会转变为never类型。

image.png

image.png

  • 重复定义，interface允许重复定义，但是type不允许，会报错。
interface A {
    S1: number
}
interface A {
    S2: string
}

let a: A = {
    S1: 123,
    S2: '123'
}
  • type可以通过typeof来获取变量的类型。
  • type可以实现类型映射。

三、ts的可选和只读

option bags

中文意思就是可选项，是ts中常用的语法之一，将静态特性变化动态。

interface ShowName {
    name: string
    age?: number
}
type ShowNameType = {
    name?: string
    age: number
}

通过在:号前加?号来实现动态效果：可以省略这个属性而不会报错，即可有可无。不同于已经定义且没加?号的属性（必须要有该属性）和没有定义的其他属性（必定不能有该属性）。

function handleShow(show: ShowNameType): void {
    console.log('ssss')
}
handleShow({ age: 2 })
handleShow({ name: 'ss', age: 2})

我们称这种模式为option bags。

只读readonly

顾名思义十分容易理解。一个关键字帮助我们将原本定义好的属性再加上只读的限制。

没有花里胡哨的技巧，我们只需要将readonl关键字放在需要只读限制的属性名前即可：

type ShowNameType = {
    readonly name: string,
    age: number,
}

然后我们试着去修改就会报错，无论是作为接口，在函数修改接口定义的某个属性还是type定义对象都是。我们很容就发现这是在对象属性上实现了类似于const的效果。

上述多个特性type和interface都是一起支持的。

字节电商前端持续招人,帮忙内推,简历请发1826235370@qq.com或微信15884204478(上海北京杭州多地)

avatar
文章
阅读
粉丝