Typescript의 보호 기능들

타입스크립트는 자바스크립트에서 일어날 수 있는 오류들을 사전에 예방하기 위해 다양한 기능을 가지고 있습니다.

01. readonly

readonly는 인풋에서만 사용할 수 있던 속성 아니었습니까?
그런데 타입스크립트도 사용 가능한 것 같습니다.
일단 1일차에서 사용했던 예시 alias인 Animal을 다시 가져옴.
name 키 값에만 readonly 속성을 더해주기만 하면 됩니다.

type Name = string
type Age = number

type Animal = {
	readonly name : Name, //키 앞에 readonly 속성만 붙여준다.
  	age?: Age
} 
const animalMaker = (name:string) : Animal => ({name})

const bear = animalMaker("곰두리")
bear.age = 10

여기서 생성된 객체는 Animal 타입을 가진 객체 bear가 됩니다.

bear = {
	name : '곰두리',
    age : 10
}

여기서 name 값을 바꾼다 하면, 이 코드가 추가됩니다.

bear.name = '곰돌이푸'

그러나 이미 Animal 타입을 정해주었을 때 readonly 속성을 붙여, name은 수정이 불가능한 키가 됩니다.
자바스크립트에서 const보다 더 강력한 기능을 하는거네요.

const numbers = readonly number[] = [1,2,3,4,5]
//이런 식으로 고정된 숫자만 들어간 배열도 만들 수 있다!
numbers.push(7) //이 코드는 오류가 됩니다.

02.Tuple

물론 모든 배열이 같은 타입의 엘리먼트로 이루어진다는 보장도 없습니다.

const hamtori = ["햄쥐",2,false]

이렇게 문자-숫자-불린 값을 가진 배열도 있듯이..
이 배열을 타입스크립트 방식으로 바꾸면,

const hamtori : [string,number,boolean] = ["햄쥐",2,false]

구조 분해 할당이랑 묘하게 비슷합니다.
여튼, 이런 식으로 hamtori라는 배열은 이런 타입을 가졌다!라는 것을 지정해주면

const hamtori : [string,number,boolean] = ["햄쥐",2,false]
hamtori[0] = "쥑쥑이" //a
hamtori[0] = 4 //b

배열의 0번째 인덱스는 무조건 스트링 형태가 되어야하므로..
위의 두 코드에서 오류로 분류되는 코드는 b 주석이 달린 코드입니다.
물론 여기에도 readonly를 붙일 수 있는데,

const hamtori : readonly [string,number,boolean] = ["햄쥐",2,false]
hamtori[0] = "쥑쥑이" //a
hamtori[0] = 4 //b

이렇게 되면 a와 b 주석이 달린 코드는 둘다 사용을 못합니다.

보호기능 안쓸래.

물론 위의 보호 기능들을 거부하는 방법도 있습니다.
any 는 타입스크립트를 벗어나 자바스크립트처럼 쓸 때 사용됩니다.

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

그냥 타입 지정을 할 때 any를 사용하면 됩니다.
변수 a와 b는 결국 아무거나 될 수 있기 때문에, 그 값이 변경될때도 아무거나 될 수 있습니다.

하지만 데이터 타입에 대한 보호를 받으면서 부분적으로 변수를 자유자재로 쓰고 싶을때도 분명 있을텐데, 그럴땐 어떻게 하나요?

unknown을 사용합니다.

let a : unknown; // a의 데이터 타입이 unknown이라 지정만 해줌
let b= a + 1 //삑 오류입니다.

if(typeof a === 'number'){//만약 a의 타입이 숫자라면,
 let b= a + 1
} 
//이건 됩니다.
if(typeof a === 'string'){//만약 a의 타입이 문자라면,
 let b= a.toUpperCase();
} 
//이것도 됩니다.

if문으로 a의 데이터 타입을 지정한다고요? 보면서도 믿겨지지가 않습니다.
unknown이라면서...
지금은 그냥 그런가보다 하고 받아들여야할것 같네요.

void

제가 알고 있던 void는 게임에서나 나올 법한 용어였는데 여기서도 나오네요.
사전적인 의미는 '무효의'입니다.
이럴 때 쓰인다고 합니다.

function nothing(){
	console.log('몽밍맹')
}

무언가를 리턴하지 않고, 콘솔로그로 출력만 하는 함수입니다.
딱히 타입을 지정해줄 것도 없이 void라는 타입으로 분류됩니다.

never

무언가 부정적인 뜻이란 건 확실합니다.

//never 타입이 붙은 채 무언가를 리턴한다면 오류가 됩니다.
function whatIS() : never{
	return 'what'
}

function whatIS() : never{
	throw new Error('Nooooo')
}
//하지만 에러를 생성한다면? 이건 됩니다.

그런데 좀더 실용적으로 사용한다면,

function hello(name: string | number) {//인자 name은 string이나 number가 될 수 있습니다.
    if (typeof name === 'string') {//string이면 name을 리턴
        name
    } else if (typeof name === 'number') {//number면 name을 리턴
        name
    } else {//둘다 아닐 경우, 에러일땐 name의 타입은 never가 됩니다.
        name
    }
}

never 타입은 이후 에러를 핸들링할 때에 많이 다루게 될 것 같네요. 일단은 여기까지 알아둬야할 것 같습니다.