Typescript 학습 1일차

LSA·2022년 5월 9일

typescript

Pre-study

목록 보기

17/18

기업협업 프로젝트를 위해 저는 typescript라는 것과 마주해야 했습니다.
그러니까, 프론트엔드 개발자가 되려면 리액트 하나로는 부족했던 것입니다.

지금 와서 후회해봤자 달라질 건 없습니다.

그래서 타입스크립트 강의를 노마드 코더에서 들었습니다.
고릴라 지능인 제가 들어도 어느정도 이해가 가능한 것을 보면, 정말 설명을 잘 해주는 분이라고 생각됩니다.

왜 필요한가?

자바스크립트는 너무나 유연한 프로그래밍 언어이기 때문에 오류를 사전에 잡아주지 않습니다. 때문에 타입스크립트를 사용한다고 합니다.

const one = 1;
one.hello();

이건 자바스크립트를 아는 사람이라면 '이게 뭔 소린가' 싶은 코드입니다.
hello라는 함수도 없는데 냅다 함수를 실행해버리니...
물론 이 코드의 결과가 오류라는건 두말할 것 없지만, 타입스크립트는 해당 코드를 실행 전부터 막아줍니다. 글로서는 체감이 잘 안되지만, 브라우저를 한번 띄우고 콘솔창을 열어 오류를 발견한다는 것과 브라우저를 띄우지 않고서도 작성 시 곧바로 오류를 발견하는 것은 시간차가 꽤 크기 때문입니다.

Typescript의 기본

data type 정해주기

데이터 타입을 정해줄 수 있음

let a : number = 1
let b : string = "abcd"
let c : boolean = false
let stringArray : string[] = ['a','b','c','d'] 
//이런 식으로 문자열로만 이루어진 스트링을 만들 수 있다.

 // number와 boolean을 더하라는 뜬금없는 코드
console.log(a + c)
//이런 코드들은 타입스크립트에서 사전에 막아줄 수 있음

Alias 정해주기

만약 형태가 비슷한 여러 개의 객체를 만든다 할 때,

const doggy : { 
	name : string,//name은 반드시 string 타입
  	age: number //age는 반드시 number 타입
} = {
	name : '망뭉이',
  	age : 5 
}
//만약 이런 오브젝트 타입이, age 값이 없는 채로 여러 개 만들어져야 한다면?
const kitty : { 
	name : string,//name은 반드시 string 타입
  	age: number //age는 반드시 number 타입
} = {
	name : '야옹이'
  //age라는 값이 없으므로 오류!
}

const bunny : { 
	name : string,//name은 반드시 string 타입
  	age: number //age는 반드시 number 타입
} = {
	name : '토깽이',
  	age : 1
}

이런 식으로 하나하나 만들면 정말 힘들어요.
그래서 Alias라는 class와 비슷한 역할을 하는 친구를 하나 만들어줍니다.(말하자면 설계도인 셈)

type Animal = {
	name : string,
  	age?:number //뒤에 ?을 뭍이면 age는 숫자이거나, undefined가 될 수 있다.
} 

const doggy : Animal = {
	name : '망뭉이',
  	age : 5 
}
const kitty : Animal = {
	name : '야옹이'
}

const bunny : Animal = {
	name : '토깽이',
  	age : 1
}

편하다.
물론 변수처럼 사용하는 앨리어스도 가능합니다.

// 넘버 형태를 앨리어스화!
type Name = string
type Age = number

type Animal = {
	name : Name, //앨리어스화된 데이터 타입이 지정된다.
  	age?: Age
} 

const doggy : Animal = {
	name : '망뭉이',
  	age : 5 
}
const kitty : Animal = {
	name : '야옹이'
}

const bunny : Animal = {
	name : '토깽이',
  	age : 1
}

함수에서 타입 정해주기

function animalMaker(name:string){ //인수는 무조건 스트링 형태로 들어와야 한다!
  return {
  	name
  }
}

위의 객체를 지정해 준 상태에서, 이런 함수를 만들어주면 무조건 name이라는 키값을 가진 오브젝트만 반환해줍니다.

function animalMaker(name:string) : Animal { //함수에 Animal이라는 Alias 타입을 지정해주면?
  return {
  	name
  }
}

위에서 지정한 Animal 앨리어스와 같은 형태의 객체를 반환시킬 수 있습니다!

화살표 함수일땐 어떻게 작성할까?

const animalMaker = (name:string) : Animal => ({name})

훨씬 더 간단해졌습니다.
리액트에서 return되는 태그들을 ()로 감싸주는것처럼, 바깥에 소괄호가 생겼네요.
어쨌든 중요한 것은, : type 이라는 형식을 익히는 것이군요.

그러면 이 상태에서 다시 새 객체를 만들어봅니다.

type Name = string
type Age = number

type Animal = {
	name : Name, 
  	age?: Age
} 
const animalMaker = (name:string) : Animal => ({name})

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

먼저 Animal이라는 템플릿의 객체를 만들어줍니다. name에는 반드시 문자열이 들어가고,age에는 숫자 혹은 undefined입니다.
함수 animalMaker는 인자를 하나 받는데, 이 인자는 name이라는 키값을 가지고 있습니다. 이 키값도 반드시 문자여야겠죠? 그리고 이렇게 만들어진 객체는 Animal 객체와 동일한 형태입니다.
이 함수는 인자로 받은 name 값을 포함한 객체로 리턴됩니다.
변수 bear는 animalMaker함수로 만들어지는 객체입니다. 인자로는 '곰두리'를 받았어요.
그래서 bear = { name: '곰두리' }가 되겠네요.
bear 객체에 10이라는 값을 가진 age 프로퍼티를 넣어줍니다.
결과적으로, bear = { name: '곰두리',age : 10 } 이 됩니다.