基本語法

TypeScript基本上就是有資料型態(type)的JavaScript。有些人認為JavaScript最大的特色就是彈性的資料型態，但也有人認為JavaScript最大的問題也在於彈性的資料型態，當程式越長越大，除錯就會變得困難，所以，對於入門者而言，資料型態帶來不少限制，然而，就像使用元件一樣，當系統複雜時，這些較複雜的語法可以讓程式的維護變得相對容易。

然而，TypeScript只是進行靜態型態檢查，也就是在編譯時進行檢查，事實上是將TypeScript編譯成JavaScript，但是，在編譯過程進行靜態型態檢查，所以，跟其他是在執行時進行型態檢查的做法是不一樣的。

另外，TypeScript要求變數需要事先定義，雖然增加了一些麻煩，但是，也避免了變數名稱不小心打錯的問題，因為JavaScript認定不同名稱的變數就是新的變數，並不會認定是語法錯誤，所以，當然不會告訴我們變數名稱寫錯了。

在JavaScript裡，雖然變數並不需要定義資料型態，但是，有些行為還是會有資料型態的限制，例如，數字才能做數學運算。

當然，TypeScript也保留了一些JavaScript的方便，例如，默認的資料型態。

let num = 0;
num = "1";//會產生語法錯誤

TypeScript會根據預設值去默認變數的資料型態，所以，以上這個敘述等於:

let num:number = 0;

除了使用TypeScript的內建資料型態，也可以利用type或interface自訂資料型態。

type Article = {
  title: string;
  content: string;
  user:string;
  docId: string;
  link: string;
};

Next與TypeScript

如果使用TypeScript的樣板，會產生一個基本的Next頁面:

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="<https://nextjs.org>">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
          <a href="<https://nextjs.org/docs>" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="<https://nextjs.org/learn>" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="<https://github.com/vercel/next.js/tree/canary/examples>"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="<https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app>"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="<https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app>"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

export default Home

會發現與javascript所產生的頁面差別不大，主要差別在於必須定義每個頁面元件的型態，所以，我們就把Home這個元件定義為是一個NextPage，NextPage是next提供的型態，所以，要利用import來採用這個型態。

import **type { NextPage }** from 'next'

const Home**: NextPage** = () => {

接下來，還會有一些地方需要處理型態，例如，useState()，在這裡，我們利用泛型(generic)來定義useState()裡的資料型態是string。

const [time, setTime] = useState**<string>**();