LoginSignup
13
14

More than 5 years have passed since last update.

TypeScript extendsの注意点

Last updated at Posted at 2015-02-06

なれないうちは継承を利用しているとたまに下記のようなエラーをみかけることがあるかと思います。

Uncaught TypeError: Cannot read property 'prototype' of undefined

出力したJSをちゃんと眺めるとわかるのですが、ロードする順番が親より先に子をよんでしまった場合に発生します。

test.ts
//親より先に子がロードされる。
export class childView extends Backbone.View<Backbone.Model>{
}

export class pareView<TModel extends Backbone.Model> extends Backbone.View<TModel>{
}

extendsで指定しているsuperClassが参照できないためprototypeの参照エラーが起きているというわけです。

上下逆の場合はわかりやすいのですが親を別ファイルに定義している場合は気づきにくいです。

別ファイルの場合は子クラスを定義したファイルの上に親ファイルを指定しないと読み込み順が保証されません。

またTypescriptはoutオプションを指定すると依存関係を解決して1ファイルに結合してくれる、というありがたいオプションがあります。

tsc --out result.js ./*.ts

上記のようにすると結合してくれます。

結合される順番が保証されていないので継承するreference pathを指定しないと
子のクラスが先に参照され、さきほどと同じエラーがでる場合があります。

reference pathを指定したほうが無難です。
(指定がなくてもbuildは通ります。)

child.ts
/// <reference path="pare.ts" /> 
//親より先に子がロードされる。
export class childView extends Backbone.View<Backbone.Model>{
}
pare.ts
/// <reference path="../../../extra/d/backbone.d.ts" />
export class pareView<TModel extends Backbone.Model> extends Backbone.View<TModel>{
}
13
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
14