TSX语法

首先要知道 JSX，JSX 是一种可以在 JS 之中描述 HTML 的语法。
虽然转换的语义根据不同的实现而定，比如说在 Vue 和 React 中的就会不一样。
但它本身就是一种表达式。在编译后会转换为普通的JS对象。

而 TSX 与 JSX，就像是 TS 和 JS，搞好一个了，另一个也不难。

function Example () {
  const text = "容器"
  return (
    <div className='container' >
      {text}
    </div>
  )
}

export default Example

基本语法

首先，组件需要被导出使用。

// 都是可以的 区别只是在导入方式
export function File () {
  return (
    <div className='container'></div>
  )
}

export default File

接着，组件需要返回 HTML 元素。

function File () {
  return (
    // 需要返回 HTML
    <div className='container'></div>
  )
}

export default File

使用的是组件导入时的名称

import File from "./file"
function filePath () {
  return <File/>
}

使用 css

// 直接导入即可
import "./file.css"

function File () {
  return (
    // 需要返回 HTML
    <div className='container'></div>
  )
}

操作元素属性

export function File () {
  const click = () => console.log("点击")
  return (
    <div className='container' onClick={click}></div>
  )
}

// 有些时候会遇到提示不能有属性，可以使用对象解构赋予属性。
export function File () {
  const events = {
    onClick: () => console.log("点击")
  }
  return (
    <div className='container' {...events}></div>
  )
}

使用 props

// 这里使用了解构赋值只将 props 中的 file 取出使用
export function File ({ file }: { file: string }) {
  const events = {
    onClick: () => console.log(`点击文件:${file}`)
  }
  return (
    <div className='container' {...events}></div>
  )
}

// 传入 props
function filePath () {
  return <File file="新建文件.txt"/>
}

类型断言

在 TSX 中 <> 符号会被识别为 HTML 描述。因此会造成语法冲突，所以需要使用 as 进行类型断言。

const example = e as string

使用 TS

在 TSX 中，可以在 {} 内使用 TS 语法。
这里以变量为例子，在渲染元素时，会直接将变量值渲染出来。

function Example () {
  const text = "容器"
  return (
    <div className='container' >
      {text}
    </div>
  )
}

export default Example

循环列表

在 Vue 当中，使用的是 v-for 进行循环操作。
而在 TSX 中，是直接对数组进行操作。

const Example = () => {
  const list = [1, 2, 3, 4, 5, 6]
  return (
    <div className='container' >
      {
        list.map(v => <div className="items">{v}</div>)
      }
    </div>
  )
}

export default Example

分支判断

可以直接使用if判断或者三目运算符。

const Example = () => {
  const flag = true
  let content = <div className="items">3</div>
  if (flag) {
    content = <div className="items">4</div>
  }
  return (
    <div className='container' >
      {
        flag
          ? <div className="items">1</div>
          : <div className="items">2</div>
      }
      {
        // 如果不需要 else 也可以直接使用 &amp;&amp; 运算符
        flag &amp;&amp; content
      }
    </div>
  )
}

export default Example

在 Vue 中

vue 提供了 FunctionalComponent ，defineComponent 方便开发 TSX。
其中，DefineComponent 是一个包裹组件对象的函数，FunctionalComponent 则是函数类型。

interface Props {
  filetype: string
}

const FileIcon = defineComponent<Props>({
  setup: (props) => {
    return (<div class='container'>文件类型： {props.filetype}</div>)
  }
})

const FileIcon: FunctionalComponent<Props> = (props) => {
  return (<div class='container'>文件类型： { prios.filetype }</div>)
}