TypeScriptで文字列を配列に変換する方法。（＋エラーが出た時の対処方法）

文字列を配列に変換する

スプレット演算子を用いると文字列を配列に変換できます。
これはJavaScriptでもTypeScriptでも同じです。

//[...文字列]という形がスプレット演算子です。
const str = "konnitiwa";
const array = [...str];
console.log(array);

// split()でも変換できます。
const array2 = str.split("");
console.log(array2);

結果はどちらも同じになります。

[
  'k', 'o', 'n', 'n', 'i', 't', 'i', 'w', 'a'
]

スプレット演算子を使ったほうがスマートですね。

スプレット演算子とは？

スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
(MDNより)

スプレッド構文 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

エラーが出た時。

でもTypeScriptで動かそうとすると何故かエラーが出るときがあります。
これはファイルの拡張子「.ts」を「.js」に変えるとうまく動きます。
何故でしょうか？？？

function stringToArry(str: string): string[] {
  const array = [...str];
  return array;
}

console.log(stringToArry("konnitiwa"));

エラー：

error TS2569: Type 'string' is not an array type or a string type. Use compiler option '--downlevelIteration' to
allow iterating of iterators.

2   const array = [...str];

その対処方法は・・・

プロジェクトのルートで
tsc --init
を実行して tsconfig.jsonファイルを作成します。

compilerOptionsでES6以降を指定します。
これでうまく動くようになります。

{
  "compilerOptions": {
        // "target": "ES3", //(default値)
        // "target": "ES5", // 動かない
        "target": "ES6",    // 動く
        // "target": "ES2015",
        // "target": "ES2016",
        // "target": "ES2017",
        // "target": "ES2018",
        // "target": "ES2019",
        // "target": "ES2020",
        // "target": "ESNEXT",
  }
}

原因は

tsconfig.jsonを作ってないとES3がデフォルト値となっているので、
tsconfig.jsonを作ってcompilerOptionsのES6以降を指定すれば動くようになります。

VSCodeの拡張機能「Code Runner」などで直接「.ts」ファイルを実行していた時に起きたエラーでした。

ほんの少し前までは
tsconfig.jsonを新規作成した時にES5と設定した人も多かったのではないでしょうか？この場合もエラーが出るのでコンパイラオプションを指定するかES6に設定を書き換えることでエラーは出なくなります。

ES5でも動かしたいときは
エラーメッセージにあるように
tsconfig.jsonの設定で
"downlevelIteration": true,
とすることで動くようになります。

古いコンパイラでも、新しい構文を使えるようにするオプションということですね。

CodeWars

Codewars
https://www.codewars.com/

英語のサイトですがTypeScriptで挑戦中です。
VSCodeの拡張機能「Code Runner」を使えばプロジェクトを作ってインストールしなくてもTypeScriptのファイル「*.ts」が動きます。
ブラウザ上で編集するのは大変なので、一旦VSCode上でプログラムを書いてからCodewarsのサイト上に貼り付けて提出しています。

今回のエラーはこの状況でおきたものでした。

code runner

VSCodeでRubyを気軽に実行する環境を作る。 - Qiita
https://qiita.com/masakinihirota/items/ec90086bab86f369fa15

Ruby以外でも、 C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, が特に設定せずに使用可能です、他の言語もコマンドを設定すれば可能です。