プログラミングノート（TypeScript① 設定と基本の型）

はじめに

Udemyの【世界で7万人が受講】Understanding TypeScript 日本語版を参考にTypeScriptを学習したので、プログラミングノート（カンペ用ノート）をします。

設定

インストール

nodejs インストール
https://nodejs.org/ja/download/

TypeScriptインストール
https://www.typescriptlang.org

グローバルなツールとしてインストール
sudo npm install -g typescript

開発環境設定

package.jsonをインストール（依存関係などを定義する）
npm init

開発用ツールとしてサーバを更新するツールをインストール
npm install --save-dev lite-server

package.jsonのscriptsに以下を追加して起動できるようにする
"start":"lite-server"

npm start で起動。

TypeScryptのコンパイル

個別にコンパイル

tsc app.ts
これでJavaScriptファイルが作成される。
lite-serverによりJavaScriptの反映は即座にlocalhostに反映される

自動でコンパイル

tsc app.ts -w //watchモード。 保存すればすぐにコンパイル。

プロジェクト内のTypeScriptファイルをコンパイル

tsc --init //ルートフォルダで実行。プロジェクトがTypeScriptであることを伝える。tsconfig.jsonが作成される。
tsc // プロジェクトのうちtscファイルを全てコンパイルする。

tsconfig.jsonでコンパイルに関する様々な設定が可能。

型

コアな型

number:1,5.3,-10
string: ’Hi’ , ”Hi” , `Hi`
boolean: true, false
object: {age; 30}

その他の型

Array型

const person = {
    name : 'yota',
    age : 30,
    hobbies:['Sports','Cooking'] // Array型
};

Tuple型

要素の数が決まった配列

const person: {
    name : string;
    age : number;
    hobbies: string[];
    role: [number, string];
}={
    name : 'yota',
    age : 30,
    hobbies:['Sports','Cooking'],
    role: [2, 'author']
};

Enum

enum { NEW, OLD } // 列挙型

union型（複数の型をマージする）

let numberOrUndefined: number | undefined;

Alias型（Union型を再利用）

type Combinable = number | string;

リテラル型（コアな型の中でさらに詳細に定義）

type ConversionDescriptor = 'as-number' | 'as-text';

function型

let combineValues: (a: number, b: number) => number;

戻り値を特に設定しない場合はvoidとなる。
何かを返そうとするとundefinedとなる。

function sayHi(): void {
  // ...
}

unknown型、　any型

let userInput: unknown;
// let UserInput : any // any型は型チェックをしないため、if文がなくてもエラーにならない。
let userName: string;

userInput = 5;
userInput = "Max";
// if (typeof userInput === "string") {　　//any型は型チェックをしないが、unknown型は型チェックが必要なのでこれがないとエラーになる
userName = userInput;
// }

never型

戻り値を絶対に返さないことを明示的にする。TypeScriptの型推論ではvoid型になるが、neverを使うことで明示的にできる。

function generateError(message: string, code: number): never {
  throw { message: message, errorCode: code };
}

const result = generateError("エラーが発生しました", 500);
console.log(result);

構文

forで一個ずつ取り出し

for (const hobby of person.hobbies){
    console.log(hobby)
}

関数

callback関数

unction addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

// callback関数resultをconsoleに出力
addAndHandle(10, 20, (result) => {
  console.log(result);
});