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 ，项目仍然是可以运行的。

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

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