0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Typescriptを勉強しよう①~コンパイルしよう

Last updated at Posted at 2020-07-31

#Typescriptとは
TypescriptとはMicrosoft社が開発(2012年公開)したJavascriptの進化版言語である。
JavaScriptの欠点を補うために作られた言語で、Webアプリケーション開発、大規模開発での注目が高まっている。
Typescriptで書かれたコードはJavascriptにコンパイル(変換)され、コンパイルされたJavascriptが動作する仕組みである。

#なぜTypescriptを使うのか

  • JavaScriptと同じ環境で動かすことが可能

Typescriptはコンパイルし、JavaScriptに変換できるので、JavaScriptが動かせる環境なら、TypeScriptは動かせる。
そのため、開発環境のハードルは低くい。

  • 型を宣言するためエラーを未然に防げる

Typescriptは静的型システムである。
型が指定できると、変数に違った型のデータが入り、プログラムが動作しないことがある。この変数にはこの型のデータが入ると、その変数に入るデータを予測しやすくなる。
また、Editorによっては型が違うとエラー表示されるため、開発効率が上がる。

  • TypescriptはES5にコンパイルされる。

Javascriptは毎年アップデートされているため、ES6ではブラウザで認識されず表示されないことがあります。ES5(2009年)では基本的にどのブラウザでも認識される。なので、Typescriptで書いたコードは基本どのブラウザでも表示される。

*補足*
####静的型システム
Typescriptがコンパイルされる時に、型がチェックされる。変数の値がNumberなのか、Stringなのかそれ以外なのかすべてチェックされる。これが静的型システムがである。
型が違う場合(本来StringではないといけないところがNumberになっている)エラーが出力される。

#開発環境を整えましょう
###手順

  1. ターミナルを開く *私はWindowsに内蔵されているCMDを使用した

  2. Nodeがインストールされているか確認*node -vを実行すると確認できる
    スクリーンショット (213).png
    →インストールされていない場合 Nodeダウンロード

  3. ターミナル上で npm install -g typescript を実行し、Typescriptのインストールする

  4. Editarを開く*Typescriptのサポートが内蔵されているVscodeがオススメ

  5. ファイルを作製(拡張子はts)

  6. Typescriptを記述する。このように**: string**型を指定する
    let greeting: string = 'こんにちは';
    console.log(greeting);

  7. Typescriptをコンパイルする
    Editor内のターミナルを開く、Vscodeならメニューバーのターミナルの新しいターミナルを選択する

  8. ターミナル上で tsc ファイル名 を実行

##実行前
実行前のindex.ts
スクリーンショット (219).png

##実行後
実行後はindex.jsが生成されました。
スクリーンショット (222).png

#問題発生
スクリーンショット (223).png
tsc : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\user\AppData\Roaming\npm\tsc.ps1 を読み込むことができません。
詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください

###原因 
実行ポリシーが初期値(Restricted)なので、制限を解除する必要がある。

#解決方法
###手順

  1. スタートからWindows PowerShellを開く
  2. PowerShell上でPowerShell Get-ExecutionPolicyを実行すると、現在の設定を確認できる
    恐らく、Restrictedとなっているはず...確認出来たら
  3. Set-ExecutionPolicy RemoteSignedを実行すると、実行ポリシーの変更が表示される
  4. 実行ポリシーの変更
    実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies
    のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170)
    で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか?
    [Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は "N"): Y
    ###Yを入力する
  5. 再度、PowerShell Get-ExecutionPolicy で設定を確認するとRemoteSignedに変更されています

スクリーンショット (225).png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?