[노마드 리액트 스터디] 8일차 - 타입스크립트(1)

lisoh·2023년 2월 13일

노마드스터디 리액트스터디

노마드 리액트 스터디

목록 보기

1/7

1.5 Why not JavaScript (11:47)

타입스크립트는 왜 만들어졌을까? 왜 존재하지?
왜 사람들이 자바스크립트에서 타입스크립트로 넘어올까?

그건 바로 타입 안정성 때문이야.
이것 때문에 코드에 버그가 엄청 줄어들어.
또 런타임 에러가 줄어들고
생산성도 늘어나게 돼.

런타임 에러가 뭐냐고?

기다려바 일단 자바스크립트가 어떤 언어인지 먼저 알려줄게.

자바스크립트는 엄청 유연한 언어야.
자바스크립트에도 타입이 있지.. 타입스크립트랑 같은 타입이야.
근데 자바스크립트는 유연한 언어라, 에러를 안보여주려고 정말 정말 노력해.
두 가지 다른 타입끼리 더해도, 그냥 해버린다니깐? 타입을 바꾸거나, 배열을 문자열로 바꿔버려서 말이지. 다른 언어는 이걸 허용하지 않는다구.
이게 바로 자바스크립트의 단점 중 첫번째야.
강제로 바르게 사용하도록 통제하지 않는다는 거.

다른 언어는 이것보다는 안정성이 있어서 에러를 내보내주지.
자바스크립트는 이런 확인 과정을 거치지 않는다는 말이야.
코드가 실행되기전에 잘못된 점을 바로잡아야하는거야.(런타임 에러가 나지 않게 말이야.)
그래서 우리가 타입스크립트를 써야하는 거지.

2.0 How Typescript Works (09:21)

자바스크립트는 실수를 피할 수 없게 미리 에러를 내주지 않지.
에러 메시지를 보기엔 최악의 타이밍이야. 런타임 에러지.
타입스크립트는 미리 에러를 알려주기 때문에 사용해야하는거야.

타입스크립트는 프로그래밍 언어야.
strongly typed(강타입)프로그래밍 언어라고 할 수 있지.

브라우저는 자바스크립트만 이해할 수 있고, Node.js는 자바스크립트와 타입스크립트 모두 이해할 수 있어.그래서 타입스크립트를 써서 변환해서 자바스크립트로 쓰면 좋아. 타입스크립트는 자바스크립트로 컴파일되기 전에 에러가 있는지 감지해줘. 만약 에러가 있다면 그 코드는 자바스크립트로 변환되지 않아. 그럼 런타임 에러가 발생하지 않지.

타입스크립트는 타입 추론으로 우리를 보호해줘.

2.1 Implicit Types vs Explicit Types (06:51)

타입스크립트의 타입 시스템을 배울거야.
타입스크립트에서는 변수를 선언할 때 그 변수의 타입을 정해줘야해.
Java도 그렇지.Java는 매우 엄격해.
타입스크립트는 변수의 타입을 명시적으로 정의할 수도 있고, 자바스크립트처럼 변수만 생성하고 넘어가도 돼. 좋은 점은 타입스크립트가 타입을 추론해준다는 거야.

let b : boolean = "x" 
//이건 에러지
let b : boolean = false
//이렇게 쓰면 에러가 안나지.

보통 명시적 표현은 최소한으로 줄이는 게 좋아. 그래야 코드 치는 시간을 줄일 수 있으니깐.

2.2 Types of TS part One (14:26)

타입스크립트의 여러 타입들을 알아보쟈.
number,string,boolean같은 기본 타입들이 있지. 그리고 이런 타입의 array도 있고.

이제 optional타입을 알아보자.

몇몇 사람이 age를 가지고 있지는 않지만 모두가 name을 가지고 있다면?
어떻게 표현해야 할까?

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

if(player.age && player.age<10){
}

변수 뒤에 물음표를 붙여주면 되지.

변수마다 타입이 반복된다면 타입의 alias(별칭)을 정해줄 수도 있어.

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

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

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

이렇게 Player라고 타입을 정해두면 각각의 변수에 간단하게 Player타입을 할당할 수도 있지.

이게 바로 alias타입이야. 이 방법은 아주 좋은 방법이야.
재사용을 가능하게 해주니깐.

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

위의 코드를 보면 name:string이라고 argument의 타입도 정해주고
: Player 라고 리턴의 타입도 정해주었어.
화살표 함수를 쓴다면 화살표 앞에 리턴 타입을 작성해주면 됑.
이렇게 : + 타입 조합으로 타입을 쓰면 만사형통이다 그치.

2.3 Types of TS part Two (11:16)

더 많은 타입을 살펴보자.

우리는 원하면 readonly 속성을 타입에 추가할 수도 있어.
readonly 속성을 사용하면, 그 타입은 더이상 수정할 수 없어.
타입스크립트가 수정을 막을거야.불변성을 가지는거지.
자바스크립트에는 이 속성이 없어.

Tuple은 array를 생성하게 해주는데 최소한의 크기를 가져야 하고, 특정 위치에 특정 타입이 있어야 해.

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

원한다면 Tuple과 Readonly를 합칠 수도 있어.
이건 다 타입스크립트에만 있는거야.

이 다음은 자바스크립트도 가지고 있는 타입이야
null,undefined,any

any는 타입스크립트로부터 빠져나오고 싶을 때 쓰는 타입이야.
되도록 안쓰는걸 추천해. 왜냐하면 이걸 쓰면 자바스크립트가 되버리거든.

2.4 Types of TS part Three (07:21)

타입스크립트에만 존재하는 타입들이야.

unknown
만약 변수의 타입을 모른다면? unknown을 쓰면 돼.
그럼 그 변수의 타입을 확인하는 코드를 써주어야 타입을 건드릴 수 있어.
void
void는 아무것도 return하지 않는 함수를 대상으로 사용해.
never
얘는 함수가 절대 return하지 않을 때 발생해.
에러를 던지거나, 타입이 두 가지 일 수도 있는 상황에 쓸 수 있어.

lisoh

프론트엔드 개발자를 꿈꾸는 개발초보 호랑이

다음 포스트

[노마드 리액트 스터디] 8일차 - 타입스크립트(1)