在 Ember.js app 中使用 TypeScript

在 Ember.js app 中使用 TypeScript

ember cli version 3.16

ember-cli-typescript version 3.1.3

生成新的項目

ember new ember-quickstart --yarn && cd ember-quickstart

生成名爲 ember-quickstart 的新 ember 項目，並進入

安裝 typescript 插件

ember install ember-cli-typescript@latest

等待安裝完成後，使用 ember s 啓動項目，如果沒有意外的話，可以看到命令行有一些報錯，項目也是啓動不起來：

造成這個現象的原因應該是 typescript 依賴導致的，這時退出命令，在命令行中執行：

yarn add [email protected]

重新啓動項目。進入 http://localhost:4200/ 即可以看到 ember 的歡迎界面。

使用

生成路由：

ember g route scientist

可以看到生成的是 ts 類型的路由文件。

生成組件：

ember g component people-list

同樣，也是 ts 類型的組件文件。

在已經存在的 ember app 中使用 typescript

操作和上面的大致相同，安裝 ember-cli-typescript@latest ,修改依賴中 typescript 的版本爲 3.7.5。

啓動項目即可以正常運行。

推薦的做法是先從一些無關緊要的地方開始添加類型說明。直到完全掌握類型，再深入到細微的地方，添加相關的類型。

在安裝 typescript 的 Emberjs 項目上進行單元測試

修改 tests/test-helper.js 爲 tests/test-helper.ts .
其文件內容爲：

import Application from "../app"
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import "qunit-dom"
setApplication(Application.create(config.APP));

start();