TypeScript #1 [type]

Typescript로 블록체인 만들기 – 노마드 코더 Nomad Coders

Typescript로 블록체인 만들기 – 노마드 코더 Nomad Coders

 

노마더코더의 타입 스크립트 무료 강의와 챌린지를 진행하며 작성하는 글입니다!

 

---

 

 

타입 스크립트는 왜 존재하는가?

:타입 안정성 때문에!

자바스크립트에선 개발자의 코드를 보호하지 않고 개발자의 코드를 최대한 이해하려 했다면! 타입 스크립트에선 최대한 오류를 막기 위해 보호하는 조치가 설정되어 있다.

 

 

타입 스크립트로 작성한 코드는 자바스크립트 코드로 컴파일되는데, 자바스크립트 코드로 컴파일되기 전에 코드를 확인한 후 타입 등에 이상이 없으면 그 후에 컴파일된다. 즉, 타입스크립트 코드에 에러가 있으면 컴파일되지 않는 것이다.

 

 

 

 

타입 스크립트의 데이터 타입

1. 테이터와 변수의 타입을 명시적으로 정의하는 방법(number, string...)

2. 자바스크립트처럼 변수만 생성하는 방법 > 타입 스크립트가 타입을 추론

 

1번의 방법을 살펴보면,

let b : boolean = "x";

 

변수 b의 타입을 boolean으로 정의한 후 string을 할당하면 에러가 난다. 이게 바로 타입 스크립트가 개발자를 보호하는 방법.

 

 

 

2번의 방법을 살펴보면,

let a= "hello";

변수 a를 이렇게 생성한 경우 타입스크립트에서는 a 변수에는 string 할당할 수 있구나 하고 타입을 추론을 한다.

 

그래서

let a = "hello";
a="bye";

이렇게 변수의 값을 바꾸는 것은 문제가 되지 않는다. string 타입에서 string 타입으로 바꿨기 때문에.

 

let a = "hello";
a=1;

하지만 string 타입의 a 변수를 number로 바꾼 경우 자바스크립트는 가능하지만 타입스크립트에서는 에러가 난다. 변수 a는 string 타입이어야 하기 때문이다.

 

타입 스크립트가 타입을 추론하지 못하는 경우에는 명시적으로 정의하는 것이 좋지만, 보통 명시적 표현은 최소한으로 사용하는 것이 좋다. 왜냐하면 코드가 짧아지고 가독성이 좋아지기 때문이다.

예를 들어

let c = [1, 2, 3];
c.push("1");

이런 경우 타입스크립트는 배열 c를 number 배열로 타입을 추론하기 때문에 string인 "1"을 넣을 수 없다. 이렇게 타입 스크립트가 타입을 추론할 수 있는 경우에는 :number라는 명시적 표현을 생략하는 것이 좋다.

 

 

let c : number[] = [];
c.push("1");

반대로 c가 빈 배열이지만 string이 들어갈 수 없도록 number 배열로 만들고 싶다면 명시적 표현을 사용해야 한다! 이런 경우가 아니라면 보통 명시적 표현을 생략한다.

 

 

선택적 변수(optional parameter)

 

player 객체를 만들어서공통적으로 name 값을 가지고 있지만 age는 선택적으로 가지고 있도록 해보자. 

const player : {
	name:string,
	age?:number
} = {
	name: "nico"
}

 

각 key 마다 데이터 타입을 지정해준 후, 선택적으로 값을 가지게 될 key 에는 ?를 붙여주면 된다.

 

이렇게 player를 반복해서 만들어주어야 한다면?

const player1 : {
	name:string,
	age?:number
} = {
	name: "nico"
}

const player2 : {
	name:string,
	age?:number
} = {
	name: "lynn",
    age:12
}

타입을 반복해서 적어야하기 때문에 효율적이지 못하다. 이럴 때 사용하는 것이 별칭이다.

 

 

별칭(alias)

type Player = {
	name:string,
	age?:number
}

const nico : Player = {
	name: "nico"
}

const lynn : Player = {
	name: "lynn",
    age: 12
}

공통적으로 지정되는 타입을 Player라는 별칭으로 만들어주는 것이다.(첫 글자는 대문자)

