[JP] TS基本第二『設定』

皆さん、こんばんは！今日は前回説明したTSの利用するにあたって

設定をしていこうと思います！

 

まず、今回の設定にはNPMっていう概念が含めております。

なので、もしNPMの概念を覚えてない方は下記のリンクで繋げておきますので

是非、呼んでみて下さい！エンジニアになりたい方にはお役に立てると思います！

 

さあ！TSの世界に入りましょう！

その前に、前回の概念を簡単に紹介します。

TypeScriptっていう言語はDynamic Typingで自由・柔軟に使えるJavaScriptを

State Typed つまり、データのタイプを自然に定めておいてより、安全性が高いアプリや

Webサイトを作れるようにJSとTypeSystemを利用して使う言語です！

 

　設定やろう！　

 

IDEで使う為には、まずNode.jsをダウンロードする必要があります。

　*注意：Node.jsはできるだけ最新バージョンにして下さい。エラーを発生させる

要因となる危険性があります！　

 

Node.jsの公式サイト

VSC( Visual Stuido Code )を開いて下さい。

後、上のPannelにあるTerminalをクリックし、新しいTerminalを開いて下さい。

 

このように、

npm i -g typescript

を利用してインストールして下さい。

 

ここまで来たら！もうすぐです！！頑張って下さい。

 

まず、どうやってTSを使うのか

TSはブラウザがすぐ読み取りが出来る言語ではありません！

なので、TSをCompileしなくてはいけません！

 

その為に私たちのFolderで新しく

tsconfig.jsonを作ってみましょう！

tsconfigとは、TypeScript fileをJSに変換させる為の設定を定義するFileです。

ReactやVueを使ってる方は既にあるかもしれません！

 

作ってみましょう！

 

tsconfig.json

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 可能
  "module": "commonjs", //どんなImport文法を使うか 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js fileを tsでimportして 使えるのか？ 
  "checkJs": true, // 普通のJSfileでもエラーの確認ができるか？
  "jsx": "preserve", // tsx fileを jsxに どうやって コンパイルするか 'preserve', 'react-native', 'react'
  "declaration": true, //コンパイル時 .d.ts fileも自動に共に生成 (現在使ってるの全てのタイプが定義されてるFile)
  "outFile": "./", //全ての ts Fileを js file一つにコンパイルしてくれる
  //(moduleがnone, amd, systemの時だけ可能)
  
  "outDir": "./", //js file Output 経路を変える
  "rootDir": "./", //ルート経路を変える (js fileのOutput経路に影響を与える)
  "removeComments": true, //コンパイル時コメントを削除

  "strict": true, //strict 関連, noimplicit関連モード全部 Turn on
  "noImplicitAny": true, //anyタイプの禁止可否
  "strictNullChecks": true, //私たちが使うnull, undefined以外のNull, undefinedが発生しエラー
  //（つまり、nullとUndefinedの無意味な参照を防ぐ）
  "strictFunctionTypes": true, //関数parametersのタイプ確認を強くするかどうかの宣言 
  "strictPropertyInitialization": true, //class constructor作成しタイプの確認を強くするかどうかの宣言
  "noImplicitThis": true, //thisキーワードがAnyタイプの場合エラーを出す
  "alwaysStrict": true, //JS "use strict"モード turn on!

  "noUnusedLocals": true, //使われてない地域変数があったらエラーを出す
  "noUnusedParameters": true, //使われてないパラメーターがあったらエラー出す
  "noImplicitReturns": true, //関数でreturn宣言しなかったらエラー出す
  "noFallthroughCasesInSwitch": true, //switch文の誤りのエラー出す 
    }
}

Ref: https://codingapple.com/unit/typescript-tsconfig-json/?id=11721

tsconfig.jsonの中でも主に使われてる項目です！

 

でも、私たちはまだ初心者ですから！基本的な二つだけ使ってみましょう！

}
    "compilerOptions": {

      "target": "esnext",
      "module": "commonjs",
    }
}

さぁ！！セッティングも終わったしコンパイルしてみましょう！

その前にFolder を作って中に

study.ts fileを作ってみましょう！

その後、Terminalにこう入力したら自動にLiveコンパイルをしてくれます。

 

よし！設定は終わりました！次には簡単な文法の紹介をします！

まず、私たちの目標の設定をしてみましょう！

 

皆様の目標をTwitterのコメント欄に残してください！

 

僕のこのブログの目標は自分が立派なエンジニアになること

そして、今回TypeScript勉強日記の目標は３段階です

一つ目、DOMを利用した計算機

二つ目、Reactと合わせて簡単なLiveChat App制作

三つ目、E-commerceサイトを普通のJSではなくこのTSで作る！

っていう目標を持ってやっていこうと思います！

 

それじゃ次の文法編で会いましょう！