note React

TypeScript

GWあと残り4日・・。あっという間です。

今日はTypeScriptやるです。

https://oukayuka.booth.pm/items/1312652

引き続き、この素敵すぎる本。

TypeScript

インストール
npm i -g typescript ts-node
ts-node って何？
  • nodeコマンドでjsファイルを実行すると同じように、ts-nodeでtsファイルを実行できるようにする
  • これないとトランスパイルする作業が必要・・らしい？（って他のサイトでみた）
トランスパイル
  • トランスコンパイル
  • ある言語からある言語へコンパイルする
  • 高水準→低水準ではなく、同じ程度の水準コードに変換する

書籍通りに、ターミナルから REPL使って実行したみたんだけど、エラーが出て動かず。。なぜ？

vscodeのターミナル上でやってみたら、うまく動いたです。なんでだろう。。

 

型

  • number
  • string
  • boolean
  • symbol
  • null
  • undefined

配列

const ary1: number[] = [1,2,3];
console.log(ary1);
const ary2: Array<number>=[1,2,3]
console.log(ary2);

// どっちも同じ（ary1の書き方を使うこと）
$ ts-node test5.ts 
[ 1, 2, 3 ]
[ 1, 2, 3 ]

オブジェクト

const hanako: { name:string,age:number } = { name:'hanako',age:19 };

interface User {
    name: string;
    age?:number; // ?を付けると省略OK
}
const sakura: User = { name:'sakura', age:20 };
const karen: User = { name:'karen'};

// typeはインターフェースに別の名前を付ける
// 型同士の合成で使う
type Person = User;
const taro: Person = { name:'Taro', age:25 };
const jiro: Person = { name:'jiro' }

console.log(hanako);
console.log(sakura);
console.log(karen);
console.log(taro);
console.log(jiro);
$ ts-node test6.ts 
{ name: 'hanako', age: 19 }
{ name: 'sakura', age: 20 }
{ name: 'karen' }
{ name: 'Taro', age: 25 }
{ name: 'jiro' }
型の合成
interface Foo { hoge?: number, fuga: string };
interface Bar { hoge: number };
interface Buz { piyo: string };

type FooBar1 = Foo & Bar;
const test1: FooBar1 = { fuga:'test1', hoge: 10 }
const test2: FooBar1 = { hoge:20, fuga:'test2' }
type FooBar2 = Foo | Bar;
const test3: FooBar2 = { hoge:100, fuga: 'test3' }
const test4: FooBar2 = { hoge: 200 }
type BarFooBuz = Bar &(Foo | Buz);
const test5: BarFooBuz = { fuga:'test5', hoge:300 }

console.log(test1);
console.log(test2);
console.log(test3);
console.log(test4);
console.log(test5);
$ ts-node test7.ts 
{ fuga: 'test1', hoge: 10 }
{ hoge: 20, fuga: 'test2' }
{ hoge: 100, fuga: 'test3' }
{ hoge: 200 }
{ fuga: 'test5', hoge: 300 }

合成タイプ

  • 交差型（Intersection Type）
  • 共用型（Union Type）

constだけど、要素には代入できちゃう

const ary=[1,2,3]
console.log(ary);
ary[1]=10;
console.log(ary);

const obj={ a:1, b:2 }
console.log(obj);
obj.b=1000;
console.log(obj);
$ ts-node test8.ts 
[ 1, 2, 3 ]
[ 1, 10, 3 ]
{ a: 1, b: 2 }
{ a: 1, b: 1000 }
ReadOnly型（TypeScript3.4から）

ReadOnly型はリリースされたばかりだから安定しているかは？

ちゃんとチェックしてくれる！

ReadOnly使わないなら、インデックスを指定して値を上書きしないように気をつける。

→書き換えるのではなく、新しいオブジェクトにコピーすると良い。

const colorObj = { red: 'ff0000', green:'00ff' };
console.log(colorObj);
const newColorObj = { ...colorObj, green: '00ee00', bule:'0000ff'};
console.log(newColorObj);
$ ts-node test10.ts 
{ red: 'ff0000', green: '00ff' }
{ red: 'ff0000', green: '00ee00', bule: '0000ff' }

 

関数

  • 引数は型指定必要
  • 戻り値は型推論される
const add = (n:number, m:number): number => n + m;
console.log(add(1,3));

function subtr(n:number, m:number): number { return n-m; };
console.log(subtr(10,3));

const gree = (): void => { console.log('hi!') };
gree();
$ ts-node test11.ts 
4
7
hi!

const add = (n:number, m:number): number => n + m;
function subtr(n:number, m:number): number { return n-m; };
const gree = (): void => { console.log('hi!') };

引数の型指定、戻り値の型指定

ReturnType
  • 戻り値の型を予め設定しておく？
  • 型を複数関数の戻り値のを共用体型として作りたい場合とか
  • Reduxでよく使う
const gree2 = () => 'おは';
type Gree2 = ReturnType<typeof gree2>;
const gree3 = (): Gree2 => 'おはよ';
console.log(gree2());
console.log(gree3());
$ ts-node test12.ts 
おは
おはよ

tsconfig.json

  • コンパイルの設定を行うファイル
  • Create React Appで生成される
  • 実行ディレクトリにないと親ディレクトリに遡って探しに行く
  • 絶対パスインポート（import { MyComponent } from './componemt/MyComponent';）がサポートされていない

モジュール

npm i --save-dev typescript @types/express
yarn info @types/react-router

この @ マークの書き方って何？

  • TypeScript用に型定義されたJavaScriptパッケージを探す時に使う
  • DefinitlyTypedプロジェクトが提供している（非公式）
  • yarn info @types/パッケージ名 って感じで使う

-note, React