-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
42 lines (38 loc) · 39.5 KB
/
index.html
File metadata and controls
42 lines (38 loc) · 39.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html><html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><title>ReScript 编程语言</title><meta charSet="utf-8"/><meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui" name="viewport"/><meta content="Fast, Simple, Fully Typed JavaScript from the Future" name="description"/><meta content="ReScript,rescriptlang,JavaScript,JS,TypeScript" name="keywords"/><link href="/static/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/><link href="/static/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/><link href="/static/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/><link href="/static/favicon/site.webmanifest" rel="manifest"/><meta content="ReScript Documentation" property="og:site_name"/><meta content="en_US" property="og:locale"/><meta content="ReScript 编程语言" property="og:title"/><meta content="Fast, Simple, Fully Typed JavaScript from the Future" property="og:description"/><meta content="/static/Art-3-rescript-launch.jpg" property="og:image"/><meta content="ReScript 编程语言" name="twitter:title"/><meta content="Fast, Simple, Fully Typed JavaScript from the Future" name="twitter:description"/><meta content="@reasonml" name="twitter:site"/><meta content="@ReasonAssoc" name="twitter:creator"/><meta content="image/jpeg" property="og:image:type"/><meta content="summary_large_image" name="twitter:card"/><link title="ReScript Blog" href="/blog/feed.xml" rel="alternate" type="application/rss+xml"/><meta name="next-head-count" content="21"/><link rel="preload" href="/_next/static/css/2b269719632b344a478b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/2b269719632b344a478b.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" as="script"/><link rel="preload" href="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/index-274f198089ce5c20088e.js" as="script"/></head><body><div id="__next"><div class="mt-4 xs:mt-16"><div class="text-gray-80 text-18"><nav class="fixed top-0 z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14" id="header" style="min-width:20rem"><div class="flex justify-between items-center h-full w-full max-w-1280"><div class="h-8 w-8 lg:h-10 lg:w-32"><a class="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold" href="/"><img class="lg:hidden" src="/static/nav-logo@2x.png"/><img class="hidden lg:block" src="/static/nav-logo-full@2x.png"/></a></div><div class="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative"><div class="flex ml-10 space-x-5 w-full max-w-320" style="max-width:26rem"><div class="relative"><div class="flex items-center"><button class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px border-none flex items-center hover:cursor-pointer " tabindex="0"><span class="">文档</span></button></div><div class="hidden fixed left-0 overflow-y-scroll overflow-x-hidden border-gray-80 border-gray-40 min-w-320 w-full h-full bg-white sm:overflow-y-auto sm:bg-transparent sm:h-auto sm:justify-center sm:rounded-bl-xl sm:rounded-br-xl sm:shadow" style="margin-top:1rem"><div class="w-full"><div class="relative w-full bg-white pb-32 min-h-full sm:pb-0 text-gray-60 text-14 rounded-bl-xl rounded-br-xl"><div class="flex justify-center"><div class="w-full sm:grid sm:grid-cols-3 max-w-1280"><div class="flex px-4 sm:justify-center border-r border-gray-10 pt-8 pb-10"><div><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">快速跳转</div><div><ul class="space-y-2 ml-2 mt-6"><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/introduction">概览</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/overview">语言特性</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/embed-raw-javascript">与 JS 互操作</a></li><li><span class="text-fire mr-2">-</span><a class="hover:text-fire-50" href="/docs-cn/manual/latest/build-overview">构建系统</a></li></ul></div></div></div><div class="flex px-4 sm:h-full sm:justify-center border-r border-gray-10 pt-8"><div class="w-full pb-16" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Documentation</div><div><div class="mt-6"><a class="" href="/docs-cn/manual/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_manual@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语言手册</span></div><div class="block text-14 text-gray-60 text-gray-60">所有的语言特性的参考指南</div></div></div></a><a class="" href="/docs/react/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_rescript_react@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>ReScript & React</span></div><div class="block text-14 text-gray-60 text-gray-60">ReactJS 的一等公民绑定</div></div></div></a><a class="" href="/docs/gentype/latest/introduction"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_gentype@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>GenType</span></div><div class="block text-14 text-gray-60 text-gray-60">无缝衔接 TypeScript & Flow 集成</div></div></div></a><a class="" href="https://github.com/reason-association/reanalyze" rel="noopener noreferrer"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><img style="width:2.1875rem" src="/static/ic_reanalyze@2x.png"/><div><div class="flex items-center text-16 font-medium text-gray-80"><span>Reanalyze</span><svg class="stroke-current inline-block ml-2 w-4 h-4" height="16" width="16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"></path></svg></div><div class="block text-14 text-gray-60 text-gray-60">死代码消除 & 停机分析</div></div></div></a></div></div></div></div><div class="flex px-4 sm:h-full sm:justify-center pb-12 pt-8 pb-10"><div class="w-full" style="max-width:19.625rem"><div class="text-12 font-medium text-gray-100 tracking-wide uppercase subpixel-antialiased">Exploration</div><div class="mt-6"><a class="" href="/syntax-lookup"><div class="hover:bg-gray-5 hover:shadow hover:-mx-8 hover:px-8 hover:cursor-pointer active:bg-gray-20 py-4 flex space-x-4 items-start rounded-xl"><div class="-mr-2 flex w-6 h-6 justify-center items-center"><img class="w-4 h-4" src="/static/ic_search.svg"/></div><div><div class="flex items-center text-16 font-medium text-gray-80"><span>语法查找</span></div><div class="block text-14 text-gray-60 text-gray-60">探索所有语法结构</div></div></div></a></div></div></div></div></div><img class="hidden xl:block absolute bottom-0 right-0" style="max-width:27.8rem" src="/static/illu_index_rescript@2x.png"/></div></div></div></div><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/docs-cn/manual/latest/api">API</a><a class="hidden xs:block no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></div><div class="hidden md:flex items-center"><div class="hidden sm:block mr-6"><div class=" bg-gray-100 border border-gray-70 hover:text-white hover:cursor-pointer flex justify-center p-2 px-3 rounded-lg"><input type="text" class="transition-all ease-in-out duration-150 text-white bg-gray-100 border-none focus:outline-none w-0" id="docsearch"/><svg class="stroke-current text-gray-60 w-5 h-5" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg></div></div><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" height="17.79" width="18.236" viewBox="0 0 18.236 17.79"><g transform="translate(8 -5.365)"><path d="M17.013,9.906a9.078,9.078,0,0,0-3.318-3.318A8.918,8.918,0,0,0,9.118,5.365,8.919,8.919,0,0,0,4.541,6.588,9.077,9.077,0,0,0,1.223,9.906,8.919,8.919,0,0,0,0,14.483a8.861,8.861,0,0,0,1.739,5.36,8.93,8.93,0,0,0,4.493,3.294.531.531,0,0,0,.475-.083.464.464,0,0,0,.154-.356q0-.036-.006-.641T6.85,21l-.273.047a3.484,3.484,0,0,1-.659.042,5.02,5.02,0,0,1-.825-.083,1.844,1.844,0,0,1-.8-.356,1.506,1.506,0,0,1-.522-.73l-.119-.273a2.966,2.966,0,0,0-.374-.605,1.432,1.432,0,0,0-.516-.451l-.083-.06a.871.871,0,0,1-.154-.143.651.651,0,0,1-.107-.166q-.036-.083.059-.137a.77.77,0,0,1,.344-.053l.237.035a1.733,1.733,0,0,1,.588.285,1.916,1.916,0,0,1,.576.617,2.093,2.093,0,0,0,.659.742,1.4,1.4,0,0,0,.778.255,3.376,3.376,0,0,0,.677-.059,2.362,2.362,0,0,0,.534-.178,1.924,1.924,0,0,1,.582-1.223,8.129,8.129,0,0,1-1.217-.214,4.845,4.845,0,0,1-1.116-.463,3.2,3.2,0,0,1-.956-.8,3.822,3.822,0,0,1-.623-1.247A5.928,5.928,0,0,1,3.3,14.007a3.463,3.463,0,0,1,.938-2.446A3.192,3.192,0,0,1,4.321,9.14a1.664,1.664,0,0,1,1.021.16,7.138,7.138,0,0,1,.991.457q.315.19.5.321a8.574,8.574,0,0,1,4.559,0l.451-.285a6.389,6.389,0,0,1,1.092-.522,1.556,1.556,0,0,1,.962-.13A3.161,3.161,0,0,1,14,11.562a3.463,3.463,0,0,1,.938,2.446,5.994,5.994,0,0,1-.243,1.787,3.674,3.674,0,0,1-.629,1.247,3.319,3.319,0,0,1-.962.789,4.855,4.855,0,0,1-1.116.463,8.121,8.121,0,0,1-1.217.214,2.115,2.115,0,0,1,.617,1.686v2.5a.473.473,0,0,0,.149.356.516.516,0,0,0,.469.083A8.929,8.929,0,0,0,16.5,19.842a8.863,8.863,0,0,0,1.739-5.36A8.926,8.926,0,0,0,17.013,9.906Z" transform="translate(-8 0)"></path></g></svg></a><a class="mr-5 no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://twitter.com/rescriptlang" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 15.53 12.71"><path d="M5.794,12.711a13.325,13.325,0,0,1-2.058-.163A9.659,9.659,0,0,1,.92,11.523L0,11.02l1-.328c1.089-.358,1.751-.58,2.571-.928A3.421,3.421,0,0,1,1.809,7.726l-.232-.7.19.029a3.456,3.456,0,0,1-.433-.534A3.276,3.276,0,0,1,.779,4.57l.044-.614L1.19,4.1a3.437,3.437,0,0,1-.333-.934A3.552,3.552,0,0,1,1.235.774l.32-.588L1.984.7A7.883,7.883,0,0,0,7.091,3.575a3.054,3.054,0,0,1,.185-1.623A3.038,3.038,0,0,1,8.511.536,3.71,3.71,0,0,1,10.664.008a3.439,3.439,0,0,1,2.114.872,7.1,7.1,0,0,0,.774-.258c.17-.064.362-.136.6-.219L15.042.1l-.579,1.652.119-.008L15.53,1.7l-.56.765c-.032.044-.04.056-.052.073-.045.068-.1.153-.87,1.179a1.448,1.448,0,0,0-.271.943,8.916,8.916,0,0,1-.487,3.586,6.346,6.346,0,0,1-1.7,2.524,7.524,7.524,0,0,1-3.566,1.724A10.979,10.979,0,0,1,5.794,12.711Zm0,0" transform="translate(0 -0.001)"></path></svg></a><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="https://forum.rescript-lang.org" rel="noopener noreferrer"><svg class="fill-current w-6 h-6 opacity-50 hover:opacity-100" viewBox="0 0 24 24"><path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 00-6.337 3.57 7.247 7.247 0 00-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 008.136-1.39 7.256 7.256 0 001.737-7.997 7.375 7.375 0 00-6.84-4.585h-.008z"></path></svg></a></div></div></div><button class="h-full px-4 xs:hidden flex items-center hover:text-white"><svg class="fill-current h-1 w-auto block text-gray-60" height="4" width="22" stroke="none" viewBox="0 0 22 4"><circle cx="2" cy="2" r="2"></circle><circle cx="2" cy="2" r="2" transform="translate(9)"></circle><circle cx="2" cy="2" r="2" transform="translate(18)"></circle></svg></button><div class="hidden sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between" style="min-width:20rem;top:4rem"><div class="border-gray-80 border-t"><ul><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><div class="opacity-75 hover:text-white hover:cursor-pointer bg-gray-80 flex items-center p-2 px-3 rounded"><svg class="stroke-current w-5 h-5 mr-3" height="19.203" width="19.203" viewBox="0 0 19.203 19.203"><g fill="none" stroke-linecap="round" stroke-width="2px" transform="translate(-2 -2)"><path d="M6.479,0A6.479,6.479,0,1,1,0,6.479,6.479,6.479,0,0,1,6.479,0Z" transform="translate(3 3)"></path><line stroke-linejoin="round" transform="translate(14.055 14.055)" x1="5.734" y1="5.734"></line></g></svg><input type="text" class="w-32 bg-gray-80 focus:outline-none " id="docsearch-mobile"/></div></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/try">工作台</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="no-underline block text-inherit hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px" href="/blog">Blog</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://twitter.com/rescriptlang" rel="noopener noreferrer">Twitter</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://github.com/reason-association/rescript-lang.org#rescript-langorg" rel="noopener noreferrer">GitHub</a></li><li class="font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"><a class="block hover:cursor-pointer hover:text-white text-gray-60" href="https://forum.rescript-lang.org" rel="noopener noreferrer">Forum</a></li></ul></div></div></nav><div class="hidden z-40 bg-gray-10-tr w-full h-full bottom-0" style="backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)"></div><div class="absolute top-16 w-full"><div class="relative overflow-hidden pb-32"><main class="mt-10 min-w-320 lg:align-center w-full"><div class=""><div class="w-full"><div class="mt-16 md:mt-32 lg:mt-40 mb-12"><section class="flex justify-center"><div class="max-w-1060 flex flex-col items-center px-5 sm:px-8 lg:box-content"><h1 class="hl-title text-center max-w-[53rem]">来自未来的快速、简单、<br/>完全类型化的 JavaScript</h1><h2 class="body-lg text-center text-gray-60 my-4 max-w-[40rem]">ReScript 是一门健壮的类型化语言，可以编译成高效易读的 JavaScript。<br/>它的编译工具链快如闪电，可轻松应对任意规模的代码库。</h2><div class="mt-4 mb-2"><a class="select-none hover:cursor-pointer transition-colors duration-200 body-button focus:outline-none bg-fire hover:bg-fire-70 text-white px-8 py-4 rounded-lg" role="button" href="/docs-cn/manual/latest/installation">快速开始</a></div></div></section></div><section class="relative mt-20 bg-gray-10"><div class="relative flex justify-center w-full"><div class="relative w-full pt-6 pb-8 sm:px-8 md:px-16 max-w-[1400px]"><div class="relative z-2 flex flex-col md:flex-row bg-gray-90 mx-auto sm:rounded-lg max-w-[1280px]"><div class="md:w-1/2"><div class="body-sm text-gray-40 text-center py-3 sm:rounded-t-lg md:rounded-tl-lg bg-gray-100">编写 ReScript 程序</div><pre class="text-14 px-8 pt-6 pb-12 whitespace-pre-wrap"><code class="hljs lang-res dark"><span class="hljs-keyword">module</span> <span class="hljs-module-identifier">Button</span> = {
<span class="hljs-attribute">@react.component</span>
<span class="hljs-keyword">let</span> make <span class="hljs-operator">=</span> (~count: int) <span class="hljs-function">=></span> <span class="hljs-literal">{</span>
<span class="hljs-keyword">let</span> times <span class="hljs-operator">=</span> <span class="hljs-keyword">switch</span> count <span class="hljs-literal">{</span>
| <span class="hljs-number">1</span> <span class="hljs-function">=></span> <span class="hljs-string">"once"</span>
| <span class="hljs-number">2</span> <span class="hljs-function">=></span> <span class="hljs-string">"twice"</span>
| n <span class="hljs-function">=></span> <span class="hljs-module-identifier">Belt</span>.<span class="hljs-module-identifier">Int</span>.toString(n) <span class="hljs-operator">++</span> <span class="hljs-string">" times"</span>
}
<span class="hljs-keyword">let</span> msg <span class="hljs-operator">=</span> <span class="hljs-string">"Click me "</span> <span class="hljs-operator">++</span> times
<button> <span class="hljs-literal">{</span>msg<span class="hljs-operator">-></span><span class="hljs-module-identifier">React</span>.string<span class="hljs-literal">}</span> </button>
<span class="hljs-literal">}</span>
<span class="hljs-literal">}</span></code></pre></div><div class="md:w-1/2 "><div class="body-sm text-gray-40 py-3 text-center md:border-l border-gray-80 bg-gray-100 sm:rounded-tr-lg">编译为 JavaScript</div><pre class="text-14 px-8 pt-6 pb-14 md:border-l border-gray-80 whitespace-pre-wrap"><code class="hljs lang-js dark"><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">"react"</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Playground$Button</span>(<span class="hljs-params">Props</span>) </span>{
<span class="hljs-keyword">var</span> count = Props.count;
<span class="hljs-keyword">var</span> times = count !== <span class="hljs-number">1</span> ? (
count !== <span class="hljs-number">2</span> ? <span class="hljs-built_in">String</span>(count) + <span class="hljs-string">" times"</span> : <span class="hljs-string">"twice"</span>
) : <span class="hljs-string">"once"</span>;
<span class="hljs-keyword">var</span> msg = <span class="hljs-string">"Click me "</span> + times;
<span class="hljs-keyword">return</span> React.createElement(<span class="hljs-string">"button"</span>, <span class="hljs-literal">undefined</span>, msg);
}
<span class="hljs-keyword">var</span> Button = {
<span class="hljs-attr">make</span>: Playground$Button
};
<span class="hljs-built_in">exports</span>.Button = Button;</code></pre></div></div><div><a class="captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60" href="/try?code=LYewJgrgNgpgBAIQgF2SAdnAvHA3gKDjgAEAnGAQwGNkA6KkYABwxnWULlmTmAoGt4OABQA-BhHYAuOAEt2ASmwA+PJyLc4yWcBgBnbHD0B3WcioALOBPZqiRAD5wAjCrgAiDFRjv1cJwBMbu7Ipt6+9v5wmFiqCDBQdACS7LRoAMrIpPIA5sLoSgDUhR5aOvoR9gC+fprAejmG7gDCULJU-Lzw7nDFZbp6+H4APABGKGjoqrj1OQC0ygBKlDS0elm5VXDDAPTjqBjKnDVVQA}">在工作台中编辑此代码</a></div><div class="hidden md:block"><img class="absolute z-0 left-0 top-0 -ml-10 -mt-6" style="height:24rem;width:24rem" src="/static/lp/grid.svg"/><img class="absolute z-0 left-0 top-0 -ml-10 mt-10" src="/static/lp/illu_left.png"/></div><div class="hidden md:block"><img class="absolute z-0 right-0 bottom-0 -mb-10 mt-24 -mr-10" style="height:24rem;width:24rem" src="/static/lp/grid.svg"/><img class="absolute z-3 right-0 bottom-0 -mr-2 mb-10" src="/static/lp/illu_right.png"/></div></div></div></section><section class="my-32 sm:px-4 sm:flex sm:justify-center"><div class="max-w-1060 flex flex-col w-full px-5 md:px-8 lg:px-8 lg:box-content "><div class="relative max-w-[28rem]"><p class="relative z-1 space-y-12 text-gray-80 font-semibold text-24 md:text-32 leading-2">在强大的类型化语言中<br/><span class="bg-fire-5 rounded-lg border border-fire-10 p-1 ">发挥 JavaScript 的全部力量</span><br/>而不必担心 `any` 类型。</p></div><div class="w-full mt-12 md:flex flex-col lg:flex-row md:justify-between "><p class="relative z-1 text-gray-80 font-semibold text-24 md:text-32 leading-2 max-w-[32rem]">ReScript 可用于交付并维护具有良好 UI 和 UX 的关键产品。</p><div class="mt-16 lg:mt-0 self-end" style="max-width:25rem"><div class="w-full max-w-[400px]"><h2 class="hl-3 lg:mt-12">快速安装</h2><div class="captions x text-gray-40 mb-2 mt-1">你可以通过 npm 或 yarn 将 ReScript 快速添加到现有的 JavaScript 代码库中：</div><div class="w-full space-y-2"><div class="flex justify-between items-center pl-6 pr-3 py-3 w-full bg-gray-10 border border-gray-20 rounded max-w-[25rem]"><span class="font-mono text-14 text-gray-70">npm install rescript</span><button class="relative h-10 w-10 flex justify-center items-center "><svg class="stroke-current w-6 h-6 mt-px text-gray-40 hover:cursor-pointer hover:text-gray-80" height="24" width="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="12" width="12" rx="2" stroke-linecap="round" stroke-width="2" x="8.00012" y="8.3175"></rect><path d="M16.0001 4.3175H7.00012C5.34327 4.3175 4.00012 5.66065 4.00012 7.3175V16.3175" stroke-linecap="square" stroke-width="2"></path></svg></button></div><div class="flex justify-between items-center pl-6 pr-3 py-3 w-full bg-gray-10 border border-gray-20 rounded max-w-[25rem]"><span class="font-mono text-14 text-gray-70">npx rescript init .</span><button class="relative h-10 w-10 flex justify-center items-center "><svg class="stroke-current w-6 h-6 mt-px text-gray-40 hover:cursor-pointer hover:text-gray-80" height="24" width="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="12" width="12" rx="2" stroke-linecap="round" stroke-width="2" x="8.00012" y="8.3175"></rect><path d="M16.0001 4.3175H7.00012C5.34327 4.3175 4.00012 5.66065 4.00012 7.3175V16.3175" stroke-linecap="square" stroke-width="2"></path></svg></button></div></div></div></div></div></div></section><section class="w-full bg-gray-90 overflow-hidden" style="min-height:37rem"><div class="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"><div class="relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full"><div class="max-w-[24rem] flex flex-col justify-center mb-6 lg:mb-2"><div class="hl-overline text-gray-20 mb-4">快速而简洁</div><h3 class="text-gray-10 mb-4 hl-2 font-semibold">Web 领域最快的构建系统</h3><div class="flex"><div class="text-gray-30 body-md pr-8"><p>ReScript 对任意规模代码库的反馈迭代速度和一致性十分关注。
你可以重构代码、拉取复杂的更改，或者随心所欲地切换到特性分支。
这里没有迟缓的 CI 构建、无效的缓存、错误的类型提示或消耗内存的语言服务器来拖累你。</p><p class="mt-6"><a class="select-none hover:cursor-pointer transition-colors duration-200 body-button focus:outline-none bg-sky hover:bg-sky-70 text-white px-4 py-2 captions rounded" role="button" href="/docs-cn/manual/latest/build-performance">了解更多</a></p></div></div></div><div class="relative mt-10 lg:mt-0"><div class="relative w-full z-2 bg-gray-90 rounded-lg flex md:mt-0 items-center justify-center rounded-lg" style="max-width:35rem;box-shadow:0px 4px 55px 0px rgba(230,72,79,0.10)"><video class="rounded-lg" controls="" poster="/static/lp/fast-build-preview.jpg"><source src="https://assets-17077.kxcdn.com/videos/fast-build-3.mp4" type="video/mp4"/></video></div><img class="absolute z-1 bottom-0 right-0 -mb-12 -mr-12" style="max-width:20rem" src="/static/lp/grid2.svg"/></div></div><svg class="md:hidden absolute z-1 w-full h-full bottom-0 left-0 text-fire-30" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="0,100 100,100 100,70 0,80"></polygon></svg><svg class="hidden md:block absolute z-1 w-full h-full right-0 top-0 text-fire-30" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="80,0 85,100 100,100 100,0"></polygon></svg></div><div class="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"><div class="relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full"><div class="max-w-[24rem] flex flex-col justify-center mb-6 lg:mb-2"><div class="hl-overline text-gray-20 mb-4">健壮的类型系统</div><h3 class="text-gray-10 mb-4 hl-2 font-semibold"><span class="text-transparent bg-clip-text bg-gradient-to-r from-berry-dark-50 to-fire-50">更好的类型</span></h3><div class="flex"><div class="text-gray-30 body-md pr-8">每一个 ReScript 应用程序都是完全类型化的，这能为您程序中的任何值提供可靠的类型信息。为了清晰和方便调试，我们优先考虑简单类型而非复杂类型。
ReScript 中没有 `any`，没有魔法类型，更没有意料之外的 “undefined”。
</div></div></div><div class="relative mt-10 lg:mt-0"><div class="relative w-full z-2 bg-gray-90 rounded-lg flex md:mt-0 items-center justify-center rounded-lg" style="max-width:35rem;box-shadow:0px 4px 55px 0px rgba(230,72,79,0.10)"><video class="rounded-lg" controls="" poster="/static/lp/type-better-preview.jpg"><source src="https://assets-17077.kxcdn.com/videos/type-better-3.mp4" type="video/mp4"/></video></div><img class="absolute z-1 bottom-0 right-0 -mb-12 -mr-12" style="max-width:20rem" src="/static/lp/grid2.svg"/></div></div><svg class="md:hidden absolute z-1 w-full h-full bottom-0 left-0 text-fire" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="0,100 100,100 100,78 0,72"></polygon></svg><svg class="hidden md:block absolute z-1 w-full h-full right-0 top-0 text-fire" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="85,0 80,100 100,100 100,0"></polygon></svg></div><div class="relative flex justify-center w-full bg-gray-90 px-5 sm:px-8 lg:px-14 overflow-hidden"><div class="relative max-w-1060 z-3 flex flex-wrap justify-center lg:justify-between pb-16 pt-20 md:pb-20 md:pt-32 lg:pb-40 md:space-x-4 w-full"><div class="max-w-[24rem] flex flex-col justify-center mb-6 lg:mb-2"><div class="hl-overline text-gray-20 mb-4">无缝集成</div><h3 class="text-gray-10 mb-4 hl-2 font-semibold"><span class="text-orange-dark">你所熟悉的 JS 生态</span><br/>就在你的指尖</h3><div class="flex"><div class="text-gray-30 body-md pr-8">你可以使用任何来自 JavaScript 的库，
将 ReScript 库导出到 JavaScript，以及自动生成 TypeScript 类型。
就像你从未离开过 JavaScript 最好的那一部分。</div></div></div><div class="relative mt-10 lg:mt-0"><div class="relative w-full z-2 bg-gray-90 rounded-lg flex md:mt-0 items-center justify-center rounded-lg" style="max-width:35rem;box-shadow:0px 4px 55px 0px rgba(230,72,79,0.10)"><video class="rounded-lg" controls="" poster="/static/lp/interop-example-preview.jpg"><source src="https://assets-17077.kxcdn.com/videos/interop-example-2.mp4" type="video/mp4"/></video></div><img class="absolute z-1 bottom-0 right-0 -mb-12 -mr-12" style="max-width:20rem" src="/static/lp/grid2.svg"/></div></div><svg class="md:hidden absolute z-1 w-full h-full bottom-0 left-0 text-fire-30" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="0,100 100,100 100,70 0,80"></polygon></svg><svg class="hidden md:block absolute z-1 w-full h-full right-0 top-0 text-fire-30" preserveAspectRatio="none" viewBox="0 0 100 100"><polygon class="fill-current" points="80,0 85,100 100,100 100,0"></polygon></svg></div></section><section class="flex justify-center w-full bg-gray-90 border-t border-gray-80
px-4 sm:px-8 lg:px-16 pt-24 pb-20 "><div class="max-w-1060 grid grid-cols-4 md:grid-cols-10 grid-rows-2 gap-8"><div class="pb-24 md:pb-32 row-span-2 row-start-1 col-start-1 col-span-4 md:col-span-6"><div class="w-full "><div class="w-full"><div><img class="w-full h-[25.9rem] object-cover rounded-lg" src="/static/lp/community-3.jpg"/></div></div><div class="flex space-x-2 mt-4"><div class="group flex items-center hover:cursor-pointer h-8 w-8"><div class="h-[1px] group-hover:bg-gray-40 w-full bg-gray-40"></div></div><div class="group flex items-center hover:cursor-pointer h-8 w-8"><div class="h-[1px] group-hover:bg-gray-40 w-full bg-gray-70"></div></div><div class="group flex items-center hover:cursor-pointer h-8 w-8"><div class="h-[1px] group-hover:bg-gray-40 w-full bg-gray-70"></div></div></div></div><h3 class="hl-3 text-gray-20 mt-4 mb-2">一个总是能帮你把事情搞定的程序员社区</h3><p class="body-md text-gray-40">没有坚实的社区基础，任何语言都不可能流行。
如果库的作者滥用类型，那么再强大的类型系统也没有用。
如果所有的库都很慢，那么性能优势就无法体现。
加入 ReScript 社区 —— 一群深切关注简单性、速度和实用性的公司和个人在这里等你。</p><div class="mt-6"><a class="select-none hover:cursor-pointer transition-colors duration-200 body-button focus:outline-none bg-sky hover:bg-sky-70 text-white px-4 py-2 captions rounded" role="button" href="https://forum.rescript-lang.org">加入我们的论坛</a></div></div><div class="col-span-4 lg:row-start-1"><img class="w-full rounded-lg border-2 border-turtle-dark" src="/static/lp/editor-tooling-1.jpg"/><h3 class="hl-3 text-gray-20 mt-6 mb-2">所有工具开箱即用</h3><p class="body-md text-gray-40">一个内置的格式化工具，内存友好的 VSCode 和 Vim 插件
和一个稳定且不需要太多额外配置的类型系统和编译器。
ReScript 为你带来了构建可靠的 JavaScript、Node 和 ReactJS 应用所需的所有工具。</p></div><div class="col-span-4 lg:row-start-2"><img class="w-full rounded-lg border-2 border-fire-30" src="/static/lp/easy-to-unadopt.jpg"/><h3 class="hl-3 text-gray-20 mt-6 mb-2">很容易适配 —— 没有任何限制</h3><p class="body-md text-gray-40">ReScript 在实现的时候就考虑了渐进式适配。
如果你想回到普通的 JavaScript，只需删除所有源文件并保留其干净的 JavaScript 编译结果即可。
你可以告诉您的同事，无论是否使用 ReScript，您的项目都会正常运作。</p></div></div></section><section class="mt-20"><h3 class="hl-1 text-gray-80 text-center max-w-576 mx-auto">信任我们的用户</h3><div class="flex flex-wrap mx-4 gap-8 justify-center items-center max-w-xl lg:mx-auto mt-16 "><div><a href="https://messenger.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/messenger.svg"/></a></div><div><a href="https://messenger.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/facebook.svg"/></a></div><div><a href="https://rohea.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/rohea.svg"/></a></div><div><a href="https://cca.io" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/cca-io.svg"/></a></div><div><a href="https://nomadic-labs.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/nomadic_labs.svg"/></a></div><div><a href="https://draftbit.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/draftbit.svg"/></a></div><div><a href="https://pupilfirst.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/pupilfirst.svg"/></a></div><div><a href="https://aivero.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/aivero.svg"/></a></div><div><a href="https://walnut.io" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/walnut.svg"/></a></div><div><a href="https://beop.io" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/beop.svg"/></a></div><div><a href="https://arizon.se" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/arizon.svg"/></a></div><div><a href="https://usestencil.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/stencil.svg"/></a></div><div><a href="https://portolab.com.br" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/portolab.svg"/></a></div><div><a href="https://tiny.cloud" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/tiny.svg"/></a></div><div><a href="https://kompl.io" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/komplio.svg"/></a></div><div><a href="https://www.ohne-makler.net" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/ohne-makler.svg"/></a></div><div><a href="https://wino.fr" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/wino.svg"/></a></div><div><a href="https://humaans.io" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/humaans.svg"/></a></div><div><a href="https://seamonsterstudios.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/seamonster-studios.svg"/></a></div><div><a href="https://camelohq.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/camelo.svg"/></a></div><div><a href="https://devitjobs.us" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/dev-it-jobs.svg"/></a></div><div><a href="https://sanjagh.pro" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/sanjagh.svg"/></a></div><div><a href="https://carla.se" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/carla.svg"/></a></div><div><a href="https://reka.market" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/reka_market.svg"/></a></div><div><a href="https://getbettercart.com" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/bettercart.svg"/></a></div><div><a href="https://greenlabs.co.kr/" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/greenlabs.svg"/></a></div><div><a href="https://maker.co/" rel="noopener noreferrer"><img class="hover:opacity-75 max-w-sm h-12" src="/static/lp/maker.svg"/></a></div></div><div class="mt-10 max-w-320 overflow-hidden opacity-50" style="max-height:6rem"><img class="w-full h-full" src="/static/lp/grid.svg"/></div></section><section class="bg-gray-100 w-full pb-40 pt-20 "><div class="mb-10 max-w-1280 flex flex-col justify-center items-center mx-5 md:mx-8 lg:mx-auto"><div class="body-sm md:body-lg text-gray-40 w-40 mb-4 xs:w-auto text-center">快来尝试一下 ReScript 吧！</div><h2 class="hl-1 text-gray-20 text-center">精选资源</h2></div><div class="px-5 md:px-8 max-w-1280 mx-auto my-20"><div class="body-lg text-center z-2 relative text-gray-40 max-w-[12rem] mx-auto bg-gray-100">指引和文档</div><hr class="bg-gray-80 h-px border-0 relative top-[-12px]"/></div><div><div class="grid grid-flow-col grid-cols-2 grid-rows-2 lg:grid-cols-4 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto"><a class="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]" href="/docs-cn/manual/latest/introduction"><img class="h-[53px] absolute mt-6" src="/static/ic_manual@2x.png"/><h5 class="text-gray-10 hl-4 mt-32 h-12">语言手册</h5><div class="text-gray-40 mt-2 mb-8 body-sm">查阅基础知识：所有的语言特性的参考指南</div></a><a class="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]" href="/docs/react/latest/introduction"><img class="h-[53px] absolute mt-6" src="/static/ic_rescript_react@2x.png"/><h5 class="text-gray-10 hl-4 mt-32 h-12">ReScript + React</h5><div class="text-gray-40 mt-2 mb-8 body-sm">全世界的用户都在使用 ReactJS 的一等公民绑定。</div></a><a class="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]" href="/docs-cn/manual/latest/installation#%E9%9B%86%E6%88%90%E5%88%B0%E5%B7%B2%E6%9C%89%E7%9A%84-js-%E9%A1%B9%E7%9B%AE%E4%B8%AD"><img class="h-[53px] absolute mt-6" src="/static/ic_manual@2x.png"/><h5 class="text-gray-10 hl-4 mt-32 h-12">渐进式适配 ReScript</h5><div class="text-gray-40 mt-2 mb-8 body-sm">了解如何在你当前的项目中开始使用 ReScript。买之前先试试！</div></a><a class="hover:bg-gray-80 bg-gray-90 px-4 md:px-8 pb-0 md:pb-8 relative rounded-xl md:min-w-[196px]" href="/docs/gentype/latest/introduction"><img class="h-[53px] absolute mt-6" src="/static/ic_gentype@2x.png"/><h5 class="text-gray-10 hl-4 mt-32 h-12">集成到 TypeScript</h5><div class="text-gray-40 mt-2 mb-8 body-sm">了解如何在你现有的 TypeScript 代码库中集成 ReScript。</div></a></div><div class="px-5 md:px-8 max-w-1280 mx-auto my-20"><div class="body-lg text-center z-2 relative text-gray-40 w-[8rem] mx-auto bg-gray-100">项目模板</div><hr class="bg-gray-80 h-px border-0 relative top-[-12px]"/></div><div class="grid grid-flow-col grid-cols-2 lg:grid-cols-3 lg:grid-rows-1 gap-2 md:gap-4 lg:gap-8 max-w-1280 px-5 md:px-8 mx-auto"><a class="hover:bg-gray-80 bg-gray-90 px-5 pb-8 relative rounded-xl min-w-[200px]" href="https://github.com/ryyppy/rescript-nextjs-template"><img class="h-12 absolute mt-5" src="/static/nextjs_starter_logo.svg"/><h5 class="text-gray-10 hl-4 mt-32 h-12"><div>ReScript & </div><div class="text-gray-40">NextJS</div></h5><div class="text-gray-40 mt-4 body-sm">可以从我们的 NextJS 启动模板开始。</div></a></div></div></section></div></div></main></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"azkpStclBMlbyu6nwP73h","runtimeConfig":{},"nextExport":true,"autoExport":true,"isFallback":false}</script><script nomodule="" src="/_next/static/chunks/polyfills-9def993fe817cc057038.js"></script><script src="/_next/static/chunks/webpack-97d202641b4e050bd22c.js" async=""></script><script src="/_next/static/chunks/framework-23118dcc1b886e5b49be.js" async=""></script><script src="/_next/static/chunks/main-82e7c4d3c08582bd58e0.js" async=""></script><script src="/_next/static/chunks/pages/_app-9e9d9ab67b4ceb7ec93b.js" async=""></script><script src="/_next/static/chunks/pages/index-274f198089ce5c20088e.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_buildManifest.js" async=""></script><script src="/_next/static/azkpStclBMlbyu6nwP73h/_ssgManifest.js" async=""></script><script async="" defer="" src="https://scripts.simpleanalyticscdn.com/latest.js"></script><noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt=""/></noscript></body></html>