Next.js应用转换为TypeScript方法demo

时间:2022-12-13 Jovie 人气:0

引言

如果你不确定TypeScript是什么，它基本上是一种建立在JavaScript之上的类型化语言。所有的JavaScript都是有效的TypeScript，但反之亦然。你可以在这里阅读更多关于它的信息，以及它如何与React/Next.js一起工作。你可以在你的项目中轻松地设置TypeScript，只需几个命令和一些小的重构，在这篇文章中，我将告诉你如何做!

添加TypeScript

最初添加TypeScript到你的Next.js项目很简单。只需通过运行以下命令来安装TypeScript。

npm install --save-dev typescript @types/react @types/node

然后，在你的项目根部创建一个空的 tsconfig.json文件，然后在你的项目的根部创建一个空的你可以手动完成，或者在你的项目根部运行以下命令。

touch tsconfig.json

然后使用 "npm run dev "启动你的项目，你应该在控制台中看到以下一行。

Next.js会在你的 tsconfig.json文件中加入一些预选的选项。我推荐的一个选项是在第11行将strict设置为true，以启用TypeScript的一些更严格的打字选项，但并不是必须的。

重构

你会发现你的项目仍然运行良好，这是因为你所有的.js或.jsx文件仍然是JavaScript。要将它们切换到TypeScript，只需将文件扩展名改为.ts或.tsx。

你现在可能又会遇到一些错误，所以我将讨论一些常见的错误。这里有一个JavaScript组件的例子，它使用API调用检索一些有趣的事实，并使用SSR渲染它们。这个组件使用的是TailwindCSS的样式，我强烈建议你看一下它。

import React, { useState } from 'react';
import axios from 'axios';
function fetchFact() {
    //Just a simple get request which gets back a fact in a JSON object
    return axios
        .get('https://uselessfacts.jsph.pl//random.json?language=en')
        .then((res) => {
            return res.data;
        });
}
//TS7031: Binding element 'facts' implicitly has an 'any' type.
export default function SSRExample({ facts }) {
    return (
        <div className="flex h-screen w-screen flex-col items-center justify-center bg-white text-3xl text-white">
            <p className="mb-10 rounded bg-neutral-800 p-10">
                Heres some fun facts!
            </p>
            <ul className="flex max-w-2xl flex-col gap-5 rounded bg-neutral-800 p-10 shadow">
                {
                    //TS7031: Binding element 'id' implicitly has an 'any' type.
                    //TS7031: Binding element 'text' implicitly has an 'any' type.
                    facts.map(({ id, text }) => (
                        <li key={id}>{text}</li>
                    ))
                }
            </ul>
        </div>
    );
}
//TS7031: Binding element 'query' implicitly has an 'any' type.
export async function getServerSideProps({ query }) {
    const { count } = query;
    const promises = [...new Array(Number(count))].map(() => fetchFact());
    const facts = await Promise.all(promises);
    return {
        props: {
            facts,
        },
    };
}

输入道具

我在这个组件中得到的第一个错误是，TypeScript不知道我的道具是什么类型。这在严格模式下会导致一个错误，因为我们不允许使用任何道具。为了解决这个问题，我只需要为我的道具添加一个类型。

type Fact = {
    id: string;
    text: string;
};
type SSRExampleProps = {
    facts: Fact[];
};
//TS7031: Binding element 'facts' implicitly has an 'any' type.
export default function SSRExample({ facts }: SSRExampleProps) { ... }

现在，来自初始道具的错误，以及试图映射事实数组的错误都消失了。

需要注意的一件事是，我们在这里使用了对象重构，这可能会掩盖props是一个函数参数的事实。你的props将永远是一个包含你提供的任何props的对象，而不是直接参数。

export default function SSRExample({ facts }: { facts: { id: string; text: string }[]}) 
export default function SSRExample(facts: { id: string; text: string }[])

GetXProps

这段代码中的另一个问题是，我们的"getServerSideProps()"函数不知道它的参数是什么。如果你对这个函数不熟悉，请查看我们这里的文章，了解服务器端渲染的介绍。如果你使用getStaticProps或getStaticPaths，情况也会一样。

为了解决这个问题，Next.js为每一种和它们的参数提供了类型。需要注意的一点是，这些类型是针对箭头函数的，所以如果你使用的是正常的函数体，你就必须重构你的函数。

下面是我们更新的 getServerSideProps():

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
    const { count } = query;
    const promises = [...new Array(Number(count))].map(() => fetchFact());
    const facts = await Promise.all(promises);
    return {
        props: {
            facts,
        },
    };
};

还有一个小细节是，我们的 ***fetchFact()***函数没有一个类型。在Next.js函数的交互方式下，这并没有造成任何问题，但如果我希望在其他地方使用该函数，就会遇到问题。由于我们已经为这个事实做了类型，重构这个事实很简单。

function fetchFact(): Promise<Fact> {
    //Just a simple get request which gets back a fact in a JSON object
    return axios
        .get('https://uselessfacts.jsph.pl//random.json?language=en')
        .then((res) => {
            return res.data;
        });
}

状态

将类型添加到一个 ***useState()***钩子添加类型可以通过向函数提供一个类型参数来完成。我对前面的例子进行了重构，只允许点击一个按钮来获取一个额外的事实，并将这些额外的事实存储在状态中。

export default function SSRExample({ facts }: SSRExampleProps) {
    const [extraFacts, setExtraFacts] = useState<Fact[]>([]);
    const getAnotherFact = () => {
        fetchFact().then((fact) => {
            setExtraFacts((oldValue) => [...oldValue, fact]);
        });
    };
    return (
        <div className="flex h-screen w-screen flex-col items-center justify-center bg-white text-3xl text-white">
            <p className="mb-10 rounded bg-neutral-800 p-10">
                Heres some fun facts!
            </p>
            <ul className="flex max-w-2xl flex-col gap-5 rounded bg-neutral-800 p-10 shadow">
                {
                    //TS7031: Binding element 'id' implicitly has an 'any' type.
                    //TS7031: Binding element 'text' implicitly has an 'any' type.
                    [...facts, ...extraFacts].map(({ id, text }) => (
                        <li key={id}>{text}</li>
                    ))
                }
                <li>
                    <button
                        className="rounded bg-neutral-900 p-5 shadow"
                        onClick={() => getAnotherFact()}>
                        More
                    </button>
                </li>
            </ul>
        </div>
    );
}

TypeScript会尽力从你的状态初始值中推断出类型，但对于像这个事实数组这样更复杂的例子，我们必须包括类型参数。

希望这些例子足以帮助你在Next.js项目中开始使用TypeScript。TypeScript是一种非常有用的语言，可以帮助你写出更干净、更正确的代码，更多关于Next.js转换为TypeScript的资料请关注其它相关文章！

加载全部内容