search

MofuMofu2 / typescript-sandbox

MIT License
0 stars 0 forks source link

JavaScriptをtscに通せないのか試す #6

Closed MofuMofu2 closed 2 years ago

MofuMofu2 commented 2 years ago

概要

3 のコードをTypeScriptに置き換えるため、tscに通すとどうなるか試す。

※JavaScriptのプロジェクトにTypeScriptを導入したい

MofuMofu2 commented 2 years ago

package.jsonの意味

main: JavaScriptのエントリーポイント。ここを初めに読み込む。 https://docs.npmjs.com/cli/v7/configuring-npm/package-json#main

type: modules => モジュールimport/exportとして読み込む type: scripts => JavaScriptとして読み込む。import/exportは利用不可 ※エラーとなる プロを目指す人のためのTypeScript入門 7 コラム34

MofuMofu2 commented 2 years ago

TypeScriptインストール

tsc利用のためTypeScriptをインストール --save-devはビルド・開発時に必要なパッケージとしてインストールする。

$ npm install --save-dev typescript @types/node
npm WARN idealTree Removing dependencies.typescript in favor of devDependencies.typescript

changed 1 package, and audited 338 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
MofuMofu2 commented 2 years ago

TypeScript設定

テキトーに設定したのでやり直す

npxで（node_modules内の）ライブラリのコマンドを起動する

$ npx tsc --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig
MofuMofu2 commented 2 years ago

tscでJavaScriptファイルを許可する

JavaScript Supportセクションの対象行を変更する。allowJsでJavaScriptを許可し、checkJsで型をチェックする。

    /* JavaScript Support */
    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
MofuMofu2 commented 2 years ago

Node.jsの対応表を参考にTypeScript → JavaScriptを可能な限り最新版にする https://node.green/

mofumofu at mofunoMacBook-Air in ~/git/silly-story-generator (feature/6-transpile-typescript)
$ node -v
v18.4.0

ES2016 → ES2022に変更

    /* Language and Environment */
    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
MofuMofu2 commented 2 years ago

古いバージョンのNode.jsはmodule: commonjsしかだめだった。※requireで呼び出す仕組み。 それをesnextにするとトランスパイルは必要という形になる。

    /* Modules */
    "module": "esnext",                                /* Specify what module code is generated. */
MofuMofu2 commented 2 years ago

JavaScriptでtscを通してみる

JavaScriptファイルなのでallowJsオプションは？と聞かれた。 allowJs: trueにはしている 🤔 

mofumofu at mofunoMacBook-Air in ~/git/silly-story-generator (feature/6-transpile-typescript)
$ npx tsc src/main.js
error TS6504: File 'src/main.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?
  The file is in the program because:
    Root file specified for compilation

Found 1 error.

似たような事例がないか TS6504で検索してみる。 https://stackoverflow.com/questions/60478889/running-tsc-command-does-nothing-ignores-tsconfig-file

When input files are specified on the command line, tsconfig.json files are ignored.

つまりファイル指定するとtsconfig.jsonが無視される https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

mofumofu at mofunoMacBook-Air in ~/git/silly-story-generator (feature/6-transpile-typescript)
$ npx tsc
src/main.js:5:31 - error TS7006: Parameter 'array' implicitly has an 'any' type.

5 function randomValueFromArray(array) {
                                ~~~~~

src/main.js:20:1 - error TS2531: Object is possibly 'null'.

20 randomize.addEventListener('click', result);
   ~~~~~~~~~

src/main.js:33:6 - error TS2531: Object is possibly 'null'.

33   if(customName.value !== '') {
        ~~~~~~~~~~

src/main.js:33:17 - error TS2339: Property 'value' does not exist on type 'HTMLElement'.

33   if(customName.value !== '') {
                   ~~~~~

src/main.js:34:18 - error TS2531: Object is possibly 'null'.

34     const name = customName.value;
                    ~~~~~~~~~~

src/main.js:34:29 - error TS2339: Property 'value' does not exist on type 'HTMLElement'.

34     const name = customName.value;
                               ~~~~~

src/main.js:38:6 - error TS2531: Object is possibly 'null'.

38   if(document.getElementById("uk").checked) {
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/main.js:38:36 - error TS2339: Property 'checked' does not exist on type 'HTMLElement'.

38   if(document.getElementById("uk").checked) {
                                      ~~~~~~~

src/main.js:46:3 - error TS2531: Object is possibly 'null'.

46   story.textContent = replaceZ;
     ~~~~~

src/main.js:47:3 - error TS2531: Object is possibly 'null'.

47   story.style.visibility = 'visible';
     ~~~~~

src/main.js:47:9 - error TS2339: Property 'style' does not exist on type 'Element'.

47   story.style.visibility = 'visible';
           ~~~~~

Found 11 errors in the same file, starting at: src/main.js:5

対象を指定するなら tsconfigの内容をオプションの引数で渡し、そうでなければtsconfigの"include"で対象を指定した方がよい。

MofuMofu2 commented 2 years ago

TypeScriptにトランスパイルできないものか試す

トランスパイルではなく、ファイル名を .jsから .tsに変更すればよい。 ビルドツールをセットアップしてコンパイルすれば良い。

もしエラーが出る場合、 noEmitOnError を追加して無視もできる。 https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#webpack

MofuMofu2 commented 2 years ago

ts-migrateというライブラリでマイグレーションするという手もある https://qiita.com/itouoti/items/d9b88dbe3f563e457527