taro フレームワークの紹介とオープニング紹介
Taro は Jingdong Ao-Convex Lab によって立ち上げられたフレームワークであり、その目的は多段階の混沌とした状況を解決することであり、現時点では比較的新しいフレームワークでもあります。
1つのモデルと1つのコードに従って開発すると、開発が完了すると、プロジェクトはどの端末でも表示できるようになり、考えると非常にクールな体験です. 太郎の利点は何ですか、下の写真をご覧ください。
taro が現在サポートしている端末
1. WeChat アプレット
2、H5 モバイル Web ページ
3、Baidu アプレット
4、Alipay アプレット
5、クイック アプリ
6、reactnative
7、ByteDance アプレット
8、qq ライト アプリケーション
taro は現在、最も多くのアプレットをサポートするフロント エンドです フレームワークの 1 つが示していますネイティブアプリに匹敵するアプリケーションを簡単に生成できること。したがって、会社のアプリケーションがネットワーク全体を促進し、ほとんどのトラフィックの入り口を占有したい場合は、taro を使用しても問題ありません。
もちろん、uni-appにも同様の機能、マルチターミナルアプリケーションを生成する機能があります。また、デバッグに非常に便利な専用のエディターもあります. 以下に、taro と uni-app およびその他のフレームワークの比較表を示します: 
Taro の強みと、フロントエンド テクノロジにおける Taro フレームワークの割合がますます高くなることがわかります。そして、統一されたフレームワーク、統一された API、統一されたコード仕様、および統一されたコード構造を使用することは、何という素晴らしい開発経験です。
すべての主流プラットフォームのレイアウトを 1 回の開発で完了することができ、人件費と時間のコストを最小限に抑え、1 億を節約したように感じます。
次は一緒に太郎の魔法のヴェールをお披露目しましょう。
太郎の環境構築とHello World
事前知識
このフロントエンド フレームワークを学習するには、HTML、CSS、および JavaScript の基本的な知識が必要です
. 少なくとも、簡単な静的ページを作成する方法
と MVVM フレームワークを理解する必要があります.
React フレームワークは、ES6 関連の構文を理解するのが最善です。現在普及しているフレームワークと 2020 年のフロントエンド開発では、ES6 を使用してコードを標準化するため、プロジェクトの開発と管理がより便利になります。
Taro コンパイル ツールの紹介
Taro は、React の文法仕様に準拠したマルチターミナル開発ソリューションのセットです. Taro を使用すると、一連のコードを記述するだけで、Taro のコンパイル ツールを使用してソース コードを個別にコンパイルし、異なるターミナルで再利用することができます ( WeChat アプレット、H5、RN など) コードを実行します。
ここにある Taro コンパイル ツールは非常に重要です。これが図です。
Taro 開発環境のインストール
1. まずは @tarojs/cli (足場ツール) をインストールします。これは開発ツールも教えてくれます。
npm または yarn を使用してグローバルにインストールできます。コマンドは次のとおりです。
npm のインストール方法
npm install -g @tarojs/cli
糸の取り付け方
yarn global add @tarojs/cli
コマンドラインを開いた後、上記のコマンドを入力します。
2. インストールが完了したら、scaffolding を使用してプロジェクトを作成できます。コマンドは次のとおりです。
taro init taro-dome
ここに小さな穴があります.npm を使用して scaffolding をインストールすると、失敗する可能性が高くなります.これらの失敗は、主に国内のネットワーク環境の制限によるものです. 2 つの解決策があります。1 つ目は「fangqiang」をインストールする方法、2 つ目は糸を使用して暗転送を実行する方法です。ここでは糸を使用します。
ハローワールドプログラム
上記のプロジェクトの作成により、プロジェクトが確立され、プロジェクトが実行されます。コマンドは次のとおりです。
cd taro-dome
npm run dev:h5
ここでは h5 モードが実行されています.アプレットを実行する場合は、package.json のスクリプト設定に従って、対応する実行モードを知ることができます。
Taro がアプレット コードを生成し、プレビューします。
Taro はマルチターミナル コードを生成できます. 前のセクションでは、h5 表示のみが生成されました. 今回は、最初にアプレット コードを生成し、それをプレビューします.
WeChat アプレットのコードを生成する
npm run dev:weapp
コマンドを入力すると、taro コンパイラが自動的にアプレット コードを生成し、dist ディレクトリに配置します。 app.js、app.json およびアプリ
。 wxss これらは WeChat アプレットに対応するファイルです. WeChat アプレットを開発したことのある人は非常になじみがあるはずです. これが Taro の強みであり, Taro フレームワークの開発者は webpack 開発の達人でなければなりません. コンパイルして生成する に対応します.シェルネストではなく、端末コード。
WeChat 開発者ツールでプロジェクトをプレビューする
このファイルは taro によってコンパイルされるため、WeChat 開発者ツールの dist ディレクトリを変更しないように注意してください;
taro で元のプロジェクトを変更する場合は、変更した内容をコンパイルして dist ファイルにコンパイルします。
taroのディレクトリ構造
カタログを導入する前に間違いなく疑問があります. Taro は多端末統合フレームワークです. 以前は編集ツールを使用して H5 と WeChat アプレットのコードを生成しました. では、他の Alipay アプレット、Baidu アプレットなどはどのように生成されますか? ?
これらの回答は、プロジェクトの package.json ファイルのスクリプト セクションにあります。
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
}
dev を例に挙げて dev を説明しましょう: weapp の背後にあるプラットフォームはどれかWechatアプレット
h5モバイル
Web はパブリック アカウントやブラウザなどに使用されます。 app rn React Native 、これらのタイプの実行は WeChat アプレットの実行と同じです。以下を対応するモードに変更するだけです
npm run dev:weapp
或
yarn dev:weapp
taro のプロジェクト ディレクトリ構造を紹介しましょう
dist ディレクトリ
. このディレクトリは、上記で生成された WeChat アプレット コードで既に確認されています. プレビューすると自動的に生成されます. プレビューするたびに、プレビュー ターミナルに応じて異なるファイルにコンパイルされます. ,上記のコードは、コンパイルするたびに削除されます。新しい
構成ディレクトリ
を再生成します。これはプロジェクトの構成の一部です。これらの構成は今後詳細に調査されますが、まだ理解されていません。最初に構成することはできません。そうしないと、プロジェクトが必要とする依存関係に影響を与えます。
node_modulesプロジェクトを実行します, これは npm install を使用します. インストールされたパッケージは通常src ディレクトリであり,
変更する必要はありません.これは最も重要です. これは私たちのプロジェクトのソースコードディレクトリであり, 開発コードはそれ** **
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── pages 页面文件目录
| | ├── index index 页面目录
| | | ├── index.js index 页面逻辑
| | | └── index.css index 页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
└── package.json
## taro はフックの新機能を使用します ### 反応フックの長所と短所フックを使用して書き込みを行いたいので、reacthook の長所と短所、なぜフックを使用するのかを理解する必要があります。#### React Hooks の利点 · コードの再利用が容易
· コード スタイルの更新 ·
コード サイズが小さい
· 無駄な状態と関数を見つけやすい
· コンポーネントの分割が容易 #### React Hooks の欠点 · 状態が同期ではない
· 副作用アクティブからリアクティブへのコード
の変更 #### React Hooks の一般的な問題を回避する方法 of-sync 状態の場合、パラメータを関数に手動で渡すことを検討できます。```css // showCount のカウントは親スコープから取得されます const [count,setCount] = useState(xxx); function showCount(){ console.log(count) }
// showCount のカウントはパラメータ
const [count,setCount] = useState(xxx);
function showCount©{ console.log© }から取得されます
·一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告<br />·使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性，这样可以避免“引用是旧”的这个烦人的问题，但这种方式hack味道浓郁。
### 使用Hooks来改写Index组件
在src/pages/index/index.jsx文件：
```css
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
export default class Index extends Component {
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
config = {
navigationBarTitleText: '首页'
}
render () {
return (
<View className='index'>
<Text>Hello world!</Text>
</View>
)
}
}
修改成hooks方式：
import Taro, {
useState } from '@tarojs/taro'
import {
View, Text } from '@tarojs/components'
import './index.less'
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{
userName}</Text>
</View>
)
}
export default Index
taro で渡されるコンポーネント値
Taro を使用する利点の 1 つは、コンポーネント化された方法でプログラムできることです。そのため、Taro でコンポーネントを作成することは日常的な作業です。
次に、自己コンポーネントを作成してから、コンポーネントの値を渡します. Taro のコンポーネントの値の転送は、React のように props を使用するので、React のコンポーネントの値の転送に慣れている場合は、ここが理解しやすいと思います.
Taro プロジェクトの src/pages/index フォルダーの下に Child コンポーネントを作成します。
child.jsx コンポーネント
import {
View, Text } from '@tarojs/components'
function Child(){
return (
<View><Text>我是子组件</Text></View>
)
}
然后在Index组件中引入，这里给出全部代码方便学习
import Taro, {
useState } from '@tarojs/taro'
import {
View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{
userName}</Text>
<Child></Child>
</View>
)
}
export default Index
親コンポーネントから子コンポーネントに値を渡す
上記のように, Taro の値の受け渡しは React の場合と同じです. 親コンポーネントは props を介して子コンポーネントに値を渡します. これは
Taro でも可能です. ここで index.jsx コードを修正して userName を子コンポーネント。
import Taro, {
useState } from '@tarojs/taro'
import {
View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"
function Index(){
const [userName] = useState('Hello Taro!')
return (
<View>
<Text>{
userName}</Text>
<Child userInfo={
userName} ></Child>
</View>
)
}
export default Index
渡された後、サブコンポーネントは props パラメーターを受け取る前に props パラメーターを増やす必要があります。
import {
View, Text } from '@tarojs/components'
function Child(props){
return (
<View>
<Text>我是子组件</Text>
<View><Text>接收来自父组件的值:{
props.userInfo}</Text></View>
</View>
)
}
export default Child
这个组件间的传值非常的简单，当我们会用组件的形式编写页面和组件时，你就可以作一些小东西了。
しかし、ページとコンポーネントをフォルダーに入れ、すべてが jsx 拡張子を使用していることがわかります。
これらのコンポーネントとページを区別する方法は?
実際、それは独自のルーティングによって区別され、ルーティングが設定されている限りページであり、設定されていない場合はデフォルトでコンポーネントです。
以下の Taro でのルーティングを見てみましょう。
Taro ルーティングの設定と紹介
Taro のルーティングは React のルーティングとは異なり、app.jsx のページを通じて構成され、配列の最初の位置に構成されている人は誰でも、デフォルトで開かれるホームページになります。
最初にルーティングを構成する
新しいページを作成する
/src/pages/ フォルダーの下に /blog フォルダーを作成し、フォルダーの下に blog.jsx ファイルを作成して、次のコードを記述します。
import {
View , Text} from '@tarojs/components'
function Blog(){
return (
<View>
<Text>Blog Page</Text>
</View>
)
}
export default Blog
ルーティング構成
ページを作成したら、/src/app.jsx に移動して、ページ配列にコードを追加できます。
pages: [
'pages/blog/blog',
'pages/index/index'
],
ここで注意すべきことは、ブログ ページを導入するために import を使用する必要がないということです。Taro が自動的に行ってくれます。変更が完了したら、ブラウザーで確認できます。既定のページがブログ ページになっていることがわかります。
ページ間をジャンプ
ページへのジャンプ方法
Taro は 6 つの関連するナビゲーション API を提供します。これらの API を使用してジャンプできます。これらの API のいくつかはアプレット専用であることに注意してください。
navigateTo: 親ページに戻ることができる最も基本的なジャンプ メソッド。アプレット、H5、React Native など、3 つの端末すべてがサポートされています。
redirectTo: 前のエピソードのページを記録せず、直接ジャンプするだけです。Mini Program、H5、*React Nativeの3つの端末すべてがサポートされています。
switchTab: タブを切り替えるには、アプレット、H5、React Native など、3 つの端末すべてでサポートされている Taro のナビゲーション バーと一緒に使用する必要があります。
navigateBack: Go back to the previous page. これは小さなプログラムでよく使用され、小さなプログラム、H5、React Native などの 3 つの端末すべてでサポートされています。
再起動: すべてのフロントを閉じて、アプリ内のページを開きます。アプレット、H5、React Native など、3 つの端末すべてがサポートされています。
getCurrentPages: 現在のページ情報を取得するために使用されます。この H5 はサポートされていません。（知らせ）
ページジャンプのデモ
デモを作成するために、ブログ ページからインデックス ページにジャンプして、プログラムの書き方を説明します。
学習の便宜のために、blog.jsx のコード全体を以下に示します。
import Taro from '@tarojs/taro'
import {
View , Text ,Button} from '@tarojs/components'
function Blog(){
const gotoIndex=()=>{
Taro.navigateTo({
url:'/pages/index/index'})
}
return (
<View>
<Text>Blog Page</Text>
<Button onClick={
gotoIndex}>我要去Index页面</Button>
</View>
)
}
export default Blog
このように、Taro ではルーティングの飛躍を実現しました。
Taro ルーティング パラメータ
Taro のルーティング パラメータはクエリ文字列の形式を使用します
Taro でのパラメータの受け渡しは通常、クエリ文字列の形式を使用します。つまり、リダイレクトされた URL に ? 疑問符を追加し、その後にパラメータを続けます。
これを Blog.jsx ページで使用し、変数を useState の形式で宣言してから、ジャンプによって Index.jsx ページに値を取り込みます。
import Taro ,{
useState}from '@tarojs/taro'
import {
View , Text ,Button} from '@tarojs/components'
function Blog(){
const [blogTitle,setBlogTitle]=useState('JSPang Blog')
const gotoIndex=()=>{
Taro.navigateTo({
url:'/pages/index/index?blogTitle='+blogTitle})
}
return (
<View>
<Text>Blog Page</Text>
<Button onClick={
gotoIndex}>我要去Index页面</Button>
</View>
)
}
export default Blog
渡されたパラメータを受け取り、ページに表示する
パラメータを渡すことができるようになったので、Index.jsx でパラメータを受け取る方法は実際には非常に簡単です。this.$router.params を使用して受信するだけです。
もちろんパラメータを受け取る必要がありますが、これは useEffect() で行うことができます (useEffect は React Hooks のメソッドです。知らない学生は理解に進んでください)。
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])
より良い学習のために、受信したコード全体、index.jsx のコードを次に示します。
import Taro, {
useState ,useEffect} from '@tarojs/taro'
import {
View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(props){
const [userName ,setUserName] = useState('Hello World!!!!')
const [blogTitle,setBlogTitle] = useState('')
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])
return (
<View>
<Text>{
userName}</Text>
<Child userName={
userName}></Child>
<View>{
blogTitle}</View>
</View>
)
}
export default Index
複数のパラメータの受け渡し
複数のパラメータと複数のパラメータの受信は、次のように、渡すときに & を使用してリンクするだけで済みます。(フロントエンド開発の経験のある学生は、これに精通しています)
Taro.navigateTo({
url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
学習の便宜のために、blog と jsx のすべてのコードを次に示します。
import Taro ,{
useState}from '@tarojs/taro'
import {
View , Text ,Button} from '@tarojs/components'
function Blog(){
introduce
const [blogTitle,setBlogTitle]=useState('JSPangBlog')
const [introduce,setIntroduce]=useState('111111')
const gotoIndex=()=>{
Taro.navigateTo({
url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
}
return (
<View>
<Text>Blog Page</Text>
<Button onClick={
gotoIndex}>我要去Index页面</Button>
</View>
)
}
export default Blog
受信パラメーターは、単一パラメーターの受信方法と同じです。あまり紹介せずに、コードを直接与えるだけで、
import Taro, {
useState ,useEffect} from '@tarojs/taro'
import {
View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'
function Index(props){
const [userName ,setUserName] = useState('Hello World!!!!')
const [blogTitle,setBlogTitle] = useState('')
const [introduce,setIntroduce]=useState('')
useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
setIntroduce(this.$router.params.introduce)
},[])
return (
<View>
<Text>{
userName}</Text>
<Child userName={
userName}></Child>
<View>{
blogTitle}</View>
<View>{
introduce}</View>
</View>
)
}
export default Index
JavaScript リソースのインポート方法
JavaScript の導入は、React の導入と似ていますが、たとえば、XieDaJiao (Xie Dajiao) というメソッドを定義し、次に liuying (Liu Ying) というメソッドを定義します。
/src ディレクトリに新しい /tools フォルダーを作成し、そのフォルダーの下に index.js ファイルを作成して、次のコードを入力します。
export function xiedajiao(){
console.log('我是谢大脚')
}
export function liuying(){
console.log('我是刘英')
}
建立完成后，我们在blog.jsx文件中引入这个，需要用ES的解构的方式引入：
import {
xiedajiao,liuying} from '../../tools'
次に、使用されるメソッドは、次のように useEffect で実行するためにも使用されます。
useEffect(()=>{
xiedajiao()
liuying()
},[])
写真をインポートする方法
Taro が画像をインポートする方法は 2 つあります。「…」から xxx をインポートしてから、対応する src に xxx を入れる方法を使用し、src の require メソッドを直接使用する方法です。
以下は、インポートされた blog.jsx のコードです。
import Taro ,{
useState ,useEffect}from '@tarojs/taro'
import {
View , Text ,Button,Image} from '@tarojs/components'
import {
xiedajiao,liuying} from '../../tools'
import newbbd from '../../static/newbbd0001.jpg'
function Blog(){
useEffect(()=>{
xiedajiao()
liuying()
},[])
const [blogTitle,setBlogTitle]=useState('JSPangBlog')
const [introduce,setIntroduce]=useState('111111')
const gotoIndex=()=>{
Taro.navigateTo({
url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
}
return (
<View>
<Text>Blog Page111</Text>
<Button onClick={
gotoIndex}>我要去Index页面</Button>
<View>
<Image src={
newbbd} width="100px" height="100px" />
</View>
</View>
)
}
require を使用する場合は、Image コンポーネントの src 属性を次のように変更します。
<Image src={
require('../../static/newbbd0001.jpg')} width="100px" height="100px" />
リソースをインポートするその他の方法については、Taro リソース紹介のドキュメントを参照してください: http://taro-docs.jd.com/taro/docs/static-reference.html
ところで、Taro の方が更新が早いので、Taro プロジェクトを忘れずに更新してください。
Taro は、プロジェクト内の CLI ツール自体と Taro 関連の依存関係を更新する更新コマンドを提供します。
Taro CLI ツールの更新
yarn global add @tarojs/cli@latest
予防
太郎文法を使うときの注意点
- 改行には 2 つのスペースを使用します。
- 最後にセミコロンは使用できません。
- インデントを除き、複数のスペースは使用できません。
- 一重引用符を一様に使用します。
- Iif (条件) {} のように、キーワードの後にスペースを追加します。括弧の前にスペースがあります。
- 冗長な空白行を避ける;
- 関数名 (arg) { ... } run(function () { ... }) のように関数を宣言するときは、括弧と関数名の間にスペースを追加します。
- fn(...args) のように、展開演算子とその式の間にスペースを入れないでください。
- セミコロンが検出された場合、スペースは前ではなく後ろに置く必要があります. 例: for (let i = 0; i < items.length; i++) {…}
- if (admin) {…} のように、コード ブロックの先頭と末尾にスペースを残します。
- getName(name) のように括弧の間にスペースを入れない
- user.name などの属性の前にスペースを追加しないでください
- typeof !admin のように、単項演算子の前にスペースを追加します。
- /_ コメント _/ のように、コメントの先頭にスペースを残します。
- 次のように、テンプレート文字列のテンプレートの前後にスペースを追加しないでください: const message = Hello, ${name}
- const list = [1, 2, 3, 4] function greeting (name, options) { … } のように、カンマの後にスペースを追加します。
- 複数行のスペースは使用できません
- 1 行のコード ブロックの前後にスペースを追加する
- 常に行末にコンマを置く
- ドット演算子は、属性と同じ行になければなりません
- 関数が呼び出されると、console.log('hello') のように、識別子と括弧にスペースが残りません。
- const obj = { 'key': 'value' } のように、コロンとキーと値のペアの値の間にスペースを入れます。
- 変数名と関数名は、ハンプ命名法を一様に使用します: のように
function myFunction () {
} const myVar = ‘hello’
次のような文字列スプライシング演算子 (中置演算子) の間にはスペースを残す必要があります。
const message = 'hello, ’ + name + ‘!’
NaN をチェックする正しい姿勢は、次のように isNaN() を使用することです。
if (isNaN(price)) {
}
有効な文字列は、次のようなタイプと比較されます
typeof name === ‘undefined’
24. 配列に関する注意:
- null 値を分解しない
- 次のようなコンストラクターの代わりに、配列リテラルを使用します。
const {
a: {
b } } = foo
3) 次のようなネイティブ オブジェクトを拡張しないでください。
Object.prototype.age = 21 //不行
- オブジェクト プロパティが折り返されるときのスタイルに注意する
const user = {
name: ‘Jane Doe’, age: 30, username: ‘jdoe86’ } // ✓ 正确
const user = {
name: ‘Jane Doe’,
age: 30,
username: ‘jdoe86’
}
などの計算されたプロパティとして不要なオブジェクト値を使用しないでください。
const user = {
name: ‘John Doe’ } //对
arguments.callee と arguments.caller
のネストされたコード ブロックで関数を再定義することを避け
、Function コンストラクターの使用を禁止します。
const sum = new Function(‘a’, ‘b’, ‘return a + b’) // ✗ 错误
自己呼び出し匿名関数 (IIFE) は括弧で囲まれています
const getName = function () {
}() // ✗ 错误
const getName = (function () {
}()) // ✓ 正确
const getName = (function () {
})() // ✓ 正确
Promise または async 関数を使用した非同期プログラミング
function* helloWorldGenerator() {
// ✗ 错误
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}
-
クラス名に関する注意:
-
クラス名は大文字で始める必要があります
const dog = new Animal() // ✓ 正确
2) クラス名の再割り当てを避ける
class Dog extends Mammal {
constructor () {
super() // ✓ 正确
}
}
3) これを使用する前に super() が呼び出されていることを確認してください
class Dog extends Animal {
constructor () {
this.legs = 4 // ✗ 错误
super()
}
}
- 冗長なコンストラクターを許可しない
class Car {
constructor () {
// ✗ 错误
super()
}
- クラスで冗長な属性を定義しないでください
class Dog {
bark () {
}
bark () {
} // ✗ 错误
}
- パラメーターなしのコンストラクターを呼び出すときは、かっこが必要です
function Animal () {
}
const dog = new Animal // ✗ 错误
const dog = new Animal() // ✓ 正确
- オブジェクトインスタンスを作成した後、 new を変数に割り当てる必要があります
new Character() // ✗ 错误
const character = new Character() // ✓ 正确
- throw でエラーをスローする場合、文字列の代わりに Error オブジェクトをスローします
throw ‘error’ // ✗ 错误
throw new Error(‘error’) // ✓ 正确
9) catch でエラーを再割り当てしないでください
try {
// …
} catch (e) {
e = ‘new value’ // ✗ 错误
}