OVERVIEW OF TYPESCRIPT

https://nomadcoders.co/typescript-for-beginners/lobby

How Typescript Works?

- 타입스크립트는 자바스크립트를 생성합니다.

• 브라우저는 타입스크립트가 아닌 자바스크립트를 이해하기 때문에 TS -> JS로의 컴파일이 일어납니다.
• 사소한 실수들은 컴파일 단계에서 확인할 수 있습니다

타입스크립트에서는 다음의 에러가 컴파일 전에 뜨네요!

Implicit Types vs Explicit Types

- 타입스크립트에서는 두가지 접근방식을 결합했습니다

데이터와 변수의 타입을 명시적(explicit)으로 정의할 수도 있고, 자바스크립트처럼 변수만 생성(implicit)하고 넘어가도 무관합니다.(이 경우에는 타입스크립트에서 타입을 추론해줍니다.)

Types of TS part One

1. 기본 타입

	let a : number[] = [1,2];
    let b : string[] = ["il,"1"];
    let c : boolean[] = [true];

명시적 표현은 최소로 사용하되 타입스크립트에서 타입 추론이 불가할 경우(빈 배열)에는 명시적으로 정의해줍니다.

2. 함수에서 선택적으로 인자 받기

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

여기서 age?의 타입은 number | undefined로 선언됩니다.

3. 재사용

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

const alice : Player = {
	name : "Alice"
}

const max : Player = {
	name : "max"
    age  : 27
}

type의 첫번째 글자는 대문자로!

그렇다면 함수에서는 어떻게 사용할까요?

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

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

const alice = playerMaker("alice")
alice.age = 25

함수에서 뒤에 타입을 설정함으로써 return 타입 설정이 가능합니다.

Types of TS part Two

1. readonly

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

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

const alice = playerMaker("alice")
alice.age = 25

여기서 alice.name을 하게 된다면 readonly 속성을 건드리는 것이기 에러가 뜨게 됩니다. (수정불가)

변수에서도 예시를 들어볼까요?

const numbers : readonly number[] = [1,2,3,4]
numbers.push(1) -> 여기서 에러 발생!

readonly를 통해 타입스크립트의 불변성을 유지할 수 있게 됩니다.

2. tuple

tuple은 array를 생성할 수 있게 하는데 최소한의 길이를 가지며
특정 위치에 특정 타입이 들어가야 합니다.

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

3. any

타입스크립트 싫어!!
까지는 아니고 typescript로부터 벗어나고 싶을 때 any를 사용합니다.
any는 어떤 타입이든지 될 수 있기 때문에 사용을 지양하는 것이 좋습니다.

Types of TS part Three

1. unknown

어떤 작업을 하기 위해서 unknown의 키워드가 어떤 타입인지 확인을 하는 절차를 통해 타입스크립트로부터 보호를 받습니다.

let a : unknown;

if(typeof a === number){
	let b = a + 1
}
if(typeof a === string){
	let b = a.toUppercase
}

2. void

아무것도 return하지 않는 함수를 대상으로 사용됩니다.

function hello(){
	console.log('x')
}

위의 예시에서 함수 hello()의 return 타입은 void로 처리가 됩니다.

3. never

never는 함수가 exception을 처리하는 등 절대 return하지 않을 때 발생합니다. return을 하지 않고 오류를 발생시키는 함수에서 사용됩니다.

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