Javascript

React+typescrip开发入门指南

本文主要是介绍React+typescrip开发入门指南，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
概述

本文详细介绍了如何搭建React+TypeScript开发环境，包括Node.js和npm的安装、创建React项目并集成TypeScript、配置TypeScript项目以及启动开发服务器。文章还涵盖了TypeScript的基础知识、React组件的编写与类型化、React Hook的类型化以及高阶组件的类型化等内容。

React+TypeScript环境搭建

安装Node.js和npm

在开始使用React和TypeScript之前，需要确保已经安装了Node.js和npm。Node.js是一个开源的JavaScript运行时环境，而npm是Node.js的包管理器，用于安装和管理JavaScript库。

  1. 下载并安装Node.js

    • 访问Node.js官网 https://nodejs.org/ ，下载适用于您操作系统的最新版本。
    • 安装过程中可以选择自定义安装路径，确保将Node.js和npm安装到系统环境变量中。
  2. 验证安装
    • 打开命令行工具（如Windows的CMD或PowerShell、macOS的Terminal），输入以下命令来检查Node.js和npm是否安装成功： 
      node -v
npm -v
    • 如果安装成功，将显示Node.js和npm的版本信息。

创建React项目并集成TypeScript

  1. 安装Create React App

    • Create React App是一个官方推荐的脚手架工具，用于快速搭建React应用。 
      npx create-react-app my-app --template typescript
    • 这个命令会创建一个React项目，并自动集成TypeScript。

  2. 安装依赖

    • 进入项目目录并安装依赖。 
      cd my-app
npm install

  3. 查看项目文件结构

    • 项目创建完成后，目录结构如下： 
      my-app
