學習軌道
/
TypeScript
TypeScript
/
練習
/
哈囉,世界
哈囉,世界

哈囉,世界

教學練習

簡介

「Hello, World!」會帶你開始寫一些 TypeScript,並讓你熟悉 Exercism 的工作流。完成後即可解鎖 TypeScript 軌道的其餘內容。

觀看我們的「Hello, World 簡介」影片,開始動手吧 👇

說明

經典的入門練習。 只要說出「Hello, World!」就可以了。

「Hello, World!」 是學習一門新程式語言或新環境時,傳統上的第一個程式。

目標很簡單:

  • 修改提供的程式碼,讓它產生字串「Hello, World!」。
  • 執行測試套件,並確認它能通過。
  • 送出你的解答,並在網站上查看結果。

如果一切順利,你就能準備好取得第一份真正的練習了。

設定

請依照 TypeScript 的安裝說明,安裝必要的相依套件:

https://exercism.org/docs/tracks/typescript/installation

需求

安裝練習的相依套件:

$ yarn install

讓測試套件通過

用以下指令執行測試:

$ yarn test

在許多測試套件中,除了第一個測試以外,其他測試都會被跳過。

當你讓一個測試通過後,只要把 xit 改成 it,就能取消跳過下一個測試。

教學

本節會一步步帶你解這個練習。

這個練習有兩個檔案:

  • hello-world.ts
  • hello-world.test.ts

第一個檔案是你撰寫程式碼的地方, 第二個則是定義測試的地方。

測試會檢查你的程式碼是否做對的事情。 你不需要從零開始寫出整個測試套件, 但了解測試長什麼樣子、以及它在做什麼,會很有幫助。

打開測試檔 hello-world.test.ts, 裡面只有一個測試:

it('says hello world', () => {
  expect(hello()).toEqual('Hello, World!')
})

現在用命令列執行以下指令來跑測試:

$ yarn test

測試失敗了,這很合理,因為你還沒寫任何程式碼。

失敗訊息看起來像這樣:

    × says hello world (5ms)

  ● Hello World › says hello world

    expect(received).toEqual(expected) // deep equality

    Expected: "Hello, World!"
    Received: "Goodbye, Mars!"

      4 |
      5 |   it('says hello world', () => {
    > 6 |     expect(hello()).toEqual('Hello, World!')
        |                     ^
      7 |   })
      8 |
      9 | })

      at Object.it (hello-world.test.ts:6:32)

這些就是 hello-world.test.ts 檔中可能有問題的程式碼行:

第 6 行:

    expect(hello()).toEqual('Hello, World!')
                    ^

所以問題出在 hello() 這個函式呼叫。 可以看到測試預期輸出是 'Hello, World!',但實際得到的卻是 "Goodbye, Mars!"。

現在來看看 hello-worlds.ts 檔裡的這個函式:

export function hello(): string {
  return 'Goodbye, Mars!'
}

可以看到這個函式回傳了錯誤的字串,這就是失敗的原因。我們把回傳值改掉來修正它:

export function hello(): string {
  return 'Hello, World!'
}

再執行一次測試:

 PASS  ./hello-world.test.ts
  Hello World
    √ says hello world (4ms)

這樣就通過了!

透過 GitHub 編輯 連結會在新視窗或分頁中開啟
TypeScript Exercism

準備好開始 哈囉,世界 了嗎?

註冊 Exercism,透過 108 個練習 和真人引導來學習並精通 TypeScript,全部免費。