[TypeScript] Solo Learn 3일차

katsukichi·2021년 4월 4일
0

TypeScript Solo Learn

목록 보기
3/4

Any 타입


let someValue:any = 5; // 어떠한 타입도 ok
someValue = "hello"; // 문제없음
someValue = true; // 문제없음

타입스크립트에서의 일반적인 규칙은

타입에 관한 더많은 정보를 명시할수록

더좋다!

타입에대한 더많은 정보가 제공될수록 좀더 명확하게 개발자의 의도를 코드로 기술할수있고

컴파일시 더많은 타입 에러를 잡아낸다.

효과적인 코드의 유지보수

any타입을 쓰는경우를 최대한 피하는게 좋다.

쓰기 좋은예 : Third Party Library에서 동적컨텐츠를 가져와서 코드작성시 변수의 타입을 알수없는경우.

이런경우는 ?

무슨 타입이 변수에 들어올지는 알수없지만 변수의 타입이 문자열 아니면 숫자일꺼다.

제한된 타입들을 동시에 지정하고 싶을때

Union 타입

let someValue : number|string = 5;
someValue = "free";
someValue = true // 에러방생

같은 조합이 계속 반복될 경우 어떻게 코드를 향상 시킬수있나 ?

유니온타입으로가지는 변수나,함수가 여러개있다면 ?

같은코드를 반복하는거보다.

타입으로 지정하고 재활용하는게 좋다.

그때 쓰는것ㅇ이바로 Type Aliases

Type Aliases


type StrOrNum = number | string;

//반복되는 유니온 타입에 코드부분을 타입으로 대체하면 코드가 깔끔해진다.

Type Guard


type NumOrStr = number|string;
let itemPrice :number;

const setItemPrice = (price:StringOrNum):void ->{
  itemPrice = price; // itempPrice에 빨간밑줄이 그어진다.
};

setItemPrice(50);

itempPrice는 숫자타입인데

price는 스트링도될수도있는 유니온타입이다.

그러므로 오류를 뱉어낼수있다.

이때 사용하면 좋은게
typeof operator


if(typeof price ==='string'){
  itemPrice=0;
}else{
  itemPrice = price;
}

유니온타입을 사용할때 typeof operator를 사용하여 코드검증을 수행하는것을

타입스크립트에서 Type Guard라고 한다.

typeof 외에도 타입가드 방법은 몇가지더 존재한다.

  1. typeof
  2. instanceof
  3. in
  4. 리터럴(===,==,!==,!=)
  5. null/undefined(strictNullChecks)
    얘만 조금 설명하면 typescript는 똑똑해서 null,undefined==,!= 사용가능
  6. 사용자정의 TypeGuard
    사용자 정의 Type Guard 함수란 단순히 어떤 인자명은 어떠한 타입이다라는 값을 리턴하는 함수

타입스크립트에서 함수작성하기

  1. 함수의 반환타입
  2. 선택적 매개변수
  3. 매개변수의 디폴트값

함수의 타입명시

  • 함수의 반환타입 명시
  • 함수의 매개변수타입 명시

function sendGreeting(message,userName): void{ // 함수의 반환값(return)값 타입명시
  console.log(`${message}, ${userName}`)
}

function sendGreeting(message:string,userName:string): void{//매개변수타입(parameter의 타입 명시
  console.log(`${message}, ${userName}`)
}

두번째 아규먼트를 보내기싫다면 ?

타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정한다

매개변수와 아규먼트의 수가 같아야한다.

선택적 매개변수


function sendGreeting(message?:string,userName?:string): void{
  console.log(`${message}, ${userName}`)
}

기억해야할 중요한것

전달되는 매개변수가 어러개이고

몇가지만 선택적 매개변수인경우

선택적 매개변수들은 필수 매개변수들 뒤에 나타나야한다.**

( 당연한것이긴하지만.. 명시적으로 기억하자 )

default Parameter 기본 매개변수


function sendGreeting(message?:string,userName = "기본이다"): void{
  console.log(`${message}, ${userName}`)
}

기본매개변수가 존재한다면
선택적 파라미터도 필요가없어지므로 지워주고

타입추론으로인해서 타입명시도 필요가없어지므로

string타입이라는 타입명시도 지워줄수있다. (디폴트가 스트링이므로 자동으로 스트링이된다)

Arrow function으로 작성해보기.


function sendGreeting(message="안녕",userName = "기본이다"): void{
  console.log(`${message}, ${userName}`)
}

sendGreeting();
sendGreeting("굿모닝");
sendGreeting("굿밤","Shin");

를 Arrow function 으로 작성해보자


const sendGreeting = (message="안녕",userName = "기본이다") :
void =>{
  console.log(`${message}, ${userName}`)
}

sendGreeting();
sendGreeting("굿모닝");
sendGreeting("굿밤","Shin");
profile
front-back / end developer / Let's be an adaptable person

0개의 댓글