使用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结合的关键是使用转换器

初始化项目

1
2
3
react-native init YahuiApp
cd YahuiApp
yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native

用vscode打开 添加配置文件

配置Typescript

新建文件 tsconfig.json内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"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 内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{
"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文件 内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
    module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return [ 'ts', 'tsx' ]
}
};
<!-- 修改package.json 文件 的scripts start
"scripts": {
"start": "react-native start --transformer node_modules/react-native-typescript-transformer/index.js --sourceExts ts,tsx",
"test": "jest"
}, -->

编写代码

在 src文件夹里新建main.tsc文件
代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
    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的项目环境搭建好了

转载请注明出处:https://blog.yahui.wang/2017/08/26/react-native-typescript-init-debug/