在 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();