├── node_modules
├── public
├── src
├── .gitignore
├── README.md
├── package.json
└── tsconfig.json
    • tsconfig.json文件用于配置TypeScript编译器的选项，以下是默认的tsconfig.json文件内容： 
      {
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
    • 可以根据需要调整这些选项，例如target和module选项可以根据项目需求进行修改。
  4. 编译和运行项目
    • 使用以下命令启动开发服务器： 
      npm start
    • 开发服务器会自动编译TypeScript代码并启动应用。默认情况下，应用会在http://localhost:3000/运行。
TypeScript基础知识

变量类型声明

在TypeScript中，变量需要显式声明其类型。这有助于确保代码的健壮性和可维护性。

  1. 基本类型

    • number：表示数字类型。
    • string：表示字符串类型。
    • boolean：表示布尔类型。
    • any：表示任意类型，不推荐使用。
    • void：表示没有返回值的方法。
    • never：表示永远不会返回的函数。

  2. 类型声明示范

    let age: number = 25;
let name: string = "张三";
let isStudent: boolean = true;

// 使用any类型
let dynamicValue: any = 123;
dynamicValue = "abc"; // 类型可以改变
  3. 自动推断类型
    • TypeScript可以自动推断变量的类型。 
      let age = 25; // 推断为number类型
let name = "张三"; // 推断为string类型

函数类型定义

在TypeScript中，函数需要显式声明其参数类型和返回值类型。

  1. 基本函数定义

    • 定义带有参数和返回值类型的函数。 
      function add(a: number, b: number): number {
return a + b;
}

    let result: number = add(1, 2); // result为3

    

    2. 

  2. 

    可选参数
    

      

    • 使用 ? 表示参数是可选的。

      function greet(name: string, greeting?: string) {
if (greeting) {
console.log(`${greeting}, ${name}!`);
} else {
console.log(`Hello, ${name}!`);
}
}
      • 

    

    greet("张三"); // 输出 "Hello, 张三!"
    
greet("李四", "你好"); // 输出 "你好, 李四!"
    

    

    3. 

  3. 

    默认参数值
    

      

    • 使用 = 给参数赋默认值。

      function greet(name: string, greeting: string = "Hello") {
console.log(`${greeting}, ${name}!`);
}
      • 

    

    greet("张三"); // 输出 "Hello, 张三!"
    
greet("李四", "你好"); // 输出 "你好, 李四!"
    

    

    4. 



接口与类型别名


在TypeScript中，接口和类型别名用于定义结构化类型。


    

  1. 

    接口定义
    

      

    • 使用接口来描述一个对象的结构。

      interface Person {
name: string;
age: number;
}
      • 

    

    let person: Person = {
    
name: "张三",
    
age: 25
    
};
    

    

    2. 

  2. 

    类型别名
    

      

    • 使用类型别名来定义一个新的类型。

      type PersonType = {
name: string;
age: number;
};
      • 

    

    let person: PersonType = {
    
name: "张三",
    
age: 25
    
};
    

    

    3. 

  3. 

    可选属性
    

      

    • 使用 ? 表示属性是可选的。

      interface Person {
name: string;
age?: number; // 可选属性
}
      • 

    

    let person: Person = {
    
name: "张三"
    
};
    

    

    4. 

  4. 

    方法定义
    

      

    • 在接口中定义方法。

      interface Person {
name: string;
age?: number;
greet(): void;
}
      • 

    

    let person: Person = {
    
name: "张三",
    
age: 25,
    
greet() {
    
console.log(Hello, ${this.name}!);
    
}
    
};
    

    person.greet(); // 输出 "Hello, 张三!"
    

    

    5. 


React组件编写与类型化

创建简单React组件


在React中，组件可以分为类组件和函数组件。这里先介绍如何创建一个简单的函数组件。


    

  1. 

    函数组件
    

      

    • 创建一个简单的函数组件。

      const App: React.FC = () => {
return <h1>Hello, World!</h1>;
};
      • 

    

    2. 

  2. 

    类组件
    

      

    • 创建一个简单的类组件。

      class App extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
      • 

    

    3. 

  3. 

    带Props的函数组件
    

      

    • 创建一个带Props的函数组件。

      type Props = {
name: string;
age: number;
};
      • 

    

    const App: React.FC<Props> = (props) => {
    
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
    
};
    

    

    4. 

  4. 

    带Props的类组件
    

      

    • 创建一个带Props的类组件。

      type Props = {
name: string;
age: number;
};
      • 

    

    class App extends React.Component<Props, {}> {
    
constructor(props: Props) {
    
super(props);
    
}
    

    render() {
    
return <h1>Hello, {this.props.name}! You are {this.props.age} years old.</h1>;
    
}
    
}
    

    

    5. 



使用TypeScript类型化React组件


在TypeScript中，可以使用 React.FC 类型来类型化函数组件。


    

  1. 

    类型化函数组件
    

      

    • 使用 React.FC 类型来类型化函数组件。

      import React from 'react';
      • 

    

    type Props = {
    
name: string;
    
};
    

    const App: React.FC<Props> = (props) => {
    
return <h1>Hello, {props.name}!</h1>;
    
};
    

    

    2. 

  2. 

    类型化类组件
    

      

    • 使用 React.Component 类来类型化类组件。

      import React from 'react';
      • 

    

    type Props = {
    
name: string;
    
};
    

    class App extends React.Component<Props, {}> {
    
render() {
    
return <h1>Hello, {this.props.name}!</h1>;
    
}
    
}
    

    

    3. 



Props和State类型化


在React中，组件可以接收Props和维护State。这里介绍如何在TypeScript中类型化Props和State。


    

  1. 

    类型化Props
    

      

    • 使用类型定义来类型化Props。

      type Props = {
name: string;
age: number;
};
      • 

    

    const App: React.FC<Props> = (props) => {
    
return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
    
};
    

    

    2. 

  2. 

    类型化State
    

      

    • 使用 React.Component 类来类型化State。

      import React from 'react';
      • 

    

    type Props = {
    
name: string;
    
};
    

    type State = {
    
age: number;
    
};
    

    class App extends React.Component<Props, State> {
    
constructor(props: Props) {
    
super(props);
    
this.state = {
    
age: 25
    
};
    
}
    

    render() {
    
return <h1>Hello, {this.props.name}! You are {this.state.age} years old.</h1>;
    
}
    
}
    

    

    3. 


React Hook类型化

使用TypeScript类型化Hook


React Hooks允许我们在不编写类的情况下使用React的状态和生命周期。这里介绍如何在TypeScript中类型化Hooks。


    

  1. 

    类型化useState
    

      

    • 使用 useState Hook。

      import React, { useState } from 'react';
      • 

    

    const App: React.FC = () => {
    
const [name, setName] = React.useState<string>('张三');
    
const [age, setAge] = React.useState<number>(25);
    

    return (
    
<div>
    
<h1>Hello, {name}! You are {age} years old.</h1>
    
<button onClick={() => setName('李四')}>Change Name</button>
    
<button onClick={() => setAge(30)}>Change Age</button>
    
</div>
    
);
    
};
    

    

    2. 

  2. 

    类型化useReducer
    

      

    • 使用 useReducer Hook。

      import React, { useReducer } from 'react';
      • 

    

    type State = {
    
name: string;
    
age: number;
    
};
    

    type Action = {
    
type: 'setName' | 'setAge';
    
payload: string | number;
    
};
    

    const initialState: State = {
    
name: '张三',
    
age: 25
    
};
    

    const reducer = (state: State, action: Action): State => {
    
switch (action.type) {
    
case 'setName':
    
return { ...state, name: action.payload as string };
    
case 'setAge':
    
return { ...state, age: action.payload as number };
    
default:
    
return state;
    
}
    
};
    

    const App: React.FC = () => {
    
const [state, dispatch] = React.useReducer(reducer, initialState);
    

    return (
    
<div>
    
<h1>Hello, {state.name}! You are {state.age} years old.</h1>
    
<button onClick={() => dispatch({ type: 'setName', payload: '李四' })}>Change Name</button>
    
<button onClick={() => dispatch({ type: 'setAge', payload: 30 })}>Change Age</button>
    
</div>
    
);
    
};
    

    

    3. 



使用自定义Hook


自定义Hook可以封装通用逻辑，使代码更简洁和可复用。


    

  1. 

    创建自定义Hook
    

      

    • 创建一个自定义Hook来封装通用逻辑。

      import React, { useState } from 'react';
      • 

    

    type Props = {
    
name: string;
    
age: number;
    
};
    

    const useGreeting = (props: Props) => {
    
const [greeting, setGreeting] = useState(Hello, ${props.name}! You are ${props.age} years old.);
    
return greeting;
    
};
    

    const App: React.FC<Props> = (props) => {
    
const greeting = useGreeting(props);
    
return <h1>{greeting}</h1>;
    
};
    

    

    2. 

  2. 

    使用自定义Hook
    

      

    • 在组件中使用自定义Hook。

      import React from 'react';
import { useGreeting } from './hooks';
      • 

    

    type Props = {
    
name: string;
    
age: number;
    
};
    

    const App: React.FC<Props> = (props) => {
    
const greeting = useGreeting(props);
    
return <h1>{greeting}</h1>;
    
};
    

    

    3. 


高阶组件的类型化

理解高阶组件


高阶组件（Higher-Order Component，HOC）是一种高级技术，用于封装和重用组件逻辑。HOC接受一个组件作为输入，返回一个新的增强过的组件。


    

  1. 

    创建HOC
    

      

    • 创建一个简单的HOC。

      import React from 'react';
      • 

    

    type EnhancedComponent<T> = React.ComponentType<T> & {
    
WrappedComponent: React.ComponentType<T>;
    
};
    

    const withLogging<T extends object>(WrappedComponent: React.ComponentType<T>) {
    
class EnhancedComponent extends React.Component<T> {
    
render() {
    
console.log(Rendering ${WrappedComponent.name});
    
return <WrappedComponent {...this.props} />;
    
}
    
}
    

    return EnhancedComponent as EnhancedComponent<T>;
    
}
    

    interface Props {
    
name: string;
    
age: number;
    
}
    

    const App: React.FC<Props> = (props) => (
    
<div>
    
<h1>Hello, {props.name}! You are {props.age} years old.</h1>
    
</div>
    
);
    

    const EnhancedApp = withLogging<Props>(App);
    
const App2: React.FC<Props> = (props) => (
    
<EnhancedApp name={props.name} age={props.age} />
    
);
    

    

    2. 

  2. 

    具体项目实例
    

      

    • 创建一个实际项目实例，展示如何使用HOC。

      import React from 'react';
import { withLogging } from './HOC';
      • 

    

    interface Props {
    
name: string;
    
age: number;
    
}
    

    const App: React.FC<Props> = (props) => (
    
<div>
    
<h1>Hello, {props.name}! You are {props.age} years old.</h1>
    
</div>
    
);
    

    const EnhancedApp = withLogging<Props>(App);
    
const App2: React.FC<Props> = (props) => (
    
<EnhancedApp name={props.name} age={props.age} />
    
);
    

    

    3. 


错误排查与调试

解析TypeScript错误信息


在使用TypeScript时，编译器会生成详细的错误信息，帮助你快速定位和修复问题。


    

  1. 

    常见的TypeScript错误
    

      

    • TS2339: Property 'xxx' does not exist on type 'yyy'.

        

      • 这个错误表示尝试访问一个不存在的属性。
        • 

      • 

    • TS2322: Type 'xxx' is not assignable to type 'yyy'.

        

      • 这个错误表示尝试将一个类型赋值给不兼容的类型。
        • 

      • 

    • TS1005: Unexpected token ','

        

      • 这个错误表示语法错误，可能是缺少分号或括号。
        • 

      • 

    

    2. 

  2. 解决方法

      

    • 检查代码中的类型声明是否正确。
      • 

    • 确保所有变量和参数的类型与其声明一致。
      • 

    • 检查语法错误，如括号、分号是否正确。
      • 

    3. 



常见问题解决


在开发过程中，可能会遇到一些常见的问题，以下是一些常见问题的解决方法。


    

  1. 

    类型不匹配
    

      

    • 确保所有类型声明与实际类型一致。

      let name: string = "张三";
name = 123; // 错误，数字不能赋值给字符串类型
      • 

    

    2. 

  2. 

    未声明的变量
    

      

    • 确保所有变量都已经声明了类型。

      let name = "张三"; // 缺少类型声明
let name: string = "张三"; // 正确
      • 

    

    3. 

  3. 

    函数参数类型不匹配
    

      

    • 确保函数参数类型与其定义一致。

      function greet(name: string) {
console.log(`Hello, ${name}!`);
}
      • 

    

    greet(123); // 错误，数字不能作为字符串参数传递
    

    

    4. 

  4. 

    接口或类型别名定义错误
    

      

    • 确保接口或类型别名定义正确。

      interface Person {
name: string;
age: number;
}
      • 

    

    let person: Person = {
    
name: "张三",
    
age: 25
    
};
    

    let person: Person = {
    
name: "张三"
    
}; // 错误，缺少age属性
    

    

    5. 

  5. 

    状态和属性类型不匹配
    

      

    • 确保React组件的状态和属性类型与其定义一致。

      import React from 'react';
      • 

    

    type Props = {
    
name: string;
    
age: number;
    
};
    

    class App extends React.Component<Props, {}> {
    
constructor(props: Props) {
    
super(props);
    
}
    

    render() {
    
return <h1>Hello, {this.props.name}! You are {this.props.age} years old.</h1>;
    
}
    
}
    

    const app = <App name="张三" age="25" />; // 错误，age属性应该是数字类型
    

    

    6. 



通过以上内容，你可以掌握React+TypeScript的基础知识和最佳实践。希望这些信息对你有所帮助。如果需要更深入的学习，可以参考慕课网提供的更多课程。

					

					

						

						
					

                    

                        这篇关于React+typescrip开发入门指南的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航