이제 타입을 정의할 때 일일이 다 쓰는 것이 아니라 별칭으로 정의한 Player를 사용하면 된다! 훨씬 깔끔해졌다.

 

 

함수의 return 값의 타입을 지정하기

player라는 함수를 통해 player를 객체로 만들고 위에서 만든 별칭 Player 타입으로 반환하도록 해보자.

function playerMaker(name: string){
	return{
    	name
    }
}

인자로는 string 타입의 name을 받고 return은 name 이 담긴 객체를 반환한다. 원래는 name: name 이지만 같은 경우 하나로 생략해서 사용할 수 있다.

 

하지만 이것은 name 만 담겨있는 객체를 반환하는 것이지 별칭 Player 타입을 반환하는 것이 아니다. 

const nico = playerMaker("nico");
nico.age = 12

그래서 이렇게 age를 정의할 경우 오류가 생긴다. 지금 palyMaker는 Palyer 가 아니라 name만 담긴 객체를 반환하고 있기 때문에!

 

따라서 return 값의 타입을 정의해주기 위해서는

function playerMaker(name: string) : Player {
	return{
    	name
    }
}

이렇게 소괄호 밖에 타입을 정의해주면 된다. 그러면 위에서 설정한 것처럼 age를 추가해도 오류가 발생하지 않는다.

 

화살표 함수일 땐

cosnt playerMaker = (name: string) : Player => ({name})

이렇게 해주면 된다.

 

readonly 속성

:속성의 값을 변경하지 못하고 읽기 전용으로 만들어주는 것

type Player = {
	readonly name:string,
	age?:number
}

const playerMaker = (name: string) : player => ({name})
const nico = playerMaker("nico")
nico.name = "las" //name 수정 불가능

Player의 name을 readonly로 지정해둔 상태에서 이후에 name을 수정하려고 하면 오류가 난다.

 

cosnt arr : readonly number[] = [1, 2, 3, 4]
arr.push(5) //불가능

다른 타입도 마찬가지로 변수일 때도 readonly를 해주면 이후에 push 등을 통해 값을 추가하지 못한다.

 

tuple

: 특수한 형태의 배열 타입, 배열에 다양한 타입의 아이템이 들어올 수 있도록 지정하는 것

const player: [string, number, boolean] = ["nico", 1, true]

이렇게 각 배열의 타입과 순서를 정해놓는 것이 tuple이다. 이것을 사용하면 정해진 개수의 요소를 가져와야 하는 array를 지정할 수 있다.

 

 

any

:비어있는 값의 기본 값

-typeScript로부터 빠져나오고 싶을 때 사용하는 타입. 즉, 타입 스크립트의 보호장치를 사용하지 않아야 할 때 사용

 

 

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

a + b

원래 타입스크립트의 규칙대로라면 오류가 뜨지만 any를 사용하면 이러한 규칙을 무시하고 진행할 수 있다. 

 

 

 

 

unknown

:변수의 타입을 미리 알지 못할 때, 아직 타입이 확인되지 않았을 때 정의되는 것.  

 

let a: unknown;

let b = a + 1

여기서 b는 오류가 난다. 왜냐하면 a의 타입이 unknown이기 때문에. 따라서 a의 타입을 확인하는 과정이 필요하다.

 

let a: unknown;

if(typeof a === 'number'){
	let b = a + 1
}

 

 

 

void

: 아무것도 return 하지 않는 함수를 대상으로 사용/비어있는 것

 

void는 따로 지정하지 않고 아무것도 return 하지 않는 함수의 타입이 void가 된다.

즉 함수가 아무것도 return 하지 않는다면 void 타입이 되는 것이다.

 

 

 

never

:함수가 절대 return 하지 않을 때 발생

:타입이 두 가지 일수도 있는 상황에 발생

 

function hello(): never{
	throw new Error("xxx")
    }

hello 함수는 return 하지 않고 오류를 발생시키는 함수인데 이럴 때 never를 사용

 

function hello(name:string|number){
if(typeof name === "string"){
	name //string
} else if(typeof name === "number"){
	name //number
} else {
	name //never
}
}

인자의 name을 string이나 number로 지정했기 때문에 타입이 올바르게 들어온다면 else 부분은 실행되서는 안 된다. 그래서 이 부분의 name의 타입이 never이다.