[タイプスクリプト]タイプスクリプトIntro

タイプシステムとタイプスクリプトの理解:DAY ONE
What is Type System?

タイプシステムは、プログラム内のタイプを用いて、記述されたプログラマーの様々な意図が合理的であるかどうか、互いに矛盾しているかどうかを検査するシステムである.

に適用される言語によって、タイプシステムの厳格さは異なる.(一例では、HaskellはTypeScriptよりも厳しい基準を採用している.)

JavaScript vs. TypeScript

タイプのスクリプトをjavascriptと比較すると、要素のタイプがどこで決まるかが最大の違いです.

🟨 JavaScript is ...

動的言語.

の実行時に変数タイプが決定されます.

「実行時に変数を決定する」とは、変数のタイプが割り当てられた値によって決定されることを意味する.

🟦 TypeScript is ...

スタティックタイプ言語(JavaScriptのようにダイナミックタイプを使用することもできます).

型のスクリプトはプログラミング言語であり、コンパイラの傾向もある.

JavaScriptのすべての機能をサポートし、コンパイルに基づいて変数のタイプを決定します.

これは、

コンパイル環境でエラーが検出され、生産性が向上したためである.

🤔 コンパイルは何ですか?
TypeScriptはJavaScript環境では実行できません.これは、JavaScriptを実行するブラウザがタイプスクリプトを理解していないためです.したがって,TypeScriptをJavascriptに変換し,TypeScript上のコンパイルと呼ぶ必要がある.
🟨🟦 例で簡単に理解しよう
JavaScriptは実行時に変数タイプ、タイプスクリプトはコンパイルによって変数タイプ…?😧 隠れて理解できない場合は、簡単な例で理解しましょう.
たとえば、パラメータとして2つの数値を受け入れ、2つの数値の和を返す関数sumを作成します.

// JavaScript
const sum = function(num1, num2) {
  return num1 + num2;
}

数値タイプの値ではなく文字列タイプの値を上記の関数に追加するとどうなりますか?

console.log(sum('10'+'15')); // "1015"

2つの数を入力することで和を返す関数を作成したいのは明らかですが、console.logで実行される関数は文字列結合の関数となっています.別の場所でこの値を使用すると、中央に意図とは異なる値が返され、以降の論理がすべて歪んでしまいます.
では、TypeScriptを使うとどうなるのでしょうか.

const sum = function(num1:number, num2:number) {
  return num1 + num2;
}

console.log(sum('10'+'15')); // Error 발생

Javascriptと同様に、console.log(sum('10'+'15'))を実行中にエラーが発生しました.関数の宣言セクションでは、パラメータのタイプをnumberとします.したがって、異なるタイプのパラメータを入力すると、すぐにエラーが発生します.
これにより、タイプスクリプトによって変数のタイプを指定することで、著者の意図の違いによるエラーを効果的に低減することができる.本当に不思議です
🔍 実行時とコンパイル時
ランタイム(Runtime)とコンパイル時(CompileTime)は、ソフトウェアプログラム開発の2つの異なる階層の違いを記述するための用語である.
プログラムを生成するために,開発者はまずソースコードを記述し,コンパイル(compile)プロセスによってマシンコードに変換して実行可能プログラムとし,これらの編集プロセスをコンパイル時間(CompileTime)と呼ぶ.
コンパイルが完了したプログラムは、実行時と呼ばれるユーザーによって実行されます.
RuntimeエラーとCompilationエラー
実行時とコンパイル時には、2つの異なるタイプのエラーを表すためによく使用されます.
コンパイルエラーとは、コンパイラに理解できないコードがある場合に発生するエラーです.コンパイラは、プログラムの正常なコンパイルを妨げるSyntaxエラーやファイル参照エラーなどの問題がCompilation Errorに相当します.この場合、コンパイラはCompilation Errorを生成し、通常問題を引き起こすソースコード行を示します.
ソースコードが実行可能プログラムにコンパイルされている場合、プログラムの実行中にエラーが発生する可能性があります.たとえば、divideby 0、無限ループなどの予期せぬエラーや競合は、動作を起こさない可能性があります.このように、プログラム実行中に実行できない操作を実行しようとすると、発生したエラーを実行時エラーと呼ぶ.
Typescript does ...

クロスプラットフォームサポート:JavaScriptを実行するすべてのプラットフォームで使用できます.

オブジェクト向け言語:クラス、インタフェース、モジュールなどの強力な機能を提供し、純粋なオブジェクト向けコードを記述することができる.

静的タイプ:静的タイプを使用するため、コードの入力時にエラーを確認できます.(編集またはプラグインのヘルプが必要です.)

DOM制御:JavaScriptのようにDOMを制御することで、要素を追加または削除できます.

最新ECMAScript機能サポート:ES 6または更新されたJavaScript構文をサポートします.

How to use Typescript?

タイプのスクリプトの拡張子は.tsです.

TSは、作成後にタイプスクリプトコンパイラによってJSファイルにコンパイルされて使用される.

Visual StudioコードとWebStormには、内蔵されたタイプのスクリプトサポート機能があります.

には他の設定はありません.ts , tsconfig.jsonなどのスクリプトファイルを識別できます.

コードチェック、迅速な変更、実行、デバッグなど、さまざまな機能を即座に使用できます.

セグメントは、コンパイラを含まないため、npmを使用して個別にインストールする必要があります.

How to start Typescript?

npmパッケージの1つなので、ノードとnpmをインストールする必要があります.

npmを使用してtypescriptコンパイラをインストールする必要があります.

// global
$ npm install -g typescript

// devDependencies
$ npm install -D typescript

// version check
$ tsc --version

パスとして

タイプのスクリプトファイルを指定すると、ファイルがコンパイルされます.

$ tsc ./src/hello.ts

グローバルインストール

タイプのスクリプトでない場合は、tscコマンドではなくnpx tscコマンドを使用します.

$ npx tsc ./src/hello.ts

2tsconfig.jsonファイルを使用して、コンパイルおよびタイプスクリプト環境を調整できます.
VscodeとWebStormを使用する場合、tsconfig.プロジェクトルートパスにjsonファイルを作成すると、エディタは構成オプションを分析します.

$ npx tsc -init

TBC...

tsconfig設定の詳細については、さらに理解して戻ります.

型推論の部分も理解してみましょう.

Reference

https://ahnheejong.name/articles/types-intro/

https://heropy.blog/2020/01/27/typescript/

https://spaghetti-code.tistory.com/35

https://velog.io/@kysung95/TS-TypeScript-%EA%B0%9C%EB%A1%A0-1#typescript%EC%9D%98-%ED%8A%B9%EC%84%B1