乔瑞雅·克林威尔

公告

风很轻

Learn More

标签

乔瑞雅·克林威尔

公告

风很轻

Learn More

标签

乔瑞雅·克林威尔

公告

风很轻

Learn More

标签

音乐播放器

分类

站点统计

文章

124

分类

24

标签

25

总字数

156,786

运行天数

0 天

最后活动

0 天前

分类

音乐播放器

217 字

1 分钟

TSX语法使用

2026-04-30

React

无标签

Alt text

TSX语法介绍#

定义是 JSX + TypeScript 的语法扩展，#

JSX 是 React 声明式 UI 语法，TSX 在此基础上增加类型约束

核心概念#

语法本质：类 HTML 标签语法，会被编译为React.createElement；
单一根节点：组件 TSX 必须包裹在一个根标签 / 空标签 <></> 内。
JS 嵌入：通过 { } 嵌入变量、表达式、逻辑；(别和Vue的模板渲染搞混了 {{}} )
类型约束：可给组件 props、状态、元素属性标注类型，杜绝类型错误；

Vue: 你(TSX)讲话挺有趣的,混哪里的啊

TSX的核心作用如下:#

视图与逻辑一体化
原生支持 TS 静态类型检查，提前拦截报错；

快速上手使用#

1
// 1. 定义props类型
2
type MsgProps = {
3
  text: string
4
}
5

6
// 2. TSX组件+类型约束
7
const Hello = (props: MsgProps) => {
8
  const count: number = 10
9
  // 3. {} 嵌入JS变量/表达式
10
  return (
11
    <div>
12
      <h1>{props.text}</h1>
13
      <p>数字：{count + 1}</p>
14
    </div>
15
  )
16
}
17

18
// 使用组件
19
export default function App() {
20
  return <Hello text="Hello TSX" />
21
}