typescriptのメモ

typescriptの特徴

Detecting errors in code without running it is referred to as static checking. Determining what’s an error and what’s not based on the kinds of values being operated on is known as static type checking. TypeScript checks a program for errors before execution, and does so based on the kinds of values, it’s a static type checker. For example, the last example above has an error because of the type of obj.

TypeScript: Documentation - TypeScript for the New Programmer

typescriptの特徴はコードを走らせる前からエラーを発見する事ができる。エラーは値の種類に基づいてエラーを発見する。

Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting “compiled” code. This means that once your code is compiled, the resulting plain JS code has no type information.

TypeScript: Documentation - TypeScript for the New Programmer

typescriptはコンパイルされると型を消失し、型のないjavascriptに変化する。

We frequently see the question “Should I learn JavaScript or TypeScript?“. The answer is that you can’t learn TypeScript without learning JavaScript! TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.

TypeScript: Documentation - TypeScript for the New Programmer

javascriptを学べば、typescriptに直結する。

typescriptのインストール方法

npm でインストールすれば良い

>> npm install -g typescript

typescriptをjavascriptに変換する方法

typescriptをインストールすると、tscコマンドが使えるようになる。tscはtypescriptcompileってことでjavascriptに変換するコマンドである。このコマンドを使うとコンパイル対象のファイルが新たにjsバージョンで作成される。

>> tsc コンパイル対象の.tsファイル

typescript

型推論ができないときっていつなのか知りたい。一例：

let test;
// この場合testに値が入ってないので型推論しようとしてもできない。

typescriptの型

// typescriptの型とjavascriptの型は同じ名前の型であっても全く別物と考えること

let hasValue: boolean = true;
let count: number = 10;
let float: number = 5.21;
let negative: number = -3.522;
let single: string = 'hello';
let double: string = "hello";
let back: string = `hello`;

// オブジェクトに型をつける場合
const person: {
    name: string;
    age: number;
} = {
    name: 'Jack',
    age: 21
}

// 配列に型をつける
const fruits: string[] = ['Apple', 'Banana', 'Grape']


// tuple型を使って決まった内容の配列を作る
const book: [string, number, boolean] = ['business', 1500, false];
//このように書くと第一要素はstring,第2要素はnumber...と型を指定した配列を定義する事ができる。


//列挙型をENUMの使って定義する
enum CoffeeSize  {
    SHORT = 'SHORT',
    TALL = 'TALL',
    GRANDE = "GRANDE",
    VENTI = 'VENTI'        
}
//こういう書き方もある
enum CoffeeSize1  {
    SHORT,
    TALL,
    GRANDE,
    VENTI     
}



// union -> 数字も文字列も入れたいときに使う
let unionType: number | string = 10;
unionType.toUpperCase(); // エラー
unionType = `hello`;
unionType.toUpperCase(); // エラーが出ない

// unionの配列を作りたい場合
let unionTypes: (number | string)[] = [10, 'hello'];


// Literal型(特定の決まった値のみを扱う)
let apple: 'apple' = 'apple'; // type'apple'で、'apple'しか入れることができない
apple = 'hello'; // エラー 'apple'のみ受け入れないからエラー


// typeエイリアス
type ClothSize = 'small' | 'medium' | 'large';
let clothSize: ClothSize = "large";
// これは以下のことと同じ
let clothSize1: 'small' | 'medium' | 'large' = 'large';


// 関数
function add(num1: number, num2: number): number { 
    return num1 + num2
}

function sayHello(): void {
    console.log('hello');
}

// callback関数を使う場合
function doubleAndhandle(num: number, cb: (num: number) => number): void {
    const doubleNum = cb(num * 2);

    console.log(num * 2);
}
doubleAndhandle(21, doubleNum => {
    return doubleNum
});

コンパイラの設定方法について

typescriptコンパイラの設定について - diadia

ゲッター、セッターについて

セッターゲッターについて - diadia

インターフェースについて

インターフェース　＝　オブジェクトのみのタイプエイリアス

インターフェイスの定義

interface Human {
    name: string;
    age: number;
}


const developer: Human = {
    name: 'Tom',
    age: 25
}

implements を使用するとクラスに対してインターフェイスを利用する事ができる

class Developer implements Human {
  constructor(public name: string, public age: number);
  greeting(message: string): void {
    return `${message}`;
  }
}