TyepScript基本（初心者向け）

TyepScriptをざっくりまとめた内容になります。

インストール

基本的にAngularなどをインストールするとTypeScriptもインストールされますが、個別にインストールする場合のコマンドです。

npm init                            // pacage.json初期化
npm install --save typescript       // インストール

コマンド

tsconfig.jsonは、TypeScriptからJavaScriptへコンパイルする際に使用するオプションなどを指定するファイルです。
こちらもAngularなどフレームワークを使用する直接コマンドを入力する機会は少ないですが、個別に実行する場合のコマンドです。

npx tsc --init          // tsconfig.jsonを作成　※tsconfig.jsonはコンパイル時の設定

データ型

// 変数名の後「:」をつけてデータ型
// データ型は省略可
let a: boolean = true;
let b: number = 10;
let c: string = ”あああ”;

// 代入する値の型が固定の場合は、データ型を省略可　※この場合、string
let d = "いいい";      

// どんな型でも代入可能
let x: any = 999 ;  // 基本的には使用しない
x = "あああ";

関数定義のデータ型

// 引数にデータ型
// 関数の引数の後に関数の戻り値のデータ型を設定
function func(a: number, b: string) : number {
    retrun a;   // 引数a：数値型を戻すため、関数のデータ型はnumber
}

// 戻り値を返さない場合は、void
function func(a: number, b: string) : void {
    console.log("あああ")
}

配列：Array

// 配列名：データ型の後ろに[]をつける
let strAry: string[] = ["あああ", "いいい", "ううう"];
let numAry: number[] = [111, 222, 333];

オブジェクト：Object

// オブジェクトの場合は、インタフェースを使用して型定義を行う
interface Hoge{
 a:number,
 b:string
}
let obj: Hoge = {a: 10, b: "あああ"}

undefined と nullable

// undefinedを許容
interface HogeA{
    a:number,
    b?:string    // b自体が定義されていない場合でも許容する
}
let aaa: HogeA = {a: 10}

// undefinedを許容
interface HogeB{
    a:number,
    b:string || null   // bは必ず入ってくるがnullの場合もある
}
let bbb: HogeB = {a: 10, b: null}
// let bbb: HogeB = {a: 10}  この場合はシンタックスエラー