react + typescript 学习
<blockquote><p>react，前端三大框架之一，也是非常受开发者追捧的一门技术。而 typescript 是 javascript 的超集，主要特点是对 类型 的检查。二者的结合必然是趋势，不，已经是趋势了。react 文档、typescript 文档都看过，例子也敲过了，对此也都有了一定的理解，但是把二者很好的结合在一起，还是遇到了一些问题。纯粹记录一些，当然也希望有优秀资源的，提供一下，分享一下。提前道谢了~</p>
</blockquote>
<h3 id="学习曲线">学习曲线</h3>
<p>首先，想到的是到 官网，看相关文档，会系统些。</p>
<ul>
<li>
<p>typescript 中文网 jsx</p>
</li>
<li>
<p>typescript 中文网 React & Webpack</p>
<p>看后，也实践了一遍，也算是入手练习了，但离实际应用还很远呢。</p>
</li>
<li>
<p>create-react-app + typescript</p>
<p>对应的英文原版是 microsoft/TypeScript-React-Starter。</p>
<p>中文版有点落后，英文版的比较新。</p>
<p>最重要的一点是：很多根据中文网搭建练习时踩坑点的解决方案都是在其 issure 中找到的。</p>
<p><strong>tslint相关</strong></p>
<p>在 tslint.json 中加入</p>
<ul>
<li>interface name must start with a capitalized I</li>
</ul>
<p>接口名称必须以大写的I开头</p>
<p>microsoft/TypeScript-React-Starter</p>
<pre><code class="language-js">"rules": {
"interface-name":
}
</code></pre>
<ul>
<li>Import sources within a group must be alphabetized.</li>
</ul>
<p>组内的导入源必须按字母顺序排列。</p>
<pre><code class="language-js">"rules": {
"ordered-imports": false
}
</code></pre>
<ul>
<li>The key 'onDecrement' is not sorted alphabetically</li>
</ul>
<p>键没有按字母顺序排序</p>
<pre><code class="language-js">"rules": {
"object-literal-sort-keys": false
}
</code></pre>
<p><strong>其他</strong></p>
<ul>
<li>import { connect, Dispatch } from 'react-redux'; 产生错误</li>
</ul>
<p>has no exported member 'Dispatch'.</p>
<pre><code class="language-js">import { connect } from 'react-redux';
import { Dispatch } from 'redux';
</code></pre>
<ul>
<li>Redux createStore <storestate>产生错误：预期有4个类型参数，但得到1</storestate></li>
</ul>
<p>Expected 4 type arguments, but got 1.</p>
<p>使用redux 4.0.1时使用了redux 3.7.2</p>
<pre><code>npm install redux@3.7.2 --save
</code></pre>
</li>
</ul>
<h3 id="文章学习">文章学习</h3>
<p>看了很多文章，觉得不错的，记录一些，对整体掌握都很有帮助。</p>
<ul>
<li>优雅的在 react 中使用 TypeScript</li>
<li>可能是你需要的react + typescript 50条规范和经验</li>
<li>TypeScript 在 React 中使用总结</li>
<li>TypeScript 2.8下的终极React组件模式</li>
<li>Notes on TypeScript: React Hooks
<ul>
<li>中文版</li>
</ul>
</li>
</ul>
<p>不论看多少文章，还是要真正理解了，多实践，方能真正掌握。</p><br><br>
来源：https://www.cnblogs.com/EnSnail/p/11000004.html
頁:
[1]