#1~#2 overview of TypeScript

" 메인 프로젝트 때, TypeScript로 프로젝트를 진행하려 했으나, 이런저런 사정(멘토님의 조언, 생소한 개발 언어 등) 때문에 JavaScript로 진행하였다. 하여 메인 프로젝트가 끝난 지금, 다음 프로젝트땐 TypeScript를 쓰기 위해 공부할 수 있는 적기라고 생각해 TypeScript 공부를 하고 정리해보려고 한다.
TypeScript의 변수 타입부터 차근차근 블로깅할 터이니, 나와 같이 TypeScript를 쓰는데 두려움을 느낀 사람들에게 도움이 되었음 좋겠다."

---

💡 tsc -w

• 브라우저는 JS파일만 읽을 수 있다.
• 그래서 ts 파일 → js 파일로 변환해주는 작업이 필요하다.
  ⇒ 이 과정이 바로 “컴파일”이다.
• 터미널에 tsc -w 입력해두면 자동변환된다.

---

1. 문자타입 :string / 숫자타입 :number 변수

let 이름 :string = "kim"
let 나이 :number = "19"

2. 배열타입 변수 :[]

let 성 :[] = ['kim', 'park']

//이 변수엔 string요소로 이루어진 배열 타입만 가능
let 성 :string[] = ['kim', 'park']

3. 객체타입 변수, 선택적 타입(옵셔널 타입)

let 이름 :{ name : string } = { name : 'park' }

//**옵셔널 타입** : name 속성은 옵션 -> 들어올수도, 아닐 수도
let 이름 :{ name? : string } = { name : 'park' }

//타입 지정할 속성이 많을 경우
type Member = {
	[key :string] : string,
}
let john :Member = {name : "kim", age : "19"}

//* name은 필수로 입력하지만, age 값은 옵셔널할때 === 선택적 변수 설정
const player : {name : string, age? : number} = {
	name : "john"
}

//! age? : number 는 age = number | undefined 랑 같은 의미이다.

4. 다양한 타입 변수 : union type |

//문자 혹은 숫자 타입 변수
let 이름 :string | number = 'kim';

//string으로 이뤄진 배열 혹은 숫자
let 이름 :string[] | number = 'kim';

5. Type alias(별칭) : 일종의 커스텀 custom

//타입을 변수에 담아 사용할 수 있다.
//타입명은 대체로 대문자를 시작으로 만든다 ex.Name
type 내타입 = string | number;

let 이름 :내타입 = 123;

//player 예제를 이어가자면....

type Name = string;
type Age = number;
type player = {
  name : Name,
  age? : Age 
 }

const Nico : player = {
 name : "Nico",
 age : 19
}

const Jun : player = {
 name : "Jun",
}

6. 함수타입 변수

//파라미터로 number를 받고, number를 return하는 함수
function 함수(x :number) :number {
	return x * 2
}

7. 함수의 리턴 타입 정하기

   7-1 . function

//함수를 하나 만들어보자
function playerMaker(name : string) {
  return {
    name
  }
}

//그리고 플레이어 하나를 만들고,
const nico = playerMaker("nico")
//나이를 추가로 넣으면
nico.age = 12 // -> 타입 스크립트는 에러를 띄운다.

⬇️

//함수의 리턴 타입을 정해주자 -> 해당 함수가 위에서 만든 type Player 타입을 리턴함을 명시한다.
function playerMaker(name : string) : Player {
  return {
    name
  }
}

nico.age = 12 // -> 더이상 타입스크립트는 에러를 띄우지 않는다.

7-2. 화살표 함수

const playerMaker = (name : string) : Player => ({
     name //<-- 화살표 함수에서는 단순히 return 문이라면 return 생략 가능
 })

8. 요소에 Readonly 속성 주기

   8-1. 예제1

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

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

const nico = playerMaker("nico");
nico.name = "jun" //--> 에러 발생 : player의 name 속성은 수정이 불가한 readonly 기 때문이다.

8-2. 예제2

const numbers: readonly number[] = [1,2,3,4,5]
numbers.push(6) //--> 에러 발생

9. array에 쓸 수 있는 Tuple 타입

• Tuple 타입은 array를 생성하는데 → 해당 array는 n개의 요소를 가지고 & 특정위치에 - 특정 타입이 있어야함을 명시한다.

//무조건 첫번째 요소는 number, 두번째 요소는 boolean 값
type Member = [number, boolean];
let john :Member = [19, true];

john[0] = true //-> 타입 오류가 난다. [0] 요소는 반드시 number 타입이어야 하므로

10. any 타입

• any 는 비어있는 값들의 기본 설정 값이다

let a = [] // === let a = any[]

• any 는 타입스크립트의 모든 타입 설정을 비활성화시키는 타입으로 → 타입스크립트를 빠져나오고 싶을때 쓰는 타입이다. → 즉, any 를 사용하면 타입스크립트의 타입 보호에서 벗어날 수 있다 (= 나 바보 같은 짓 좀 할게)
  

⇒ 하지만 any 를 쓴다는 건 === 타입스크립트를 쓰는 이유를 잃는 것으로, 타입스크립트를 쓸 필요가 없다. 즉 any를 쓸거면 자바스크립트를 쓰지, 왜 타스를 쓰는가 따위이다.

11. unknown

• 예를 들어 API로부터 응답을 받는데, 응답 바디의 타입을 모른다면 unknown타입을 쓰면 된다.

→ 즉, 변수 타입을 알 수 없을 때 사용한다.

let a: unknown;

//<---- 예제 1 ---->

b = a + 1; //--> 타입 에러 발생 : a의 타입이 무엇인지 알 수 없기 때문

//해결방법
if(typeof a === 'number'){
  b = a + 1;   //정상 작동
}

//<---- 예제 2 ---->

b = a.toUpperCase(); //--> 마찬가지로 타입 에러 발생 : a의 타입이 무엇인지 알 수 없기 때문

//해결방법
if(typeof a === 'string'){
  b = a.toUpperCase();  //정상 작동
}

12. void

• void는 ‘비어있음’을 뜻하며, 아무것도 리턴하지 않는 함수 타입을 말한다.
• void는 따로 지정해주지 않아도, TypeScript에서 자동으로 인식한다.

function hello() { //--> function hello(): void
	console.log("x")
}

13. never

• never는 함수가 절대 리턴하지 않을 때 → 즉 함수에서 예외(exception)가 발생할 때 사용된다.

//<---- 예제 1 ----> 
function hello(): never { 
	return "x" //--> 오류 발생
}

//<---- 예제 2 ---->
 function hello(): never { 
	throw new Error("X") //--> 에러를 발생시키면 정상작동한다.
} 

//<---- 예제 3 ----> 
function hello(name:string|number) { 
	if(typeof name === "string") {
    /* do something...
    -> 이때 name의 타입은 name: string */
  } else if(typeof name === "number") {
    /* do something...
    -> 이때 name의 타입은 name: number */
  } else {
    /* 앞서 지정한 타입 (string, number)일 때 조건문을 모두 작성해주었으므로, 
       해당 else문은 절대 실행되지 않아야 할 코드이다.
       따라서 해당 else문의 name의 타입은 name: never이다 */
   }
}

참고자료

• 코딩애플 : 타입스크립트 쓰는 이유 & 필수 문법 10분 정리
• 노마드코더 : 타입스크립트로 블록체인 만들기

---