🐳 2장 기본타입과 커스텀 타입

타입스크립트는 타입이 추가된 자바스크립트일 뿐만 아니라 인터페이스, 제네릭등 자바스크립트에 없는 다양한 구문들을 가지고 있습니다.

🐳 2.1 변수 타입 선언

강제적인 타입 선언이 귀찮더라도 장기적인 관점에서 볼 때 생산성이 눈에 띌 정도로 향상됩니다.
실수로 변수타입을 숫자에서 문자열로 바꾼다면 컴파일러 단계에서 이 오류를 잡을 수 있기 때문!

SW 개발자는 타입스크립트컴파일러로 타입을 명시적 또는 암시적으로 선언 할 수 있음.
명시적 : 코드에 직접 구체적으로 표현한다는 뜻
암시적 : 코드로 표현하지 않아도 컴파일러가 알아서 처리한다는 뜻

🌏 2.1.1 기본적인 타입 표기

타입스크립트는 변수 선언 후 타입과 함꼐 세미콜론을 붙임.

let firstName: string;
let age: number;

string, number, boolean,
symbol : Symbol생성자를 호출해 생성된 고유값
any : 모든 타입을 허용하는 타입, 코드를 쓰는 동안 정해지지 않은 변수를 지정할 수 있다.
unknown : any와 비슷하지만 먼저 타입을 지정하거나 좁히지 않으면 조작이 허용X.
never : 도달할 수 없는 코드
void : 값없음

👉 Symbol

Symbol은 객체 프로퍼티의 고유값을 가진 키를 생성할 때 사용됨.

// 2_1.ts
const ord = Symbol('orderId');
const myOrder = { // 객체프로퍼티로 Symbol사용하기
    ord:"123"
}
console.log(myOrder['ord']); // 123 출력됨.

👉 null과 undefined

타입스크립트도 null과 undefined 타입을 가짐.

null과 undefined를 모든 변수에 할당할 수 있지만, 여러타입과 섞어 사용되는 것이 일반적이다.

function getName(): string|null{ ... }

null을 명시적으로 작성하여 코드 가독성을 향상시킴.

👉 any타입

숫자, 텍스트, 부울 또는 Customer같은 커스텀타입값을 할당.

any타입을 사용하면 타입 체크의 장점을 잃고 코드 가독성도 떨어져 되도록 사용 X

👉 never 타입

절대 반환을 하지 않는 함수에 사용.
ex) 절대로 실행이 종료되지 않는 함수나 오류를 발생시키기 위해서만 존재하는 함수

//2_2.ts
const logger = () =>{
    while(true){ // 함수가 종료되지 않고 계속 실행됨.
        console.log('서버가 실행 중 입니다.');
    }
}

생성한 함수를 변수에 할당하는 방법을 함수 표현식이라고 하는데 이 역시 타입을 반환함.
위 함수의 타입은 never입니다.

👉 void 타입

변수 선언이 아니라 값을 반환하지 않는 함수를 선언하는데 사용.

function logError(errorMessage: string): void{
    console.error(errorMessage);
}

never와 다르게 void함수는 실행을 완료하지만 값을 반환 안함.

❗ 런타임 중에 함수 본문에 return이 없는경우 undefined를 반환하는데 void를 사용하면 이와 같은 실수를 방지할 수 있다.

👉 검사기가 유추한다.

타입스크립트의 타입표기는 선택사항이기 때문에 표기가 없으면 검사기는 타입을 유추한다.

// 2_3.ts
const age = 25;
function getTax(income: number):number{
    return income * 0.15;
}
let yourTax = getTax(50000);

age와 yourTax의 경우 타입스크립트 컴파일러가 타입을 유추하기 때문에 굳이 타입을 다시 표기할 필요가 없습니다.

👉 문자열 리터럴을 타입으로 사용

문자열 리터럴을 타입으로 사용할 수 있다.

let name3: 'John Smith';

이 변수는 John Smith라는 리터럴 타입을 가지고, 변경되면 오류가 발생합니다.

let name3: 'John Smith';
name3 = 'Mary Lolu'; // error: Type 'Mary Lolu'is not assignable to type "John Smith"

문자열 리터럴을 사용하는 경우는 드믈고, 유니온과 열거타입을 사용함.

👉 타입확장

초기값 없이 변수를 선언하면 컴파일러가 any타입으로 유추하는데 이처럼 유추하는 것을 타입확장이라고 함.

let productId;productId = null;productId = undefined;

타입스크립트 컴파일러는 any타입으로 유추하고, null과 undefined값에 할당합니다.
따라서 productId의 타입은 any가됩니다.

