タイプスクリプト/初期設定パラメータ


タイプスクリプト
プログラマによって作成されたテキスト(ソースコード)をプログラムに変換するプロセス.
  • テキストは、コンパイラというプログラムによって翻訳される.
  • パケット化後,抽象構文ツリー(AST)の資料構造に変換する.
  • コンパイラは、ASTを再びバイトコードの低レベル表現に変換する.
  • 変換後のバイトコードは、実行時という別のプログラムによって読み出され、評価され、プログラムが実行されます.
  • タイプスクリプトコンパイラは、バイトコードではなくJavaScriptコードにコードを変換します.その後、JavaScriptコードを実行するようにブラウザ、Node JS(ランタイム環境)を実行することができます.
    タイプスクリプトコンパイラ(TSC)はASTを作成し、結果コードを生成する前にタイプ検証を行います.
    AST(sbstract syntax tree):抽象構文ツリー(または構文ツリー)、プログラミング言語で記述された抽象構文構造ツリー.このツリーの各ノードは、ソースコードで発生する構造を表します.文法抽象とは,実際の文法で表されるすべての情報を詳細に説明しないことを意味する.ASTは、コンパイラが要求する複数のステップを介してプログラムの中間表現として機能する.(出典:ウィキペディア抽象文法ツリー)

  • タイプスクリプトのコンパイルと実行プロセス
    : 1. タイプスクリプトソース(テキスト)->タイプスクリプトAST
  • 型検査器検査AST
  • 型スクリプトAST->JavaScriptソース
  • JavaScriptソース->JavaScript AST
  • AST->バイトコード
  • ランタイムバイトコード評価
  • (jsコンパイラと実行時をjsエンジンというプログラムにマージします.)
  • 開発者の少ないタイプは、プログラムに影響を及ぼさず、タイプを確認するためにのみ使用されます.
  • タイプの置き換えは、既存のプログラムを破壊しません.
  • タイプスクリプトタイプシステム
    :どちらかを選択できます.
  • 開発者はタイプを指定します.(タイプ宣言)
  • 開発者が作成したコードにより、タイプスクリプトはタイプを推定します.
  • // 어노테이션을 이용한 명시적 타입지정
    
    let n:number = 1; // 숫자
    let s:string = 'hello'; // 문자열
    let booleanArray:boolean[] = [true, false]; // 불리언 배열
    
    // 어노테이션을 사용하지 않고, ts가 타입을 추론하도록 함 (js방식)
    let n = 1;
    let s = 'hello';
    let booleanArray = [true, false];
    JavaScriptとtypescriptの違い
  • javascript:実行時にエラーを検出し、タイプを確認します.タイプは動的に決定され(動的タイプバインド;動的タイプバインド;プログラム実行時にデータ型を決定できます)、識別子に割り当てられた値が変化するとタイプも動的に決定されます.
  • typescript:コンパイル時にエラーを検出し、タイプを確認します.tsは他の静的言語と同様(c,java...)タイプの決定方法は静的で、ほとんどはタイプを自動的に変換しません.
  • JavaScriptでは、実行時にエラーが発生し、タイプスクリプトではコンパイル時にエラーが発生し、エラーを事前に検出して解消できます.
    tsconfig.jsonオプション
    // tsconfig.js
    
    {
      "compilerOptions": {
        // tsc가 코드 실행환경에서 이용할수 있는 api(es2015의 여러 내장 함수들을 사용가능하다. ex:document.querySelector...등)
        "lib": ["ES2015"],
        
        // tsc가 코드를 컴파일할 모듈(common js)
        "module": "commonjs",
        
        // 생성된 js 파일을 위치시킬 경로
        "outDir": "dist",
        "sourceMap": true,
        
        // 코드검사시 적용할 엄격성, 코드가 적절히 타입을 갖도록 강제한다
        "strict": true,
        "target": "es2015"
      },
      // tsc가 ts파일을 찾는 경로
      "include": ["src"]
    }

  • tsは、実際の配置時にjsに変換され、配置される.したがって、tsとして開発する過程で、jsを使用して実行結果を理解するには、修正時にファイルを複数回変換する必要があります.この遅延を改善するためにts−nodeを用いることができる.ts-nodeでは、メモリ上でtsを変換し、すぐに実行できます.
  • npm i --save-dev typescript ts-nodeに設定します.パッケージもあります.jsonでは、結果を表示するためにすぐに実行できるように設定します.
    // package.json
    
    // 실행할 파일 경로
    "script": {
    	"start": "ts-node ./src/index.ts"
    }