## 背景 [[🎮TypeScript Playground]]には[[📒TSConfigのオプション]]を設定する機能がUIで提供されている。しかし、そこに[[lib (tsconfig)|lib]]を指定するインターフェースは存在しない。 [[target (tsconfig)|target]]や[[module (tsconfig)|module]]だけでなく、[[lib (tsconfig)|lib]]を指定したい場合にどうすればいいか? ## 解決方法 2通りの方法がある。 ### `// @tslib:`を使用する方法 [[🎮TypeScript Playground]]だと使える方法。 ```ts // @lib: dom,esnext ["a", "i", "u"].toReversed(); ``` <button class="playground"><a href="https://www.typescriptlang.org/play?lib=lib.dom.d.ts%2Clib.esnext.d.ts&ts=5.2.2#code/PTAEAEBsEsCMC5QBMD2BbANAUwM4DssAPAFwFgAoAbQCIBDajUa6BpgV2oF0A6YlAJSwA3LACccWJAAoAlAG4KQA">Playground</a></button> [[URL]]にも `lib=lib.dom.d.ts%2Clib.esnext.d.ts` のように[[クエリパラメータ]]が入る。 > [!caution] > `// @lib: dom, esnext`のようにスペースを入れてしまうと`dom`しか認識されない。 > [!caution] > この仕様は公式ドキュメントでは発見できなかったので、いつか消えるリスクがあるかもしれない。 ### [[Triple-Slash Directives]]を使用する方法 [[🎮TypeScript Playground]]以外でも使える方法。 ```ts /// <reference lib="esnext" /> ["a", "i", "u"].toReversed(); ``` <button class="playground"><a href="https://www.typescriptlang.org/play?ts=5.2.2#code/PQgEB4CcFMDNpgOwMbVAGwJYCMC8AiaAZ0WgA8AXfUYAPgFgAoAbXwEN8AaUfTLngK74AugDoKAewBK0AG4Ii0ACYAKAJQBuJkA">Playground</a></button> ## 参考 - [Add UI for setting the lib option in playground · Issue \#136 · microsoft/TypeScript\-Website](https://github.com/microsoft/TypeScript-Website/issues/136)