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