使用Visual Studio Code和typescript 开发调试React Native项目
关于
React Native
的详细介绍我就不叙述了,他是使用js构建原生app的开发框架。一次变编码多平台运行,非常强大。但是个人不喜欢js的过于灵活(弱类型)
的语法。强大的强类型语言Typescript(简称TS)
是我的首选,他可以编译成JavaScript
,编译成的JavaScript代码可读性很好,但是这不是关键,关键是TS
开发和调试效率极高。
但是React Native
官方是使用js
的开发的,如果如果使用TS开发React Native的关键是transformer
。
eact-native结合的关键是使用转换器
初始化项目
react-native init YahuiApp
cd YahuiApp
yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native
用vscode打开 添加配置文件
配置Typescript
新建文件 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"
]
}
新建文件 tslint.json
内容为
{
"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"
]
}
}
配置React Native Packager
根目录新建rn-cli.config.js文件 内容为:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return [ 'ts', 'tsx' ]
}
};
编写代码
在 src文件夹里新建main.tsc
文件
代码为:
import React, { Component } from "react";
import {
StyleSheet,
Text,
View
} from "react-native";
interface Props {
}
interface State {
}
export default class App extends Component<Props, State> {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Welcome to React Native!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
} as React.ViewStyle,
text: {
fontSize: 20,
textAlign: "center",
margin: 10,
} as React.TextStyle,
});
AppRegistry
import {
AppRegistry,
} from 'react-native';
import App from "./src/main";
AppRegistry.registerComponent('YahuiApp', () => App);
至此 您的使用TS开发React Native的项目环境搭建好了
转载请注明出处:http://blog.yahui.wang/2017/08/26/react-native-typescript-init-debug/
使用Visual Studio Code和typescript 开发调试React Native项目的更多相关文章
- 使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- 基于Visual Studio Code搭建Golang开发调试环境【非转载】
由于对Docker+kubernetes的使用及持续关注,要理解这个平台的原理,势必需要对golang有一定的理解,基于此开始利用业余时间学习go,基础语法看完之后,搭建开发环境肯定是第一步,虽然能g ...
- 新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows)
原文出处:新成员!Visual Studio Code --跨平台的开发工具(支持OSX, Linux 和 Windows) 这是我的文章备份 http://www.dotblogs.com.tw/ ...
- Visual Studio Code和Docker开发asp.net core和mysql应用
Visual Studio Code和Docker开发asp.net core和mysql应用 .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对 ...
- Windows下visual studio code搭建golang开发环境
Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...
- Visual Studio Code配置GoLang开发环境
Visual Studio Code配置GoLang开发环境 在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页: ...
- Visual Studio Code 做PHP开发
Visual Studio Code 做PHP开发 1. 在Windows 10环境下安装PHP: 1. 下载自己中意的PHP版本:http://windows.php.net/download (我 ...
- visual studio code(vscode) 调试php(转)
原文链接:http://www.cnblogs.com/CLR010/p/5276077.html visual studio code(vscode) 调试php 1.下载vscode (vis ...
- Visual Studio Code配置 HTML 开发环境
Visual Studio Code配置 HTML 开发环境 https://v.qq.com/x/page/l0532svf47c.html?spm=a2h0k.11417342.searchres ...
随机推荐
- Java xml 解析
1. XML框架结构 Java SE 6 平台提供的 XML 处理主要包括两个功能:XML 处理(JAXP,Java Architecture XML Processing)和 XML 绑定(JAXB ...
- WinForm中AssemblyInfo.cs文件参数具体讲解
在.NET中有一个配置文件AssemblyInfo.cs主要用来设定生成的有关程序集的常规信息dll文件的一些参数,下面是默认的AssemblyInfo.cs文件的内容具体介绍 //是否符合公共语言规 ...
- LoadRunner接口工作总结
因为工作中需要开发维护类似枢纽性质的平台,所以经常利用LR进行接口测试.接口自动化测试.接口压力测试.用多了LR,有点不愿意使用报文编辑器进行手工接口测试了. 接口脚本操作过程: 首先:打开LR,N ...
- Android 上层应用读写设备节点
Android 上层应用读写设备节点 Android L [TOC] 1. Android 设备节点 Android基于Linux内核.设备节点文件是设备驱动的逻辑文件,可以通过设备节点来访问设备驱动 ...
- 深入理解 JavaScript(二)
立即调用的函数表达式 前言 大家学 JavaScript 的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这 ...
- 走进json
纯做笔记,请多指教... 1,json格式: 非数组: {"key" : "value"} 数组:[{"key" : "value ...
- PHP面向对象中 static:: 与 self:: parent:: $this-> 的区别
很多好几年工作经验的PHP工程师,对PHP面向对象中 static:: .self::.parent::.$this-> 的定义和使用都不清晰,特做详细梳理: static:: 可以访问全局作 ...
- 《深入理解Java虚拟机》虚拟机类加载机制
上节学习回顾 上一节,我们深入到类文件去了解其结构细节,也大概对类文件的编写规则略知一二了,解析来我们就得学习这个类文件是如何被加载到Java虚拟机的,看看有什么引人入胜的奥秘. 本节学习重点 大部分 ...
- Java 9 揭秘全目录汇总
Tips 做一个终身学习的人. 当写这篇文章时,关于Java 9的学习就先告一段落了. 首先介绍一下背景,大概两个月前,我突然有兴趣想看看Java 9,当时读了一本英文原著<Java 9 Rev ...
- 蓝桥杯比赛javaB组练习《方格填数》
方格填数 如下的10个格子 +--+--+--+ | | | |+--+--+--+--+| | | | |+--+--+--+--+| | | |+--+--+--+ ( ...