快捷導(dǎo)航

ReactJS中使用TypeScript的方法

更新時(shí)間：2024年04月28日 10:08:55 作者：hawk2014bj

TypeScript 實(shí)際上就是具有強(qiáng)類型的 JavaScript,可以對(duì)類型進(jìn)行強(qiáng)校驗(yàn),好處是代碼閱讀起來(lái)比較清晰,代碼類型出現(xiàn)問(wèn)題時(shí),在編譯時(shí)就可以發(fā)現(xiàn),而不會(huì)在運(yùn)行時(shí)由于類型的錯(cuò)誤而導(dǎo)致報(bào)錯(cuò),這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下

TypeScript

TypeScript 實(shí)際上就是具有強(qiáng)類型的 JavaScript，可以對(duì)類型進(jìn)行強(qiáng)校驗(yàn)，好處是代碼閱讀起來(lái)比較清晰，代碼類型出現(xiàn)問(wèn)題時(shí)，在編譯時(shí)就可以發(fā)現(xiàn)，而不會(huì)在運(yùn)行時(shí)由于類型的錯(cuò)誤而導(dǎo)致報(bào)錯(cuò)。但是，從某種程度說(shuō)TypeScript 失去了 JavaScript 動(dòng)態(tài)語(yǔ)言的靈活性，代碼寫(xiě)起來(lái)也會(huì)比較繁瑣，需要生命類型。

主要語(yǔ)法

首先，TypeScript 支持 JavaScript基本寫(xiě)法，主要特性是加了類型，主要看下相對(duì)于 JavaScript 比較特殊的幾種寫(xiě)法。

參數(shù)加類型

主流的強(qiáng)類型語(yǔ)言在函數(shù)中都是要定義參數(shù)類型的，如下，useName 的類型是字符串。

function greet(userName: string): string {
  return `Hello, ${user.name}! You are ${user.age} years old.`;
}

Type 和 Interface

Type主要用于定義類型。Interface 主要用于定義接口，Interface 可以被擴(kuò)展、可以被類繼承。語(yǔ)法上 Type 和 Interface 可以互換，都可以僅當(dāng)類型試用。但是，項(xiàng)目開(kāi)發(fā)中，盡量不要混用，定義類型時(shí)就用 Type，定義接口時(shí)就用 Interface。

Type 試用方法

type Animal = {
  name: string;
  species: string;
};
type Loggable = {
  log(): void;
};
type LoggableAnimal = Animal & Loggable; //合并
const dog: LoggableAnimal = {
  name: "Buddy",
  species: "Canine",
  log() {
    console.log(`${this.name} is a ${this.species}`);
  }
};

Interface 試用方法

interface Person {
    name: string;
    age: number;
    introduce(): string;
}
class Student implements Person {
    name: string;
    age: number;
    course: string;
    constructor(name: string, age: number, course: string) {
        this.name = name;
        this.age = age;
        this.course = course;
    }
    introduce(): string {
        return `Hi, I'm ${this.name}, and I'm ${this.age} years old. I study ${this.course}.`;
    }
}

泛型

泛型是 TypeScript 非常重要的概念，在 React 中使用非常多。什么是泛型，簡(jiǎn)單理解就是類型參數(shù)化，例如在 Animal 類中，有一個(gè)animal 屬性，這個(gè)屬性可以是 Cat或者Dog，不用泛型的話，可能要定義多個(gè)類，當(dāng)然也可以使用接口或者父類進(jìn)行抽象。有了泛型，只要通過(guò)泛型傳遞就可以了。

class Animal<T> {
    name: string; // Regular property for the animal's name
    animation: T;  // Generic property for the animal's animation
    constructor(name: string, animation: T) {
        this.name = name;
        this.animation = animation;
    }
    animate(): void {
        console.log(`The ${this.name} starts to: ${this.animation}`);
    }
}

TypeScript 中方法和類型也可以試用泛型。

#方法泛型
function createPair<S, T>(v1: S, v2: T): [S, T] {
  return [v1, v2];
}
console.log(createPair<string, number>('hello', 42)); // ['hello', 42]
#類型泛型
type Wrapped<T> = { value: T };
const wrappedValue: Wrapped<number> = { value: 10 };

TypeScript 上手很快難度不大，做個(gè)基本了解，就可以開(kāi)始使用了，就是寫(xiě)起來(lái)麻煩一些。

React 中使用 TypeScript

在 React 中使用 TypeScript 最重要的就是類型，例如，props 都有什么字段，字段都是什么類型。只要是在Typescript 中出現(xiàn)的對(duì)象，就必要有對(duì)應(yīng)的類型，TypeScript 中如果不指定類型，如果是簡(jiǎn)單類型可以自動(dòng)解析，如果是函數(shù)參數(shù)默認(rèn)為 Any。

代碼中{ title: string } 是行內(nèi)類型

function MyButton({ title }: { title: string }) {
  return (
    <button>{title}</button>
  );
}
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton title="I'm a button" />
    </div>
  );
}

MyButtonProps 是單獨(dú)定義的類型

interface MyButtonProps {
  /** The text to display inside the button */
  title: string;
  /** Whether the button can be interacted with */
  disabled: boolean;
}
function MyButton({ title, disabled }: MyButtonProps) {
  return (
    <button disabled={disabled}>{title}</button>
  );
}

Hooks

React hooks 使用 TypeScript 主要用到的就是泛型，例如，useState

#自動(dòng)解析為 bool
const [enabled, setEnabled] = useState(false);
#指定類型為Status
type Status = "idle" | "loading" | "success" | "error";
const [status, setStatus] = useState<Status>("idle");

Dom Event

DomEvent 是轉(zhuǎn)換到 TypeScript 之后比較難上手的，需要熟悉一下 React 的類型定義。這個(gè)有個(gè)辦法就是通過(guò) inline 方法，然后VsCode 會(huì)給你提示。

export default function Form() {
  const [value, setValue] = useState("Change me");
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }
  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>Value: {value}</p>
    </>
  );
}

直接復(fù)制事件類型就可以。

在這里插入圖片描述