TypeScript の bool や 인터페이스 を動かしてみる

基本的인 string や number の他にもあるので書く.

参考

手を動かしながら学ぶ TypeScript

by SmartHR

https://www.amazon.co.jp/%E6%89%8B%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%AA%E3%81%8C%E3%82%89%E5%AD%A6%E3%81%B6-TypeScript-%E6%B8%A1%E9%82%89%E6%AF%94%E5%91%82%E6%A8%B9-ebook/dp/B09KZJXDN1

문자열, 숫자

자명.

===

문자열 와 숫자 의 목적어 を作る

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; }'

違う형 のデータを入れると、ちゃんと教えてくれる.

부울 -- '', 0, 정의되지 않음, は入らない。

const isOpen: boolean = true

boolean 型は 참 인가 　거짓 が入る.

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 では 부울 にそれらは入れられない.

配列

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 -- 엄격한 でも 入る

const text: string = 'text'
const undefString: string = undefined
const nullString: string = null

文字列型の変数に undefined と null を入れるCODEを作る

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 で関数かくと
この関数が文字列型で、引数も文字列型で、戻り値も文字列型で、 って三箇所書く必要があ る

しかし、인터페이스 や형 を型引数としてとれば読みやすくなる

https://qiita.com/NeGI1009/items/a98c6a76b0c4f3bc18b3#%E9%96%A2%E6%95%B0%E3%81%AE%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AD%E3%83%BC%E3%83%89

type hoge:string;

export const foo:hoge => { ... }

こんな風に 関数名:関数の型 として使える

읽기 전용

TS 再代入は防げない

しかしこれを設定すれば防げる

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'

읽기 전용입니다.

===

인터페이스 -- 개체 で使える型のProttype。

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>
  );
}

こうやって 인터페이스 使う型たちを定義して
오브제크트(をそ)의 인터페이스 の型にそって作成して
작성사레타오브제크트에 악세스스루.
これが基本的な流れ.

유형 오브제크트

https://zenn.dev/luvmini511/articles/6c6f69481c2d17#2-3.-%E6%8B%A1%E5%BC%B5

基本的な使い方は　인터페이스 と同じ.

中身を追加できない、인터페이스 より厳密な型定義.

MISIDE違うものを後から入れることがないのがbaggを産みにくいらしい.

現在の使使っている