TypeScriptとは？
- JavaScript + 型 = TypeScript
- データ型の指定が可能
- 静的型付け ⇨ 堅牢なコーディングが可能
- 型チェックによるコンパイルエラーが出る
- コードがドキュメント化される
コンパイル/トランスパイル
コンパイルとは？
- あるプログラミング言語で書かれたコードをCPが実行可能な形式に変換すること
トランスパイルとは？
- あるプログラミング言語で書かれたコードを別のプログラミング言語に変換すること
TypeScriptインストール
プロジェクトを初期化する
$ npm init -y
下記のコマンドを実行してインストールします
npm install typescript@5.7.3
トランスパイル設定
tsconfig.json を作成します
npx tsc --init
tsconfig.json を設定します
compilerOptions
outDir
"compilerOptions": {
"outDir": "./dist"
}
include
"include": ["./src/**/*.ts"]
コーディング
srcフォルダを作成する
mkdir ./src
src/index.ts を作成する
touch ./src/index.ts
src/index.ts を編集する
src/index.ts
const message: string = "Hello World!";
// const message: string = 100;
console.log(message);
const userName: string = "John";
console.log(hello(userName));
function hello(name: string): string {
return `こんにちは、${name}さん`;
}
プログラム実行
トランスパイルを実行する
npx tsc
プログラムを実行する
node ./dist/index.js
変数と定数
型注釈とは?
- データ型を明示して指定すること
型推論とは?
- 型注釈が無くても型を推測して決めてくれること
変数宣言
変数宣言キーワード
- var は絶対に使わない
- let は理由がない限り使わない
- const は積極的に使う
| 宣言キーワード | 再代入 | 再宣言 | スコープ |
|---|---|---|---|
| var | 可能 | 可能 | 関数スコープ |
| let | 可能 | 不可 | ブロックスコープ |
| const | 不可 | 不可 | ブロックスコープ |
スコープとは？
- 変数の参照可能な範囲
プリミティブ型
プリミティブとは?
- プログラムで扱う基本的なデータ
文字列型とは?
- 文字列リテラルを表現する型
- 型注釈はstringを使用
文字列リテラルを表現する
- ""を使用する
- ’’を使用する
- ``を使用する
数値型とは?
- 数値リテラルを表現する型
- 型注釈はnumberを使用
数値リテラルを表現する
- 整数を使用する
- 小数を使用する
- 進数を使用する
真偽値型とは?
- 真偽値リテラルを表現する型
- 型注釈はbooleanを使用
真偽値リテラルを表現する
- true(真)を使用する
- false(偽)を使用する
undifined型とは?
- 未定義を表現する型
- 型注釈はundifinedを使用
未定義を表現する
- 値が設定されていない状態
null型とは?
- データなしを表現する型
- 型注釈はnullを使用
データ無しを表現する
- 値が存在していない状態
オブジェクト型
オブジェクトとは?
- プリミティブ以外のもの
- プリミティブを組み合わせて作られる
オブジェクトを作成する
- オブジェクトリテラル{}を用いて作成する
スプレッド構文
- 配列要素を展開する機能
- 配列の新規作成(値コピー)が簡単に行える
- 『...配列』で配列要素を展開する
オブショナルチェーンとは?
- undifined/nullオブジェクトへ安全にアクセスできる
- 参照null/undifinedの場合は短絡評価される
type / interface
typeとは?
- 型定義をするための宣言
- 型エイリアス(Type Alias)と呼ばれる
- 型に別名をつけることができる
interfaceとは?
- 型定義をするための宣言
- オブジェクト型を宣言できる
type / interfaceの比較
- typeとinterfaceでできることはほとんど同じ
- typeの方が安全に使える
- typeの方が表現力が高い
| type | interface | |
|---|---|---|
| 定義可能な型の種類 | 指定無し | オブジェクト |
| 再宣言 | 不可 | 可能(マージされる) |
| 拡張方法 | 交差型 | 継承 |
関数
関数宣言(function declaration)
function 関数名(引数: 型): 戻り値の型 {
処理;
return 返り値;
}
式(Expression)
- 結果(値)を返すもの
- 文の構成要素となるもの
文(Statement)
- 結果(値)を返さないもの
- 文を組み合わせて作る
関数式
- 関数を式として定義したもの
function (引数: 型): 戻り値の型 {
処理;
}
アロー関数式
- 関数式を簡潔に書ける
(引数: 型): 戻り値の型 ＝> {
処理;
}
オプション引数
- 省略可能な引数のこと
- 引数に？をつける
function (引数?: 型) {
処理;
}