プログラムTypescriptでは、tsconfig.jsonでtargetを指定できる。targetには、ES5だったり、ES6、ES2016と、ECMAScriptのバージョンを指定できる。これは、TypescriptをコンパイルしてJavascriptに変換したときに、どのECMSScriptのバージョンにするかを指定できるオプション。普段は、babelを使ってトランスパイルをしているんだけど、Typescriptであれば、babelを使う必要はなくなるんだと思う。※とはいえ、既存のbabelを使ったプロジェクトにTypescriptを導入する際など、共存する方法はあるみたいだけれども。この素晴らしいtargetの機能だが試しに使ってみると、Typescriptに書くECMAScriptはどのバージョンでもいいんだっけ?とか、targetにES5を指定したら、Promiseでもなんでもどんとこいなの?とかいろんな疑問がでてくる。いうことで調べてみることにした。結論Typescriptはtargetに指定されたバージョンにあわせて、コードをトランスパイルしてくれる。トランスパイルしてくれるのは、アロー関数だったり、クラス構文といった言語機能が対象となる。Promiseなどの新しく定義されたオブジェクトや、既存のオブジェクトにメソッドが追加される場合の新しい機能(ランタイム機能)などはpolyfillを自分で追加する必要がある。いえ、Typescriptに使いたいpolyfillを教えてあげないと、そんなオブジェクトorメソッドなんて知らねえと、コンパイル時に怒られるので、libオプションに使いたいpolyfillを教えてあげることが必要。Promiseはちょっとややこしい。※以下のstackoverflowの回答から言語系機能と、ランタイム機能という表現を引用しました。https://stackoverflow.com/questions/51043439/using-latest-javascript-features-in-typescript-such-as-es2018言語系機能とランタイム機能って具体的にどういうことよ、と思ったのですが、試しにコードをトランスパイルする機能を自分で作成することを想像するとちょっと腑に落ちた気がした。Classだったり、アロー関数とかは構文解析することで、ES5の文法規則に乗っ取ってないからトランスパイルしなきゃ!ということはできそうな気がする。オブジェクトにメソッドが存在しているかどうかは、実行される環境がそもそもそのオブジェクトが用意されているか等は実行時じゃないと判別がつかない。これがランタイム機能。実行する環境を知っている作者が、個別にpolyfillを設定してねってことだと思う。polyfillを試してみる環境は以下の通り、Node.jsを使うことにする。3.6.3ここでは、ES2019で追加されたArray.flatをTypescriptで使ってみるとどうなるかを見てみる。ちなみに、Array.flatは自分の環境のv10.15.0では、そのまま使えない。node.greenES2019まずは素直にtargetにES2019を指定する。},}この状態で以下のコードをコンパイルしてみる。4].flat()コンパイルすると、以下のコードが生成される。functionflatというメソッドは存在していないので、そんな関数はないよと実行エラーになる。ES2018次に、flatが存在しないES2018を指定してコンパイルをしてみる。},}こうすると、Arrayにflatなんてメソッドはないよってコンパイルエラーになる。ここで試しに、libに設定を加えArrayにflatがあるんだよとTSに教えあげることにする。},}指定できるlibは、追加したtypescriptのディレクトリlib配下で直接確認できる。ちなみにlibのデフォルト値は、targetによってかわるみたい。DOM,ES5,ScriptHostlibの設定をした後コンパイルを行うと、コンパイルが通った。いえ、これはTypescriptにflatっていうメソッドがあるんだよと教えただけなので、コンパイル後のコードは以下の通りなんの変化もなくNode.jsで実行すると実行時エラーになる。4].flat()polyfillを使うということで、polyfillを設定を行う。pollyfillを提供してくれるcore-jsを追加して読み込む。4].flat()これをコンパイルすると、polyfillの定義が追加され、flatを使うことができた。4].flat();不思議なPromise当初はflatではなくPromiseを使ってtargetをes5にして試していたんだけど、不思議とこれはコンパイルエラーにならない。targetがes5だから、libにはDOM,ES5,ScriptHostが指定されているはず。混乱を極めていたのですが、lib.es5.d.tsを覗いてみると、なんと、Promiseが定義されているじゃありませんか。lib.es5.d.tsにPromiseがあるんだろうかは、こちらのissueが上がっていました。https://github.com/microsoft/TypeScript/issues/16132が、明確な理由がわからず。21:59Typescriptのtargetについて調べてみた関連記事2020-01-04ApacheでCGIを実行する仕組みをのぞいてみる過去にPHPで以下のコードを実行した場合、このprintの結果はど...2019-01-022018年の振り返りあけましておめでとうございます。Reactをさわってみることにした。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。