現在当社ではフロントエンドを担当をしております。
今回はtsconfig.jsonとESについて記事を書かせて頂きます。長文となりますがよろしければご覧ください。
背景）業務でtsconfig.jsonを修正する機会があったため（現バージョンtarget:ES5ではPromise.allSetteledが使えないが、使いたかったため）。
目的）最新のES(JavaScript の標準化が行われていてその基本となる仕様)の仕様について知り、効率の良い開発と本番でどのバージョンを適用させるかを選定するための参考にする
目次
- tsconfig.jsonとは
- ompilerOptionsの一部オプションとtargetを最適化するメリット
- es2022で使えるようになった新機能
1.tsconfig.jsonとは
Node.js(javaScript実行環境)においてTypeScriptを使えるようにするための設定ファイル
2.compilerOptionsの一部オプションとtargetを最適化するメリット
compilerOptionsの一部オプション
target・・・どのバージョンのJavaScript向けに出力するか決める
lib・・・targetではまだサポートしていないが Node.js で使えるようになっている
API をlibを指定することによって使える。（使いたいtargetには使いたいラ
イブラリがない、でも使いたい時に指定する（指定しなくても良い））
[nodejsとtargetの対応](https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping)
#nodejsのバージョン確認 $node --version $v16.17.0
・nodeのバージョンが16なのでtargetにはES2021が妥当というドキュメントもありましたが（現状全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2022の全機能が使用可能)、Can I Use によると ES6が妥当だということでした。
＊注意事項 ①targetを最新にしても、動作する環境が古いままだと使うことはできない
②新たな記法が生まれるよりも前のtargetに設定すると、新たな記法で書いても
コンパイル時に指定した targetで有効な構文に変換する
targetを最適化するメリット
余計なTranspile(あるプログラミング言語から、他のプログラミング言語に変換す
る)が省かれててコードサイズや実行時間が最適化される
検証）
target es5→es6に変更すると
0.2MiB削減(13.8MiB→13.6MiB)されました。
3.es2022で使えるようになった新機能 *抜粋して紹介
（使いたかったPromise.allSettledはES2020の時点で使用可能になってました）
https://zenn.dev/moneyforward/articles/es2022-whats-new?redirected=1
****`#`を使ってプライベートなフィールドを宣言できる**
TypeScriptのprivate→実行環境ではpublic
# →実行環境でもprivate
// デモ
class MyClass {
// public field
foo = "public field: 寿司";
// private field
#bar = "private field: ラーメン";
// public static field
static qux = "public static field: うどん";
// private static field
static #corge = "private static field: 麻婆豆腐";
// public method
grault() {
return console.log("public method: みかん");
}
// private method
#garply() {
return console.log("private method: ぶどう");
}
// public static method
static waldo() {
return console.log("public static method: みかん");
}
// private static method
static #fred() {
return console.log("private static method: ぶどう");
}
constructor() {
console.log(this.#bar);
console.log(MyClass.#corge);
this.#garply();
MyClass.#fred();
}
}
console.log(MyClass.qux);
MyClass.waldo();
// 実行してしまうとprivateにつきエラー
// console.log(MyClass.#corge);
// MyClass.#fred();
const myInstance = new MyClass();
console.log(myInstance.foo);
myInstance.grault();
// 実行してしまうとprivateにつきエラー
// console.log(MyClass.#bar);
// MyClass.#garply();
補足）
.eslintrcファイルがある場合は
"env" プロパティに"es2021": trueを追加すると
ECMAScript 2021で書かれたコードを静的検証できます。
参考資料）
tsconfig.jsonを設定する | TypeScript入門『サバイバルTypeScript』
https://zenn.dev/moneyforward/articles/es2021-whats-new
https://zenn.dev/moneyforward/articles/es2022-whats-new?redirected=1
【Node.js入門】バージョン管理と確認方法のまとめ！ | 侍エンジニアブログ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
https://gist.github.com/azu/56a0411d69e2fc333d545bfe57933d07
https://www.tohoho-web.com/js/what.htm
