你用 TypeScript 語(yǔ)法寫(xiě)的 .ts .tsx 等后綴的程序是不能直接運(yùn)行的，而是會(huì)被 tsconfig.json 配置中的 “target”: “es6”, 這項(xiàng)配置轉(zhuǎn)換為 es6 語(yǔ)法的 .js 文件。?

TypeScript 中的 import 只會(huì)加載 .ts .tsx 后綴的文件，而 Javascript 中的 import 只能加載 .js 等后綴的文件，?

所以，當(dāng) ReactNative 啟動(dòng)時(shí)，首先加載入口文件，如 index.android.js ,代碼如下：

import{ AppRegistry } from'react-native';

importIndexNavigator from'./application/src/controller/navigator/IndexNavigator';

AppRegistry.registerComponent('mogudan', () => IndexNavigator);

其中 import IndexNavigator from … 這一行加載的不是 IndexNavigator.ts 而是編譯后生成的 IndexNavigator.js 文件，下面對(duì)比兩個(gè)文件的差異：

IndexNavigator.ts

/**

* Created by ZHOUZ on 2016-08-26.

*/

import* as React from'react';

import{Navigator}? from'react-native';

importIndexPage from'../page/IndexPage'

exportdefaultclassIndexNavigatorextendsReact.Component<any,any> {

??? render() {

??????? let defaultName ='IndexPage3311113';

??????? let defaultComponent = IndexPage;

???????return(

??????????? <Navigator

??????????????? initialRoute={{ name: defaultName, component: defaultComponent }}

??????????????? configureScene={(route) => Navigator.SceneConfigs.VerticalDownSwipeJump }

??????????????? renderScene={(route: any, navigator) => {

let Component =route.component;

???????????????????return<Component {...route.params} navigator={navigator} />

??????????????? }}

??????????? />

??????? );

??? }

}

IndexNavigator.js?

為自動(dòng)編譯后生成的es6語(yǔ)法的 javascript 代碼

"use strict";

var__assign = (this&&this.__assign) ||Object.assign ||function(t){

???for(vars, i =1, n =arguments.length; i < n; i++) {

??????? s =arguments[i];

???????for(varpins)if(Object.prototype.hasOwnProperty.call(s, p))

??????????? t[p] = s[p];

??? }

???returnt;

};

/**

* Created by ZHOUZ on 2016-08-26.

*/

constReact =require('react');

constreact_native_1 =require('react-native');

constIndexPage_1 =require('../page/IndexPage');

classIndexNavigator extendsReact.Component{

??? render() {

???????letdefaultName ='IndexPage3311113';

???????letdefaultComponent = IndexPage_1.default;

???????return(React.createElement(react_native_1.Navigator, {initialRoute: { name: defaultName, component: defaultComponent }, configureScene: (route) => react_native_1.Navigator.SceneConfigs.VerticalDownSwipeJump, renderScene: (route, navigator) => {

???????????letComponent =route.component;

???????????returnReact.createElement(Component, __assign({}, route.params, {navigator: navigator}));

??????? }}));

??? }

}

Object.defineProperty(exports,"__esModule", { value:true});

exports.default = IndexNavigator;