TS の変数周りまとめ
source link: https://dev.to/kaede_io/ts-nobian-shu-zhou-rimatome-52mi
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
サバイバル 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 の型には入らないとエラーが出る。
静的な型付けとは
静的、難しい言葉だが、先に型を決めて、それ以降は静かなので動かないということらしい。
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 でも同じことができる。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK