DEV Community

kaede
kaede

Posted on • Updated on

サバイバル TypeScript サバイバル TypeScript 値・型・変数の概念

参考

https://typescriptbook.jp/reference/values-types-variables

サバイバル TypeScript
値・型・変数

環境構築

typescript はインストール済み

npm i -g ts-node

added 17 packages, and audited 18 packages in 2s
Enter fullscreen mode Exit fullscreen mode

ts-node をグローバルインストールする

作業用の tsnode ディレクトリを作成

app.ts を作って console.log するだけのファイルにする

ts-node app.ts で実行して動けば OK.


主に js との違いで話す

値なしの初期化

const dog;
Enter fullscreen mode Exit fullscreen mode

'const' declarations must be initialized.

js できた値なしの初期化も、ts だとエラーになる。

 存在しないプロパティへのアクセス

const dog = 2
dog.name = 3
Enter fullscreen mode Exit fullscreen mode

これを書くと

Property 'name' does not exist on type '2'.ts(2339)

このエラーが出る。

js では存在しないプロパティにアクセスすると新しく作られるが
ts ではエラーになる。

type animal = {
  name: string,
  age: number,
}

const dog:animal =  {
  name: 'pochi',
  age: 3
}
Enter fullscreen mode Exit fullscreen mode

事前に型を用意して、その型を使っての初期化が必要。


型推論を使った自動型宣言

型を明示しなくても、実は型が入る。

let age = 30 
age = 10
Enter fullscreen mode Exit fullscreen mode

実はこれは number として型が勝手に入っているので数字なら上書きできるが

let age = 30 
age = '10'
Enter fullscreen mode Exit fullscreen mode

こうやって string を入れると

Type 'string' is not assignable to type 'number'.ts(2322)

number の型には入らないとエラーが出る。


静的な型付けとは

https://typescriptbook.jp/reference/values-types-variables/difference-between-type-inference-and-dynamic-typing

静的、難しい言葉だが、先に型を決めて、それ以降は静かなので動かないということらしい。

ts では先ほどのコードはすでに number に定まっているので static に number のままだが

js では型が動くので、string が入ってしまい、dynamic に string に置き換わる。

変更されないのが静的、変更されるのが動的と解釈する。


シングルクォート と ダブルクォートと 文字列リテラル

let ageDoubleQuote = "age"
console.log(typeof ageDoubleQuote);

let ageSingleQuote = 'age'
console.log(typeof ageSingleQuote);

let ageLiteral = `age`
console.log(typeof ageLiteral);
Enter fullscreen mode Exit fullscreen mode

これらは厳密な ts さんだから分けるかと思いきや

ts-node app.ts 
string
string
string
Enter fullscreen mode Exit fullscreen mode

実行すると全部 string になる。

Java は シングルだと char になるらしい。


null は人工的

https://typescriptbook.jp/reference/values-types-variables/undefined-vs-null

存在しないものにアクセスしたときには入れてない undefined が返ってくるが

null は自分から入れない限り返ってくることはないらしい。

ts では null を使わないのが推奨らしい。

null は型がないから分岐ができないからやめて欲しいのだと予測する。


大文字から始まる ラッパーオブジェクト型もあるらしいが ts で使わないべき

https://typescriptbook.jp/reference/values-types-variables/boxing

型として使えるが、計算できないし使うべきではないらしい。


それ単体しか入らないリテラル型

https://typescriptbook.jp/reference/values-types-variables/literal-types

1 位しか処理しないプログラムなど、数値全般ではなくて、決まった数値でしか動作してほしくないプログラムがある

それはリテラル型を使うことで実装できる

let normalOrder:number 
normalOrder = 3059
Enter fullscreen mode Exit fullscreen mode

普通に number だとなんでも数値が入るが

let literalOrder:1 
literalOrder = 3059
Enter fullscreen mode Exit fullscreen mode

リテラル型で指定すると

Type '3059' is not assignable to type '1'.ts(2322)

違う数値は入らなくなる。

let awardRanking : 1 | 2 | 3
awardRanking = 4
Enter fullscreen mode Exit fullscreen mode

Type '4' is not assignable to type '1 | 2 | 3'.ts(2322)

ユニオン型も組み合わせれば、1位から3位までしか入らない表彰変数が作成できる。

let sns : 'FB' | 'TW' | 'ig'
sns = 'yahoo'
Enter fullscreen mode Exit fullscreen mode

Type '"yahoo"' is not assignable to type '"FB" | "TW" | "ig"'.ts(2322)

string でも同じことができる。


optionalName? で | undefined にすると厳密な型へ使えなくなる。

ユニオン型に似たもののに optional がある。

type options = {
  name: string[]
}
Enter fullscreen mode Exit fullscreen mode

これは見ての通り string[] だが

type optionalOptions = {
  optionalName?: string[]
Enter fullscreen mode Exit fullscreen mode

型の名前の最後に ? をつけるとこれは optional になり

与えた型 | undefined として処理される。

なのでこれでゆるくしてしまうと、その値は厳密な string[] で定められている変数には入れることができない。

Top comments (0)