TypeScript で型指定をしたが、異なる型定義ファイルを参照してしまう

Question

前提・実現したいこと

Google Apps Script を TypeScript で書くべく、下記のサイトを参考に開発環境を作りました。

clasp が Typescript をサポートした！ - Qiita
https://qiita.com/HeRo/items/f2ce057c6b1456e896ad

$ npm init -y
$ npm install @google/clasp tslint -D 
$ npm install @types/google-apps-script -S
$ tslint --init

発生している問題・エラーメッセージ

tslint が型に関するエラーを吐いてしまいます。

function main() {
  const range: Range = SpreadsheetApp.getActiveSheet().getSelection().getActiveRange();
}

エラーメッセージ

Type 'Range' is missing the following properties from type 'Range': commonAncestorContainer, cloneContents, cloneRange, collapse, and 29 more.

試したこと

VScode の Go to definition で SpreadsheetApp と Range の定義を参照してみました。

SpreadsheetApp は正しく、node_modules/@types/google-apps-script/google-apps-script.spreadsheet.d.ts を参照しているようなのですが、

Range が /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/lib.dom.d.ts
を参照してしまっています。

import で Range を一意に決めてあげれば解消できるかと思いましたが、やり方が今ひとつ分からず、
うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

• VSCode 1.43.0
• Node.js: 12.8.1
• V8: 7.8.279.23-electron.0
• OS: Darwin x64 19.3.0
• tslint: 6.1.0

TypeScript でのプログラミング経験はありますが、結局、型定義についてはよくわからないままでした。

Answer 1

Google Apps Script環境であれば、DOMの型定義ファイルを無効にするのが適当かと思います。

lib

Comments

[allundo]

ご回答ありがとうございます！

まだ実機で色々試せておりませんが、やるべき事は何となく理解できました。

ts → js のコンパイルや deploy は `clasp` が良しなに行ってくれて、そこでのエラーは起きませんでした。
`ts2gas` というモジュールがコンパイルを行ってくれるようです。

VSCode 側の intellisense が出しているエラーな気がしますが、どこを設定すれば良いのでしょうか…？

`$ npm install -g typescript`

とやってしまった覚えがあります…。

[allundo]

clasp/typescript.md at master · google/clasp
https://github.com/google/clasp/blob/master/docs/typescript.md#quickstart

公式の Quickstart にありました。。
> 3. Create a file called tsconfig.json to enable TypeScript features:
```
{
"compilerOptions": {
"lib": ["esnext"],
"experimentalDecorators": true
}
}
```