基本的な string や number の他にもかなりあったので並べていく。
参考
手を動かしながら学ぶ TypeScript
by SmartHR
SECTION-006 基礎的な型
P.26 ~
string, number
P.26
const name: string = 'Aki'
const age: number = 20
このように 変数名: 型 = 値
として型を当てられる。これを型アノテーションというらしい。
number には小数点もマイナスもインフィニティも入る。
object
const dog : {
name: string,
age: number,
} = {
name: 'Aki',
age: '300',
}
オブジェクトはこのように初期値を入れる。
なかなか奇妙な形で慣れないが、よく見ると
const dogAge: number = 3
const dog: { age:number } = { age: 3}
:number のところを {age:number} にして
3 のところを {age:3} にしているだけなのがわかる。
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 で関数かくと
この関数が文字列型で、引数も文字列型で、戻り値も文字列型で、って三箇所書く必要がある
しかし、interface や type を型引数としてとれば読みやすくなる
type hoge:string;
export const foo:hoge => { ... }
こんな風に 関数名:関数の型 として使える
ReadOnly
const baby : {
name: string,
weightGrams: number,
} = {
name: "Taro",
weightGrams: 300,
}
baby.name = 'smile'
型をつけて設定しても、オブジェクトの中身は書き換えられてしまう。
書き換えられないようにしたい時は readonly を 変数の前につければ
上書きできないようにできる。
const woman : {
readonly name: string,
age: number,
} = {
name: 'Aki',
age: 25,
}
woman.age = 80
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'
name は read-only だから再代入できないとエラーになってくれる。
interface -- object で使える型のプロトタイプ。
interface Person {
name: string,
power: number,
}
const kaede: Person = {
name: 'kaede',
power: 70,
}
型のクラスを作って、それを使って変数を定義できる。
function App() {
interface cat {
color: string;
weight: number;
}
const Tama:cat = {
color: 'white',
weight: 5000,
}
return (
<div>
<h2>{Tama.weight}</h2>
</div>
);
}
こうやって interface で使う型たちを定義して
オブジェクトをその interface の型にそって作成して
作成されたオブジェクトにアクセスする。
これが基本的な流れ。
type オブジェクト
https://zenn.dev/luvmini511/articles/6c6f69481c2d17#2-3.-%E6%8B%A1%E5%BC%B5
基本的な使い方は interface と同じ。
中身を追加できない、interface より厳密な型定義。
ミスで違うものを後から入れることがないのがバグを産みにくいらしい。
現在のチームでもこれを使っている
Top comments (0)