Typescript
이전에 공부를 진행했지만 필요한 부분만 공부를 진행했고 약간 알음알음 type들을 찾아가며 사용했지만 뭔가 확실하게 알아가고 싶은 부분이 있어 정식적으로 공부를 한번 하고 프로젝트를 시작해야 될 것 같다.
컴파일하기
파일 경로에서 터미널을 연채로
tsc 파일명 을 입력하면 잠시 뒤 같은 이름의 js파일이 생성된다
javascript로 컴파일 된 파일이 생성되는 것이다.
애너테이션: 원시
기본적으로 변수 이름 뒤에 : 콜론을 적고 타입을 적어주면 된다
const myName : string = "lee"이런식으로!
string: 텍스트 타입이다 입력시 모두 소문자이니 주의하자number: 정수형과, 부동형을 다루는 타입 즉 숫자boolean: true와 false 값을 다루는 타입
이런 원시 기본값 말고 [] 배열이라던가 객체, 함수등 여려가지 있지만 차근차근 살펴보자.
또한 우리가 TS를 작성하며 대부분의 경우는 애너테이션을 전부 적어야 할 필요는 없다.
이는 타입 추론 때문인데
let x =27 일경우 TS는 따로 number라고 지정해주지 않아도 스스로 x 가 숫자인 것을 추론해낸다.
하지만 추론을 믿고 애너테이션을 안쓴다기보단 필요한 부분도 간혹 있는데 초기화와 별도로 변수를 선언하는 경우이다
const movies = ["Arrival", "The Thing", "Aliens", "Amadeus"]
let foundMovie; // 현재 무슨타입인지 알기 어려움
for(let movie of movies){
if(movie === "Amadeus"){
foundMovie = "Amadeus";
}
}이 경우 2번째 줄의 foundMovie에 타입추론을 확인하자 any가 등장하게 된다.
아래 for문을 통해 문자열로 설정했지만 처음에 설정된 것처럼 any타입이 된다. 그렇기에 foundMovie를 이후 함수처럼 실행하거나 다른 값으로 변경해도 다 허용이 되버린다
이런 경우 미리 foundMovie:string으로 애너테이션을 써서 지정해주자
암시적인 any 타입으로 추론되는 부분은 항상 확인하고 진행해보자.
Any
any는 어떤 타입이든 다 들어올 수 있다는 표시로 TS를 사용하는 취지와는 거리가 먼 타입이다
사용시 항상 주의하고 웬만하면 사용하지 말자
함수 파라미터와 반환 값
암시적인 타입 변환으로 많이 사용하지 않지만 그래도 확인하고 넘어가자
function square(num){
return num*num;
}이때 num은 any타입으로 명시되는데 함수 작성시 파라미터를 아무렇게나 적어도 TS는 막지 못한다
그렇기에 num:number처럼 인자 부분에 애너테이션을 달아주도록 하자(꼭은 아니지만 해주는 것이 훨씬 좋다 any타입을 피해야 하기 때문에)
다만 함수를 작성할 때 생각해볼 것이 있는데
const doSomething = (person:string,age:number,isFunny:boolean)=>{}
doSomething("ChickenFace") // person의 인자만 왔으니 다른 인자들이 오지 않았다는 오류를 낸다이와 같이 함수를 호출할 때 사용하는 인자 순서와 개수도 주의해야 한다.
그러면 함수의 파라미터에 기본값을 할당하는 것은 클린코드시에도 중요한 부분인데 TS에서는 어떻게 이루어질까
const greet = (person:string = "stranger")=>{
return `Hi there, ${person}`
}이와 같이 애너테이션과 파라미터를 붙이고 뒤에다 기본값을 명시해준다. 이경우 함수를 호출할 때 greet()이런식으로 호출해도 가능하다
Return 타입
function square(num : number){
return num*num;
}이 경우 square에 확인해보면 반환값으로 number를 반환한다고 확인해볼 수 있다 추론으로 확인할 수 있기에..
위 함수 파트에서의 greet라는 함수 예시도 확인해보면 string타입을 반환한다고 확인할 수 있다.
명확한 애너테이션을 사용하고 싶다면
const greet = (person:string = "stranger"):string =>{
return `Hi there, ${person}`
}이런식으로 사용할 수 있긴하다
하지만 만약 애너테이션을 적지 않고 return을 적는 걸 깜빡 했다면?? typescript는 어떻게 추론할까??
function square(num : number){
num*num;
}
square(2)이 경우 square를 확인하면 void를 반환한다고 나온다 여기서 void는 아무 의미가 없다고 보고 지나가자.
정말 말그대로 아무것도 반환하지 않는 반환값이 없다는 것과 같다.
하지만 이는 내가 작성한 코드의 목표값이 아닌데 Typescript는 이를 알아내지 못한다 왜일까??
추론은 말그대로 추론으로 입력하는 것을 토대로 추론하기 때문! 그래서 만약 반환 애너테이션을 적을경우 확실하게 파악할 수 있다.
이는 작은 함수 작업일 경우에는 과해 보일 수 있지만 함수를 보자마자 return 값을 사람이 바로 파악할 수 있으며 긴 함수의 작업일 경우 return문을 찾기 어려울 경우도 있어 애너테이션으로 반환값을 적어주면 바로 확인이 가능하다.
function rando(num:number){
if(Math.random() < 0.5){
return num.toString();
}
return num;
}이 경우 조건값에 따른 반환 값이 다른데 타입 추론을 확인하면 string | number 이런식으로 표기 된다.
유니온 타입이라고 하는데 굉장히 간단하다.
익명 함수
const colors = ["red", "orange", "yellow"]
colors.map(color=>{
return color.toUpperCase();
})이 경우 map 안에 있는 color가 문자열인 걸 typescript는 추론한다.
이경우엔 굳이 애너테이션을 사용하지 않아도 된다.
Void
아까 봤떤 void 탕비이다. 변수가 아닌 함수에서 주로 사용되며 아주 드물게 사용된다.
아무것도 반환하지 않는 함수의 반환 타입으로 사용한다.
funtion printTwice(msg:string){
console.log(msg);
}이 경우 아무것도 반환하지 않는데 함수를 확인해보면 void 타입으로 추론되어 있다.
굳이 애너테이션으로 void를 적지 않아도 되지만 아까 말했든 return 타입을 미리 작성할 경우 코드 유지 보수에 많은 도움이 되니 적는 것을 권장
그래서 void를 명시할 경우 return문을 적을 경우 오류 발생
Never
이전 프로젝트 진행 시 err 타입을 다룰 때 나왔던 never 타입인데 Typescript 고유의 타입이다.
함수의 반환 타입으로 쓰이는 경우와 절대 반환되지 않아야 할 함수를 애너테이션 처리할 때 쓰이는 경우가 있다
void와는 다르다! void는 아무것도 반환하지 않은 경우 함수의 백 그라운에서 undefined상태로 반환된다
하지만 never는 함수가 아무것도 반환하면 안된다는 것을 나타내기 위해 쓰고 이 함수는 일반적으로 예외를 발생시키는 함수가 된다(끝나지 않는 함수 등..)
절대! 아무것도 반환할 기회가 없어야 한다
function makeError(msg: string):never{
throw new Error(msg)
} 이는 오류를 발생시키고 있으니 반환할 기회도 없다. 하지만 추론 값을 보면 void라고 추론되는데 절대 반환하면 안된다고 명시적으로 정의하고 싶다면 never 애너테이션을 적어주자
이 함수에 다른 작업자가 작업하다 어떤 return문을 쓰거나 할 경우 바로 오류를 뱉는다
엄밀히 void와 비교하자면 void는 값이다
void를 반환한 함수이다. (undefined 상태로 반환되기 때문)
