This content originally appeared on DEV Community and was authored by カエデ
基本的な string や number の他にもあるので書く。
参考
手を動かしながら学ぶ TypeScript
by SmartHR
===
string, number
自明。
===
string と number の object を作る
const dog : {
name: string,
age: number,
} = {
name: 'Aki',
age: '300',
}
ts での object はこうして初期化ができる。
obj.ts:15:3 - error TS2322: Type 'string' is not assignable to type 'number'.
15 age: '300',
~~~
obj.ts:12:3
12 age: number,
~~~
The expected type comes from property 'age' which is declared here on type '{ name: string; age: number; }'
違う type のデータを入れると、ちゃんと教えてくれる。
===
boolean -- '', 0, undefined, は入らない。
const isOpen: boolean = true
boolean 型は true か false が入る。
tsc bool.ts
bool.ts:3:7 - error TS2322: Type 'string' is not assignable to type 'boolean'.
3 const empty: boolean = ''
~~~~~
bool.ts:4:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.
4 const zero: boolean = 0
~~~~
bool.ts:5:7 - error TS2397: Declaration name conflicts with built-in global identifier 'undefined'.
5 const undefined: boolean = undefined
~~~~~~~~~
bool.ts:5:28 - error TS2448: Block-scoped variable 'undefined' used before its declaration.
5 const undefined: boolean = undefined
~~~~~~~~~
bool.ts:5:7
5 const undefined: boolean = undefined
~~~~~~~~~
'undefined' is declared here.
Found 4 errors.
空の文字列、数値のゼロ、未定義は false と思われがちだが
ts では boolean にそれらは入れられない。
===
配列
const list: number[] = [0, 1, 2, ]
list.push(99)
list.push('text')
配列か配列でないかではなく
数値の配列か、文字列の配列かなどを設定できる。
tsc arr.ts
arr.ts:3:11 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
3 list.push('text')
~~~~~~
数値の配列に文字列を追加するとエラーが出る。
const numList: Array<number> = [1, 2, 3, false, ]
number[] は Array という書き方もできる。
===
null -- strict でも 入る
const text: string = 'text'
const undefString: string = undefined
const nullString: string = null
文字列型の変数に undefined と null を入れるコードを作る
tsconfig.json/compileOptions/strict/strictNullChecks
{
"compilerOptions": {
"target": "es5",
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
"strictNullChecks": true, /* Enable strict null checks. */
ここの設定を true にしていれば入れないはずだが...
通ってしまう。謎。
let text: string = 'text'
text = undefined
text = null
代入でも通ってしまう。
strict が false だと null の vscode の警告は消える。
===
関数
TS で関数かくと
この関数が文字列型で、引数も文字列型で、戻り値も文字列型で、って三箇所書く必要がある
ReadOnly
TS でも型では object の再代入は防げない
しかしこれを設定すれば防げる
const woman : {
readonly name: string,
age: number,
} = {
name: 'Aki',
age: 25,
}
woman.name = 'Teru'
コンパイルすると
tsc ro.ts
ro.ts:20:7 - error TS2540: Cannot assign to 'name' because it is a read-only property.
20 woman.name = 'Teru'
read-only だから再代入できないと出てくれる。
===
interface -- object で使える型のプロトタイプ。
interface Person {
name: string,
power: number,
}
const kaede: Person = {
name: 'kaede',
power: 70,
}
型のクラスを作って、それを使って変数を定義できる。
This content originally appeared on DEV Community and was authored by カエデ
カエデ | Sciencx (2022-02-20T23:13:50+00:00) TS — 型を試す. Retrieved from https://www.scien.cx/2022/02/20/ts-%e5%9e%8b%e3%82%92%e8%a9%a6%e3%81%99/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.