ทำไม Const` เริ่มต้นส่งออกไม่ถูกต้อง

ฉันเห็นว่าต่อไปนี้เป็นเรื่องปกติ:

const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;

อย่างไรก็ตามสิ่งนี้ไม่ถูกต้อง:

export default const Tab = connect( mapState, mapDispatch )( Tabs );

แต่นี่เป็นเรื่องปกติ:

export default Tab = connect( mapState, mapDispatch )( Tabs );

สิ่งนี้สามารถอธิบายได้โปรดทำไมถึงconstไม่ถูกต้องด้วยexport default? มันเป็นการเพิ่มที่ไม่จำเป็น & สิ่งใด ๆ ที่ประกาศว่าexport defaultมีการสันนิษฐานว่าเป็นconstเช่นนั้นหรือไม่?

constเป็นเหมือนlet, มันเป็นLexicalDeclaration ( VariableStatement ประกาศ ) ใช้ในการกำหนดตัวบ่งชี้ในบล็อกของคุณ

คุณกำลังพยายามผสมสิ่งนี้กับdefaultคำหลักซึ่งคาดว่าHoistableDeclaration, ClassDeclarationหรือAssignment Expressionเพื่อติดตามมัน

ดังนั้นจึงเป็นSyntaxError

หากคุณต้องการสิ่งที่คุณต้องการที่จะให้ระบุและไม่ได้ใช้งานconstdefault

exportโดยตัวเองยอมรับVariableStatementหรือDeclarationไปทางขวา

AFAIK การส่งออกในตัวเองไม่ควรเพิ่มอะไรในขอบเขตปัจจุบันของคุณ

ต่อไปนี้เป็นเรื่องปกติexport default Tab;

Tabกลายเป็นAssignment Expressionตามที่ได้รับการตั้งค่า ชื่อ^{หรือไม่}

export default Tab = connect( mapState, mapDispatch )( Tabs ); ไม่เป็นไร

นี่Tab = connect( mapState, mapDispatch )( Tabs );เป็นAssignmentExpression

คุณสามารถทำสิ่งนี้ได้หากคุณต้องการส่งออกค่าเริ่มต้นกลุ่ม / ให้แทน

const MyComponent = ({ attr1, attr2 }) => (<p>Now Export On other Line</p>);
export default MyComponent

คุณสามารถทำอะไรเช่นนี้ซึ่งฉันไม่ชอบเป็นการส่วนตัว

let MyComponent;
export default MyComponent = ({ }) => (<p>Now Export On SameLine</p>);

หากชื่อส่วนประกอบอธิบายไว้ในชื่อไฟล์MyComponent.jsเพียงแค่ไม่ตั้งชื่อองค์ประกอบให้คงขนาดโค้ดไว้

import React from 'react'

export default (props) =>
    <div id='static-page-template'>
        {props.children}
    </div>

อัปเดต : เนื่องจากป้ายกำกับนี้ไม่รู้จักในการติดตามสแต็กจึงไม่แนะนำ

คำตอบของ Paul คือคำตอบที่คุณกำลังมองหา อย่างไรก็ตามตามจริงฉันคิดว่าคุณอาจสนใจรูปแบบที่ฉันใช้ในแอป React + Redux ของฉันเอง

นี่คือตัวอย่างที่ลอกลงมาจากหนึ่งในเส้นทางของฉันแสดงให้เห็นว่าคุณสามารถกำหนดองค์ประกอบของคุณและส่งออกมันเป็นค่าเริ่มต้นด้วยคำสั่งเดียว:

import React from 'react';
import { connect } from 'react-redux';

@connect((state, props) => ({
    appVersion: state.appVersion
    // other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }

(หมายเหตุ: ฉันใช้คำว่า "ฉาก" สำหรับองค์ประกอบระดับบนสุดของเส้นทางใด ๆ )

ฉันหวังว่านี้จะเป็นประโยชน์. ฉันคิดว่ามันดูสะอาดตากว่ารุ่นทั่วไปconnect( mapState, mapDispatch )( BareComponent )

คำตอบที่ Paul แบ่งปันให้นั้นเป็นคำตอบที่ดีที่สุด หากต้องการขยายเพิ่มเติม

สามารถส่งออกเริ่มต้นเพียงหนึ่งไฟล์ต่อหนึ่งไฟล์ ในขณะที่สามารถส่งออกได้มากกว่าหนึ่งรายการ ตัวแปรเริ่มต้นสามารถนำเข้าด้วยชื่อใด ๆ ในขณะที่ตัวแปร const สามารถนำเข้าด้วยชื่อเฉพาะ

var message2 = 'ฉันกำลังส่งออก';

ส่งออกข้อความเริ่มต้น 2;

ส่งออกข้อความ const = 'ฉันส่งออกด้วย'

ที่ด้านการนำเข้าเราจำเป็นต้องนำเข้าเช่นนี้:

นำเข้า {ข้อความ} จาก './test';

หรือ

นำเข้าข้อความจาก './test';

ด้วยการนำเข้าครั้งแรกตัวแปร const จะถูกนำเข้าในขณะที่อีกตัวหนึ่งจะนำเข้าตัวแปรเริ่มต้น

default เป็นพื้น const someVariableName

คุณไม่จำเป็นต้องใช้ตัวระบุชื่อเนื่องจากเป็นการส่งออกเริ่มต้นสำหรับไฟล์และคุณสามารถตั้งชื่อสิ่งที่คุณต้องการเมื่อคุณนำเข้าดังนั้นdefaultเพียงแค่รวมการมอบหมายตัวแปรไว้ในคำหลักเดียว

สำหรับฉันนี่เป็นเพียงหนึ่งในหลายสำนวน (เน้นที่ idio (t)) ของ typescript ที่ทำให้คนดึงผมออกมาและสาปแช่งผู้พัฒนา บางทีพวกเขาอาจทำงานต่อไปด้วยข้อความแสดงข้อผิดพลาดที่เข้าใจได้มากขึ้น