React Native 学习笔记之引入 TypeScript

? 前言

如果在阅读完 RN 与 TS 的官方文档后,却不知如何下手?那希望这篇学习笔记能够帮助到你

? 正文

初始化 RN 项目

npx react-native init projectName 

安装 TS 相关插件

yarn add @types/react @types/react-native

TS 中无法使用使用 RN 的 react 和 react-native,下载该组件让 TS 支持 RN

初始化 TS 配置文件

npm install -g typescript 

tsc --init

在根目录会新增一个 tsconfig.json 文件,需要添加一行配置,避免 ts 编译时类型检查标注红线

"compilerOptions": {
    	 "jsx": "react", 
}

编写一个简单的 DEMO

  • 创建接口与实现类
    UserService.ts

    export interface UserService{
        age:number;
        name:string;
        getInfo():string;
    }
    

    UserServiceImpl.ts

    import {UserService} from './UserService';
    export class UserServiceImpl implements UserService{
        age:number;
        name:string;
    
        //构造函数对变量初始化
        constructor(age:number,name:string){
          this.age = age;
          this.name = name;
        }
    
        //实现接口的getInfo方法
        getInfo():string{
          return `print info name = ${this.name},age = ${this.age}`;
        }
    }
    
  • 创建组件
    AppComponent.tsx

    import React,{Component} from 'react';
    import {View,Text} from 'react-native'; 
    
    import {UserServiceImpl} from './UserServiceImpl';
    
    export default class AppComponent extends Component{
    
     //这是 RN 的生命周期组件
     componentDidMount(){
       //实例化 UserServiceImpl 类
       let user = new UserServiceImpl(20,'Tom');
    
       //调用 UserServiceImpl 对象的getInfo方法
       console.log(person.getInfo());
     }
    
     render(){
       return(
         <SafeAreaView>
           <View>
             <Text>该组件是通过typescript实现</Text>
            </View>
         </SafeAreaView>
       );
     }
    }
    

    SafeAreaView 可以有效地兼容刘海屏手机

  • 将 AppComponent.tsx 作为 RN 的入口文件

    import { AppRegistry } from 'react-native';
    import { name as appName } from './app.json';
    import App from './src/App';
    
    AppRegistry.registerComponent(appName, () => App);
    

    注意:引入 App 组件,不需要大括号

  • 运行项目

    yarn ios
    

? 总结

在 RN 中不使用 tsc 命令将 TS 转 JS ,项目仍然是可以运行的。

本人技术能力捉襟见肘,如果有写的不对的地方,请留言斧正,十分感谢 ?

如果没有解决您的问题,首先十分抱歉耽误您的时间,可以在下方评论区留言,看到后我会第一时间回复?‍♂️

ReactNative

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

被以下专题收入,发现更多相似内容