V-logue

[Typescript] 노마드코더 TypeScript로 블록체인 만들기 (2-3) 본문

발자취/Typescript

[Typescript] 노마드코더 TypeScript로 블록체인 만들기 (2-3)

보그 2022. 8. 10. 00:28

Types of TS part Two 

"ReadOnly"

TS에는 readonly 속성을 추가할 수 있다. ReadOnly 속성은 요소들을 읽기전용으로
만들 수 있다. JS는 기본적으로 이런 동작이 존재하지 않는다. 하지만, TS에는 이런 동작을
구현하고 싶다면 구현을 도와주는 보호 장치가 존재한다.
Player type이 name이라는 속성을 가지는데, 이 요소는 ReadOnly가 될 것이다.

type Player = {
    readonly name : Name,
    age? : Age
}

readonly라는 뜻은, 누군가 Player의 name을 수정하려고 시도하면, TS가
수정 하려는 시도를 멈춰준다는 뜻이다. 즉, 수정 불가능하게 읽기 전용으로 만든다.

 

Choi.name = "Kim"

name은 읽기 전용이기 때문에, 수정할 수 없다. 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.
readonly는 다른 방식으로도 활용할 수 있는데,

const numbers: readonly number[] = [1,2,3,4]
numbers.push(1)

위와 같이 코드를 작성했을 때, readonly이기 때문에 numbers라는 array에 push할 수 없지만
readonly 속성을 지우면 push할 수 있게 된다. 또 string도 readonly가 가능하다. 

const names : readonly string[] = ["1", "2", "3"]
names.push("4")

아무것도 push 할 수 없다. filter를 하거나 map을 돌릴 수는 있다. 왜냐하면 이런 배열 함수들은
array의 근본적으로 존재하는 인덱스 값들을 바꾸는 게 아니라 새로운 배열로 만들어주는 것이기 때문
JS에서는 당연하게 readonly속성이 존재하지 않고, 그저 추가할 수 있다.


"Tuple";

Tuple은 array를 생성할 수 있게 한다. 최소한의 길이(minimum_length)을 가져야 하고,
특정위치에 특정 type이 존재해야 한다. 예를들어 한 array를 만든다고 치면,

["Kim" , 28, false];

위 array의 1번쨰 인덱스는 name 2번째는 age 3번째는 승리 여부라고 쳤을 때
첫번째는 String , 두번째는 Number, 세번째는 Boolean이 오게 된다. 위 array를 TS형식으로 바꾸면

const champion: [string, number, boolean] = []

위 코드처럼 배열을 작성하게 되면, 에러가 발생하는데 champion은 3개의 요소를 필요로 하고,
지금은 아무것도 없기 때문이다. TS가 최소 3개의 element가 필요하고 string, number, boolean순서대로
존재하는 배열임을 알리는 것이다.

const champion: [string, number, boolean] = ["Kim", 28, false]

위처럼 작성하면 아무런 문제가 없게된다. 당장 이것을 어떻게 사용할지는 몰라도 이것만 알면된다.
Tuple 형식으로 배열을 작성하면, 정해진 갯수의 요소를 가져야 하고 type을 지정한 값대로 가져야 한다.
위와 같은 사실을 가지면 된다. 가끔 API가 object를 주지 않을 수도 있는데
가끔은 API가 위와 같은 배열을 건네줄 수도 있다. 또한 이렇게 사용하면 TS의 보호장치가 실행된다.

 champion[0] = 1

허용되지 않는다. TS에서 첫번째 인덱스는 항상 string이여야 한다고 선언했기 때문이다.
'number' 형식은 'string' 형식에 할당할 수 없습니다.
원한다면 Tuple과 readonly를 합쳐서 사용할 수도 있는데, 다음과 같다.

const champion: readonly [string, number, boolean] = ["Kim", 28, false]
champion[0] = "Hello world!"

Tuple에 readonly 속성을 할당하면, 읽기 전용 속성이므로 '0'에 할당할 수 없습니다. 라는 에러가 뜬다.
이제 JS에도 있는 type들을 살펴봐야 하는데 먼저

let a : undefined = undefined;
let b : null = null;

가끔 선택적 타입을 사용할 일이 있는데, Optional한 type은 undefined가 될 수도 있다. 예를들어,

type Player2 = {
    age?:number
}

Player2의 age를 보면 (property) age?: number | undefined , number일 수도 undefined일 수도 있다.
?는 일종의 단축키라고 볼 수 있는데 number일수도 undefined일 지도 모르는 그런 것을 가리킨다.


"any" ;

이제 any라는 타입이 있는데, any라는 값을 많이 보게 될텐데 비어있는 값들을 사용하면 그 값은 any가 된다.

let c = []

let c: never[], 'c'이(가) 선언은 되었지만 해당 값이 읽히지는 않았습니다.ts(6133) never = any
any란 TS로부터 빠져나오고 싶을 때 쓰는 타입이다. TS의 보호장치로부터 나오고 싶다면 any를 사용하면 된다.
any는 아무타입이나 사용할 수 있기 때문이다. TS에는 any의 무분별한 사용을 막기 위한 몇가지 규칙이 있다.
any를 사용하는 것을 권장하지 않는데 이건 TS를 탈출하고 JS를 사용하는 것과 마찬가지이기 때문이다.

const d : any[] = [1, 2, 3, 4];
const e : any = true

d + e

위와 같은 멍청한 코드도 any를 사용하면 TS에서 막지않고 허용하게 된다. 이건 좋지 않은 코드다.
하지만, 가끔은 any를 사용할 일도 있다. any는 모든 TS의 보호장치를 비활성화 시킨다.
any를 지운다. any를 무분별하게 사용할 수 없게 된다.

const d : = [1, 2, 3, 4];
const e : = true

d + e

자주쓰지 않는 것을 권장하지만, TS에서 탈출할 수 있는 방법을 알았다는 것은 의미가 있다.
만약 TS를 Escape하고 싶다면, any를 바로 사용하면 된다.

Comments