TypeScriptを書いてみた。
どうでもいい話
ブログを始めたことで、毎日微々たる量でも勉強しようとする癖がついてきた。
ただ、ブログとしてアウトプットするには、まとまった量と明確なお題が必要な為、
ブログを書く頻度が毎日とはならず、週１程度に落ち着いている。
まあ、その辺、自分用にやるなら適当でいいとは思うのだけれども。
本題
さて、最近はプロジェクトや趣味でVue.jsを使う様にはなってきた。
いい進歩。
ただ、勉強会やカンファレンス等に行くと、
Reactの方が議題として取り上げられている様に個人的に感じる。
やはり、JSを極めるならVueよりもReactなのか？
そろそろReact+TypeScriptを試さなければと感じ始めたこの頃。
一応、Reactは以前勉強し、TSの記述ではないが、
最低限の単一ファイルコンポーネントの様な組み方は抑えていたはず。はず…。
とりあえず、TSで同じ様なことをする為に、
まずは、最低限の環境を作成し、TSの基本文法を抑えていかねばと思う。
環境構築
webpackを利用してもいいのだけれど、TSの基本文法さえ書ければokのため
ミニマムな環境をlight-serverで作ろうと思う。
npm i -D lite-server typescript concurrently
concurrentlyは、ウォッチしながらサーバも立ち上げるみたいな、
コマンドを二重で流したい時にちょっと便利なnodeモジュール。
light-serverを動かすための設定ファイルとして、bs-config.jsonというものを作成する。
中身はこんな感じ。
npm-scriptsはこんな感じ。基本npm run startだけでおｋ。
"scripts": {
},
フォルダ構成も非常にシンプルで、こんな感じ。
srcディレクトリにビルド前のtsファイルがあるのみ。
だって基本文法が書ければいいのだから。
基本文法
boolean, number, string, any
// primitive
const a: boolean = true
const b: number = 1
const c: string = 'hello'
const d: any = null
array
// array
const x: number = [1, 2, 3]
const y: string = ['a', 'b', 'c']
const z: any[] = [null, 1 , 'b']
enum（列挙型）
通常の関数
戻り値の型を宣言の横に書き、引数の方もそれぞれの右に書くだけ。
function f1(): void {
console.log('message')
}
function f2(x: number): string {
return x.toLocaleString() + '円'
}
function f3(x: number, y:string = '円'): string {
return x.toLocaleString() + y
}
allow function
ほぼ通常の関数と同じ。1行で書くときは、少し、あれ？となるが慣れ。
const add = (x: number): number => x+1;
const add2 = (x: number): number => {
return x+1;
}
Class
class A {
private x: number = 1
public y: string = 'a'
}
const classA: A = new A()
と、基本は型を宣言するだけ。
ずっとPHPやJSで生きてきたので、
静的型付け言語には抵抗があるのだが、
最近Go言語の基本文法をやったおかげか、それほど取っ付きにくさはなし。
ジェネリックや共有型などはまだ書いていないし、
簡単なシステムを組んだわけではないだけれど、いける感！
さっそくReactと一緒に使っていこうと思う。
