[TS] readonly, Tuple, any와 unknown, void, never 속성 정리

1) Readonly(읽기전용) 속성

클래스, 인터페이스 등 오브젝트로 구현된  컴포넌트의 (property) 속성을  "읽기 전용"으로 선언하는 제어자.

타입스크립트에서 **readonly**는 클래스의 속성이나 변수가 한 번 초기화되면 변경되지 않아야 함을 나타내는 접근 제한자이다.

readonly로 생성된 속성은 생성과 초기화를 동시에 해줄 필요는 없다. 하지만 첫 번째 초기화 이후엔 값을 변경할 수 없다.

type Name = string;
type Age = number;

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

function jsArrowFunc = (name:string) : Student => ({name}) 

const jun = Student("jun") 
jun.age = 12
jun.name = "star" //에러 error

👉 name 속성은 readonly이기 때문에 값을 변경할 수 없다.

const names : readonly string[] = ["1","2"]
names.push(4);  // 에러 error

👉 readonly 배열은 변경할 수 없는 배열이다:

 

자바스크립트에서 readonly는?

자바스크립트에서는 readonly를 사용하지 않는다. JS에서는 그냥 array일 뿐임!

 

2) Tuple : 정해진 개수와 순서에 따라 배열 선언

배열에서 각 위치에 따른 값의 타입을 지정해줄 수 있다.

 

TS 문법

const student : readonly [string,number,boolean] = ["star",1,true]

 

👆이렇게 사용하면 항상 정해진 갯수의 요소를 가져야 하는 배열을 지정할 수 있다. 그리고 배열 값은 우리가 원하는 순서에 맞는 타입을 가져야 한다. (readonly도 사용 가능)

 

JS문법

const student = ["star", 1 ,true];
student[0] = "hi";

 

👆위 타입스크립트로 작성한 코드가 자바스크립에서는 이렇게 보인다. readonly나 Tuple이 없음!

 

API가 객체(object)를 주지 않을 수도 있고, 가끔! API가 ["star",1,true]이런 배열을 줄 수도 있다.

그럴 땐 배열로 들어오는게 무엇인지 문서를 보고 확인해야 한다. 그럼 적어도 [string,number,boolean] 이런식으로 타입을 지정하는데 도움이 된다고 한다.

3) any (모든 타입 허용) 권장X

any는 타입스크립트에서 벗어나고 싶을 때 사용하는데 any는 말그대로 아무거나 타입으로 올 수 있다는 뜻이다. 이 말은 TS의 장점인 타입 안전성이 없다는 것을 뜻한다.

즉, any는 TS의 모든 보호장치를 비활성 시킨다고 보면 된다.

const a : any[] = [1,2,3,4]
const b : any = true
a + b

 

any는 사용하지 않는 것을 권장하는데 가끔은 써야할 때가 생길 수도 있는데 그럴 때 any를 안전하게 사용해야한다.

const a : any[] = [1,2,3,4]
const b = true
a + b //error

 

any를 사용하는 방법이 잘 나와있는 블로그:

https://velog.io/@gene028/Typescript-any를-현명하게-사용하자

 

Type Checker와 소통하기

타입스크립트의 중요포인트는 '타입체커'와 소통하는 것이다.

1) unknown

만약 API로 부터 응답을 받는데 그 응답의 타입을 모른다면 unknown 타입을 사용할 수 있다.

unknown타입은 모든 값을 나타내고 이것은 any타입과 비슷하지만 any보다 unknown이 더 안전하다.

변수의 타입을 미리 알지 못할때 사용할때마다 변수타입 지정을 요구한다.

let a:unknown;

let b = a + 1 //오류, a : Object is of type 'unknown'

//타입 검사
if(typeof a === 'number'){ //if문 범위 안에서 a는 number타입이라 오류없음
	let b = a + 1
}

a.toUpperCase(); // 동작 X (a의 타입을 알지 못함)

if(typeof a === 'string'){ //if문 범위 안에서 a는 string타입으로 지정해서 동작함.
	let b = a.toUpperCase();
}

What do we have to do before using a variable of type unknown?

알 수 없는 유형 변수를 사용하기 전에 무엇을 해야 하나요? ⇒ We have to first check with typeof

먼저 다음 유형을 체크해야한다.

 

2) void

평소대로 함수를 선언하거나 변수를 만들면 유효한 값의 타입이라고 알려준다.

void는 아무것도 return하지 않는 함수이다.(아무것도 없다는 뜻) + 따로 지정할 필요 없다.

function hello(){  //function helllo() : void
	console.log('x')
}
const a = hello();
a.toUpperCase(); //오류: void타입엔 toUpperCase가 없어서 아무것도 리턴하지 않는다.

 

3) never

많이 사용하진 않지만 무엇인지 알아보자. never는 함수가 절대 return하지 않을 때 발생한다.

예를 들어 함수에서 exception(예외)가 발생할 때

function hello():never {
    throw new Error("zzz"). //에러가 없음
}

function temp(name:string | number):never {
    if(typeof name === "string"){
        name
    } else if(typeof name === "number"){ //두 타입(string,number) 모두 확인
        name
    } else {
        name  //이 부분은 never가 될 것임. 절대 실행되지 않아야 한다는 뜻
    }
}

 

📌 (name:string | number)형태는 파라미터를 string이나 number로 지정하는 방식이다.

if 안에서는 string형의 name 반환,

else if 안에서는 number형의 name 반환,

else 안에서는 never형의 name 반환한다.

⇒ 즉, 제대로 인자(name)가 전달되었다면 else로 올 수 없다!

 

가장 많이 사용하는 순서는

• void ✔️ ✔️
• unknown ✔️
• never (거의 사용하지 않는다)