-- strictNullCheck 옵션을 통해 정해진 변수에 null이 입력되는걸 막습니다.
코드 스니펫에서 위 옵션을 적용하면 productId 타입은 number가 되며, 두번째와 세번째줄은 컴파일이 되지 않습니다.
undefined값을 잡는데도 도움됨.

let productId;productId = null; // 컴파일오류productId = undefined; // 컴파일 오류

🌏 2.1.2 함수 본문 내 타입선언

타입스크립트 함수와 함수표현식은 파라미터 타입과 반환값을 명시적으로 선언합니다.

// 2_4.js
function calcTax(state, income, dependents){    
  if(state ==='NY') return income * 0.06 - dependents * 500;    
  else if(state ==='NJ') return income * 0.05 - dependents * 300;
}
// let tax = calcTax('NJ', 50000, 2); // 1900
let tax = calcTax('NJ', 50000, 'two'); // NaNconsole.log(tax);

함수의 호출전에는 위 코드의 문제점을 알 수 없다.

function calcTax(state:string, income:number, dependents:number):number{    
  if(state ==='NY') return income * 0.06 - dependents * 500;    
  else if(state ==='NJ') return income * 0.05 - dependents * 300;
}
// let tax:number = calcTax('NJ', 50000, 'two'); 
// Type Errorlet tax:string = calcTax('NJ', 50000, 'two'); console.log(tax);

반환값은 number이기 때문에 tax가 숫자가 아니라면, 컴파일러는 오류를 보내 타입실수를 방지.

❗ state가 NY와 NJ에 대해서만 처리하기 때문에 undefined를 반환합니다.
하지만 경고메세지는 표시하지 않습니다.
아래와 같이 수정하여 방지할 수 있습니다.

function calcTax(state:string, income:number, dependents:number) : number | undefined

🌏 2.1.3 유니온 타입

유니온은 OR연산자처럼 변수에 지정할 수 있는 타입이 여러개인 경우 사용.

let padding: string | number

any를 사용해도되지만, 그러지 않는 이유가 있다.

아래 코드는 주어진 문자열에 왼쪽 패딩값을 추가하는 함수.
숫자타입이면 value 앞에 공백 문자를 추가하고, 문자열 타입이면 padding의 문자열을 이어 붙여 반환.

//2_6.ts, 2_7
function padLeft(value: string, padding: any):string{    
  if(typeof padding === 'number'){        
    return Array(padding + 1).join('') + value;    
  }    
  if(typeof padding === 'string'){        
    return padding + value;    
  }    
  throw new Error(`Expected string or number, got '${padding}'`);
}
console.log(padLeft('Hello World', 4)); // Hello World 반환
console.log(padLeft('Hello World', 'John says')); // John says Hello World
console.log(padLeft('Hello World', true)); // 런타임 오류 발생

👉 typeof와 instanceof 타입가드

조건문으로 변수 타입을 세분화하는 것을 타입 축소라고 한다.

2.5에서 typeof 타입가드를 사용해 둘 이상의 타입(number | undefined)을 허용하도록 범위를 축소했습니다.

instanceof 는 커스텀 타입과 함께 사용됨. 실제 객체 타입을 확인함.

typeof는 타입스크립트 내장 타입에 사용되며, instanceof는 사용자가 만든 타입에 사용된다는 차이가 있다.

function padLeft2_8(value: string, padding: string | number):string{    
  if(typeof padding === 'number'){        
    return Array(padding + 1).join('') + value;    
  }    
  if(typeof padding === 'string'){        
    return padding + value;    
  }
}
// console.log(padLeft2_8('Hello World', true)) // 컴파일오류

string과 number 유니온으로 바꾸어 예외처리의 필요성이 사라집니다.
위 콘솔문 처럼 입력 시 true에 빨간줄이 끄이면서 컴파일오류 발생.

❗ 변수가 두 개 이상의 타입을 가질 경우 any말고 유니온 사용.

let padding: string | number

변수를 타입별로 나눠서 선언이 가능

let paddingStr: string | let paddingNum: number;

👉 never타입

function paddingLeft2_9(value: string, padding: string | number): string{    
  if(typeof padding === 'number') return Array(padding+1).join('')+value;    
  if(typeof padding === 'string') return padding + value;    
  else return padding; // else블록은 실행안됨.
}

never타입은 위에서 말했듯이 어떤 타입과도 호환되지 않는 타입.
논리적으로 끝까지 실행될 수 없는 함수의 반환 값은 never타입이 됩니다.

위 코드의 경우 string | number 외의 타입은 허용하지 않기 때문에 else절의 padding은 never로 유추됩니다. (padding에 마우스를 올려 타입확인 가능)

👉 정리

any를 사용하지않고 유니온을 사용하면 타입스크립트 컴파일러가 런타임 도중 padLeft()가 잘못 호출된 경우 이를 감지해 오류를 바로 해결가능 하다