这里附一篇写得很好的rn项目初始化基本运行的博客，里面有常出现的运行问题::
https://blog.csdn.net/ApacheEdward/article/details/81209104
第一步: 安装vscode即visual studio code,安装包下载地址:
https://code.visualstudio.com/download
安装过程都是很傻瓜似的，就不用多说了:
现推荐一种修改编辑文件背景色为绿色护眼色的方法:
文件——>首选项——>设置，打开User Settings文件，在右边"用户设置"栏的"{}"内添加代码:
"workbench.colorCustomizations":
{
"editor.background": "#CCE8CF"
}第二步: 安装tslint插件(可对typescript语言开发提供诸多便捷)
点击visual studio code的“拓展”按钮搜索"tslint",安装该插件
这时应安装好npm、node、yarn
第三步: 搭建TypeScript开发环境
在已经安装node.js工具后，打开i命令提示符cmd，进入控制台(或其他终端Terminal)，输入指令:
npm install -g typescript
附: 查看版本: tsc -v
更新tscript compiler: npm update -g typescript
选择性安装tpyings(主要是用来获取.d.ts文件。当typescript使用一个外部JavaScript库时,会需要这个文件，当然好多的编译器都用它来增加智能感知能力。)
指令: ：npm install -g typings
以上安装好typescript后现将其引入到RN项目:
- 初始化rn项目 (windows注意以管理员身份初始化，否者会因为各种权限问题无法运行，更建议执行这条命令:react-native init Demo --verbose --version 0.55.4 因为最新版本的rn运行会有错)
-
react-native init MyAwesomeProject - 进入该项目 cd MyAwesomeProject
- 以下命令均在dos敲的命令(以管理员身份运行):
- 添加typescript到项目:
yarn add --dev typescript - 添加react native typescript transformer到项目: yarn add --dev react-native-typescript-transformer
- 初始化一个空的typescript 配置文件:
yarn tsc --init --pretty --jsx react - 添加一个空的rn typescript 转换配置文件: tsc --init
- 为react和react native添加typings，(注意: 如果初始化项目不是使用最新版本react native，typings对应版本要就要小于react navtive版本，当然建议初始化也不要使用最新0.55.6的运行会报错，这里建议用: yarn add --dev @types/react @types/[email protected] 指定低版本)
yarn add --dev @types/react @types/react-native
经过以上配置后可看到项目中有package.json和tsconfig.json
3.1: 编辑tsconfig.json
可参照官网: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
vscode中的tsconfig.json内容可参考如下:
"compilerOptions": {
"module": "es2015",
"target": "es2015",
"moduleResolution": "node",
"jsx": "react-native",
"noImplicitAny": true,
"experimentalDecorators": true,
"preserveConstEnums": true,
"sourceMap": true,
"watch": true,
"allowSyntheticDefaultImports": true
},
"filesGlob": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"index.android.js",
"index.ios.js",
"build",
"node_modules"
]
在vscode工具软件中打开刚才创建的项目，点开package.json，在"{}"内输入:
- target: 编译之后生成的JavaScrpt文件需要遵循的标准，有三个候选项:es3、es5、es2015
- noImplicitAny 为false时，如果编译器无法根据变量的使用类判断类型时，将用any类型代码。为rue时，将进行强制类型检查，无法推断类型时提示错误
- module: 遵循的JavaScript模块规范。主要候选项有: commonjs、AMD、es6
- removeComments：编译生成的JavaScript文件是否移除注释。
- sourceMap: 编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置
- outDir：编译输出JavaScript文件存放的文件夹。
- include、exclude：编译时需要包含/剔除的文件夹
3.2: 配置tslint.json
链接地址: https://github.com/palantir/tslint
3.2.1. 安装tslint(在Dos命令窗口):
yarn global add tslint typescript3.2.2. 进入RN项目目录(Dos命令窗口)
3.2.3 生成一个基本的配置文件，这时你会看到项目中有个tslint.json文件
tslint --init
tslint的配置内容可以参照如下:
"rules": {
"class-name": false,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-unsafe-finally": true,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"double"
],
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
3.2.5 命令窗口输入 tsc -w，就能一直编译和检测语法错误
TypeScript语言阐述
附es6地址: http://es6.ruanyifeng.com/
typescriipt语法使用说明: http://www.typescriptlang.org/docs/handbook/basic-types.html
tyescript官网: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
typescript: TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。
使用TypeScript的优势:
1、JavaScript只是一个脚本语言，并非设计用于卡法大型Web应用。JavaScript没有提供类和模块的概念，而TypeScript扩展了JavaScript实现了这些特性
2、TypeScript 是微软推出的开源语言，使用 Apache 授权协议，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可选类型、类和模块
TypeScript 可编译成可读的、标准的 JavaScript
TypeScript 支持开发大规模 JavaScript 应用
TypeScript 设计用于开发大型应用，并保证编译后的 JavaScript 代码兼容性
TypeScript 扩展了 JavaScript 的语法，因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
TypeScript 文件扩展名是 ts，而 TypeScript 编译器会编译成 js 文件
TypeScript 语法与 JScript .NET 相同
TypeScript 易学易于理解
3、支持typescript插件的工具软件: 以前，只有Visual Studio提供TypeScript工具。现在，情形大为改观。WebStorm增加了TypeScript支持，Eclipse也有了TypeScript插件，
而且微软也发布了Sublime Text开发TypeScript插件，Atom也支持TypeScript开发。
4、TypeScript语法特性:
- 兼容 ECMAScript 2015（ES6）规范，可选择编译成ES6或ES5规范的JavaScript代码（ECMAScript 3及以上版本）；
- 面向对象，并拥有一些函数式特性；
- 类型语言；
- 实现了注解、泛型等特性；
-
适配大型App构建。
- 类 Classes
- 接口 Interfaces
- 模块 Modules
- 类型注解 Type annotations
- 编译时类型检查 Compile time type checking
-
Arrow 函数 (类似 C# 的 Lambda 表达式)
5、TypeScript与JavaScript的区别:
-
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
- 通过编译器把TypeScript程序代码编译生成JavaScript代码。
四、安装wachman插件:把.tsx文件编译成.js 文件，还可以检查语法哪里有错