[{"data":1,"prerenderedAt":337},["ShallowReactive",2],{"page-\u002Fvue\u002F文件格式":3},{"id":4,"title":5,"body":6,"description":330,"extension":331,"meta":332,"navigation":83,"path":333,"seo":334,"stem":335,"__hash__":336},"content\u002FVue\u002F文件格式.md","文件格式",{"type":7,"value":8,"toc":326},"minimark",[9,26,29,45,215,218,225,230,299,303,322],[10,11,12,13,17,18,21,22,25],"p",{},"​\tTSX 文件通常是 ",[14,15,16],"strong",{},"React 项目中的一种文件格式","，用于表示",[14,19,20],{},"含有 JSX（JavaScript XML）语法的 TypeScript 文件","。它允许你在 ",[14,23,24],{},"TypeScript 中书写组件的 JSX 代码","，并且提供了 TypeScript 的类型检查和其他功能。",[10,27,28],{},"简单来说，TSX 文件是 TypeScript 和 JSX 的结合体：",[30,31,32,39],"ul",{},[33,34,35,38],"li",{},[14,36,37],{},"TSX","：JavaScript XML（JSX）语法和 TypeScript 类型系统的结合。",[33,40,41,44],{},[14,42,43],{},"JSX","：一种 JavaScript 的语法扩展，使得在 JavaScript 代码中可以直接嵌入 HTML 结构。",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-tsx shiki shiki-themes github-light github-dark","import React from 'react';\n\ninterface MyComponentProps {\n  name: string;\n}\n\nconst MyComponent: React.FC\u003CMyComponentProps> = ({ name }) => {\n  return \u003Cdiv>Hello, {name}!\u003C\u002Fdiv>;\n};\n\nexport default MyComponent;\n\n","tsx","",[53,54,55,78,85,98,114,120,125,171,192,198,203],"code",{"__ignoreMap":51},[56,57,60,64,68,71,75],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"szBVR","import",[56,65,67],{"class":66},"sVt8B"," React ",[56,69,70],{"class":62},"from",[56,72,74],{"class":73},"sZZnC"," 'react'",[56,76,77],{"class":66},";\n",[56,79,81],{"class":58,"line":80},2,[56,82,84],{"emptyLinePlaceholder":83},true,"\n",[56,86,88,91,95],{"class":58,"line":87},3,[56,89,90],{"class":62},"interface",[56,92,94],{"class":93},"sScJk"," MyComponentProps",[56,96,97],{"class":66}," {\n",[56,99,101,105,108,112],{"class":58,"line":100},4,[56,102,104],{"class":103},"s4XuR","  name",[56,106,107],{"class":62},":",[56,109,111],{"class":110},"sj4cs"," string",[56,113,77],{"class":66},[56,115,117],{"class":58,"line":116},5,[56,118,119],{"class":66},"}\n",[56,121,123],{"class":58,"line":122},6,[56,124,84],{"emptyLinePlaceholder":83},[56,126,128,131,134,136,139,142,145,148,151,154,157,160,163,166,169],{"class":58,"line":127},7,[56,129,130],{"class":62},"const",[56,132,133],{"class":93}," MyComponent",[56,135,107],{"class":62},[56,137,138],{"class":93}," React",[56,140,141],{"class":66},".",[56,143,144],{"class":93},"FC",[56,146,147],{"class":66},"\u003C",[56,149,150],{"class":93},"MyComponentProps",[56,152,153],{"class":66},"> ",[56,155,156],{"class":62},"=",[56,158,159],{"class":66}," ({ ",[56,161,162],{"class":103},"name",[56,164,165],{"class":66}," }) ",[56,167,168],{"class":62},"=>",[56,170,97],{"class":66},[56,172,174,177,180,184,187,189],{"class":58,"line":173},8,[56,175,176],{"class":62},"  return",[56,178,179],{"class":66}," \u003C",[56,181,183],{"class":182},"s9eBZ","div",[56,185,186],{"class":66},">Hello, {name}!\u003C\u002F",[56,188,183],{"class":182},[56,190,191],{"class":66},">;\n",[56,193,195],{"class":58,"line":194},9,[56,196,197],{"class":66},"};\n",[56,199,201],{"class":58,"line":200},10,[56,202,84],{"emptyLinePlaceholder":83},[56,204,206,209,212],{"class":58,"line":205},11,[56,207,208],{"class":62},"export",[56,210,211],{"class":62}," default",[56,213,214],{"class":66}," MyComponent;\n",[10,216,217],{},"比如上面这种",[10,219,220,221,224],{},"​\tTypeScript 是 JavaScript 的一个超集，",[14,222,223],{},"它在 JavaScript 的基础上添加了静态类型检查和其他一些功能","。它被设计用来提高开发大型应用程序时的可维护性和可读性，尤其是当代码库变得复杂时，静态类型检查可以帮助开发者避免很多常见的错误。",[226,227,229],"h3",{"id":228},"typescript-的关键特点","TypeScript 的关键特点：",[231,232,233,251,263,275,287,293],"ol",{},[33,234,235,238,239,242,243],{},[14,236,237],{},"静态类型","： TypeScript 允许你",[14,240,241],{},"为变量、函数、对象等定义明确的类型","，这样在编译阶段就能发现一些潜在的错误。例如，你可以确保一个变量始终是数字类型，而不是意外变成字符串类型。",[46,244,249],{"className":245,"code":247,"language":248},[246],"language-text","let age: number = 25;\nage = \"hello\";  \u002F\u002F 这会抛出错误，因为 \"hello\" 不是一个数字\n","text",[53,250,247],{"__ignoreMap":51},[33,252,253,256,257],{},[14,254,255],{},"类型推断","： TypeScript 不仅仅要求你显式声明类型，编译器还会尝试根据上下文推断类型。例如，如果你给一个变量赋了一个值，TypeScript 会自动推断它的类型：",[46,258,261],{"className":259,"code":260,"language":248},[246],"\nlet count = 10;  \u002F\u002F TypeScript 会自动推断 count 的类型为 number\n",[53,262,260],{"__ignoreMap":51},[33,264,265,268,269],{},[14,266,267],{},"接口（Interfaces）和类型别名（Type Aliases）","： TypeScript 允许你定义接口和类型别名来描述对象的结构，确保代码的一致性和可维护性。",[46,270,273],{"className":271,"code":272,"language":248},[246],"interface Person {\n  name: string;\n  age: number;\n}\n\nconst user: Person = {\n  name: \"Alice\",\n  age: 30\n};\n",[53,274,272],{"__ignoreMap":51},[33,276,277,280,281],{},[14,278,279],{},"类和装饰器（Decorators）","： TypeScript 支持 ES6 类和一些高级特性，如装饰器，它们可以用来增强类的功能。",[46,282,285],{"className":283,"code":284,"language":248},[246],"class Person {\n  constructor(public name: string, public age: number) {}\n}\n",[53,286,284],{"__ignoreMap":51},[33,288,289,292],{},[14,290,291],{},"兼容性","： TypeScript 与现有的 JavaScript 代码兼容。任何合法的 JavaScript 代码都是合法的 TypeScript 代码。你可以在现有的 JavaScript 项目中逐步引入 TypeScript。",[33,294,295,298],{},[14,296,297],{},"增强的 IDE 支持","： 由于 TypeScript 是强类型语言，现代的 IDE 和编辑器（如 VSCode）可以提供更好的自动补全、跳转、重构等功能，提高开发效率。",[226,300,302],{"id":301},"typescript-和-javascript-的关系","TypeScript 和 JavaScript 的关系",[10,304,305,306,309,310,317,318,321],{},"​\tTypeScript ",[14,307,308],{},"编译成 JavaScript","，浏览器或 Node.js 只能执行 JavaScript 代码。TypeScript 代码需要经过编译（",[14,311,312,313,316],{},"使用 ",[53,314,315],{},"tsc"," 编译器","）转换成",[14,319,320],{},"标准的 JavaScript","。编译后的 JavaScript 可以在任何支持 JavaScript 的环境中运行。",[323,324,325],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":51,"searchDepth":80,"depth":80,"links":327},[328,329],{"id":228,"depth":87,"text":229},{"id":301,"depth":87,"text":302},"​\tTSX 文件通常是 React 项目中的一种文件格式，用于表示含有 JSX（JavaScript XML）语法的 TypeScript 文件。它允许你在 TypeScript 中书写组件的 JSX 代码，并且提供了 TypeScript 的类型检查和其他功能。","md",{},"\u002Fvue\u002F文件格式",{"description":330},"Vue\u002F文件格式","ZqgxSYd1VbB2ilW_2D5RGGmnoP8SCD2P-rfhYt2PLoc",1791042472389]