typescript在react组件中的使用

最新推荐文章于 2025-07-05 18:41:03 发布

weixin_34250434

最新推荐文章于 2025-07-05 18:41:03 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发工具 ViewUI

原文链接：https://juejin.im/post/5b0c122df265da08d4679816

本文介绍TypeScript的基础类型定义方法，包括布尔值、数字、字符串、数组、元组和void等，并通过一个React组件示例展示了这些类型的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法

本文背景,编辑器vscode, typescript, eslint.

定义基础类型

typescript中文文档

// 布尔值
let isTrue: boolean = false

//数字
let num : number = 4

//字符串
let name : string = 'boble'

//数组
let arr : number[]= [1,2,3,4]
let arrs : Array<string>  //注意<>内部表示数组item的属性,可以设定any或者其他基础类型

//元组
let array :[ string, number ]
array=['age', 25] //true
array=[25,'age'] //error

//void
表示没有任何返回
复制代码

定义函数

//常规函数
function add(x,y){
    return x+y
}

//ts
function add(x:number,y:munber):number{
    return x+y    
}

复制代码

在react中使用

//example.tsx

import React , { Component } from 'react'

interface props{
    num: number,
    str: string,
    isTrue:boolean,
    arr: Array<number>,
    array: Array<any>,
    getName: fnc,
}

interface fnc {
  (source: string, subString: string): boolean;
}

export default class Example extends Component<props,any>{
    ....
}

复制代码