【TS導入編】超初心者向けTypeScript〜環境構築の補足＆クラスなど〜

前置き

環境構築編で$ npm initを
サラッと書いただけだったり、
「自動コンパイル設定いらないかも❓」
の検証が終わったので
tsconfigのオプションなども含めて
諸々補足をしていきます。
フレームワークなしの前提です。

⬇️以前の記事はこちら
【Nuxt.js】超初心者向けTypeScript〜環境構築編〜
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

参考:
TypeScript初心者が知っておくと嬉しいこと
 TypeScriptの型入門 > asによるダウンキャスト
 TypeScript でクラスを書くための初歩

環境構築の補足

package.jsonの作成

$ npm init

参考サイト:
⬇️なぜpackage.jsonが必要なのか
npmとpackage.json
⬇️作成方法
【初心者向け】NPMとpackage.jsonを概念的に理解する > パッケージの作成

コマンドを実行すると
こんな表示が出ます。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help init for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

package name:

そのままエンターを押します。
そのあとは以下の項目をチェック、
変更があれば書き足してエンター

version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

この内容で良いかと確認が入るので、
OKならエンターすると
package.jsonが作成されます。

lite-serverを使用

lite-server
ターミナルとVSC内のターミナルを
併用すると確認が楽になります✨✌️

インストールが完了すると、
package-lock.json
node_modulesが作成されます。

$ npm install --save-dev lite-server

⬇️--save-devがよく分からない
　という方はこちらを参考にしてください
npm install の --save-dev って何？

package.jsonにこちらを追記

{
  "scripts": {
    "start": "lite-server",
  },
}

{

"scripts": {

"start": "lite-server",

}

tsconfig.jsonの作成

$ tsc --init

オプション

必要なものがあれば使用しましょう。
コンパイルの対象から外すexclude、
コンパイル対象と、
コンパイル後のファイルパスを指定する
rootDir, outDir
デバッグをしやすくするための
sourceMapなどがあります。
SourceMapとは何なのか

そういえばロードマップに
デバッグの基礎知識とか入れてなかった、
初心者がブラウザーでデバッグするための基礎知識

オプションについては
ここが参考になります
tsconfig.jsonの全オプションを理解する（随時追加中）> outDir

{
  "compilerOptions": {
    /* Basic Options */
    "outDir": "",                              /* Redirect output structure to the directory. */
    "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
  },
  "exclude": [
    // "node_modules"                  /* デフォルトで除外、追記必要なし */
  ]
}

{

"compilerOptions": {

/* Basic Options */

"outDir": "", /* Redirect output structure to the directory. */

"rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */

"exclude": [

// "node_modules" /* デフォルトで除外、追記必要なし */

]

}

ターミナルの併用

ターミナルとVSCode内のターミナルを併用します。
どちらのコマンドを割り当ててもOKです⭕️

片方で

$ npm start

もう片方では
このどちらかを使用

$ tsc app.ts // コンパイルしたいファイルを指定
$ tsc -watch // 全てのtsファイルをwatch、自動コンパイルできます。

まとめ

コマンドだけまとめたものです。

$ npm init
$ sudo npm install -g typescript
$ tsc -v
$ npm install --save-dev lite-server
$ tsc --init
// 下記は併用
$ npm start
$ tsc -w

初心者が知っておくと良いこと

クラスとコンストラクタ

TSを使用する上で理解しておくべき
classとconstructor
constructorのサンプルコードを見た方が
classでオブジェクトを生成する、
ということが分かりやすいかもしれません。
classは変数と値を書くところですね。

class Polygon {
  constructor() {
    this.name = 'Polygon';
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

class Polygon {

constructor() {

this.name = 'Polygon';

}

const poly1 = new Polygon();

console.log(poly1.name);

// expected output: "Polygon"

実際にはconstructorの前に
変数の宣言をしておく必要があります。

正しいコードはこちら

class Polygon {
  name: string
  constructor() {
    this.name = 'Polygon'
  }
}

const poly1 = new Polygon()

console.log(poly1.name)

class Polygon {

name: string

constructor() {

this.name = 'Polygon'

}

const poly1 = new Polygon()

console.log(poly1.name)

⬇️こちらの例も見ておくと⭕️
TypeScript初心者が知っておくと嬉しいこと > コンストラクタ

new 演算子については
MDNをご確認ください。

class User {
    name: string;
    //インスタンス化するとこのcounstructor()が実行されてthis.nameにTaroが入る。
    constructor(name: string){
        this.name = name;
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。

class User {

name: string;

//インスタンス化するとこのcounstructor()が実行されてthis.nameにTaroが入る。

constructor(name: string){

this.name = name;

}

var taro = new User("Taro");

console.log(taro.name); //Taroが出力される。

アクセス修飾子

クラス内に定義されたメンバの
アクセス制御を行うことができます。
public > protected > privateの順で
アクセスできる範囲が狭まります。
publicはクラス外からも可
protectedは継承されたクラス内で可
privateはクラス内のみ可

こちらが参考になります。
【TypeScript】3つのアクセス修飾子について簡単に解説【public/private/protected】
仕事ですぐに使えるTypeScript > クラス > アクセス制御

サンプルコードはこちら。
参考サイトの上の方からお借りしています。
voidは返り値がない場合に使用でしたね。
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜 > 書き方 > void

class Fruits {
  public fruitsname: string;

  constructor(fruitsname: string) {
    this.fruitsname = fruitsname;
  }

  public say(): void {
    console.log("私は" + this.fruitsname + "を食べたい")；
  }
}

class Fruits {

public fruitsname: string;

constructor(fruitsname: string) {

this.fruitsname = fruitsname;

}

public say(): void {

console.log("私は" + this.fruitsname + "を食べたい")；

}

まとめ

環境構築がスッキリ整理できました✨🙌
あとは実装で使える知識をどんどん
書いていこうと思います！
次はゲッターとセッターあたりかな…🤔💭