1. 기본 타입 선언

let firstName: string; // 변수 선언 후 콜론 타입

기본 타입

• string - 문자열
• boolean - true / false
• number - 숫자
• symbol - Symbol 생성자를 호출해 생성된 고유값
• any - 모든 타입을 허용하는 타입
• unknwon - any와 비슷하지만, 먼저 타입을 지정하거나 좁히지 않으면 조작이 허용되지 않음
• never - 도달할 수 없는 코드
• void - 값이 없음

symbol은 ES6에 추가된 변경 불가능한 원시 타입으로 객체 프로퍼티를 만든다.

const sym1 = Symbol("주문번호");
const sym2 = Symbol("주문번호");

// sym1 과 sym2는 동일하지 않다.

객체 프로퍼티로 Symbol 사용하기

const ord = Symbol('주문번호');
const myOrder = {
	ord:  "123"
}

console.log(myOrder['ord']);

null은 명시적으로 값이 없음을 나타낼 때, undefined는 값이 할당되지 않은 변수의 초기값 혹은 값을 반환하지 않는 함수 역시 undefined를 반환한다.

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

function getName(): string | null {
}

문자열을 반환하는 함수를 선언해도 null을 반환할 수 있는 가능성이 있지만, null을 명시적으로 작성하면 코드 가독성이 향상된다.

any타입은 숫자, 텍스트, boolean, 또는 커스텀 타입 값을 할당할 수 있다. 그러나 any 타입을 사용하면 타입 체크의 장점을 잃고 코드 가독성도 떨어지기 때문에 되도록 사용하지 말야아 한다.

never 타입은 절대 반환을 하지 않는 함수에 사용한다. 절대로 실행이 종료되지 않는 함수나 오류를 발생시키기 위해서만 존재하는 함수를 예로 들 수 있다.

const logger = () => {
	while(true){
		console.log('서버가 실행 중이다');
	}
}

값을 반환하지 않는 함수에는 void가 사용된다.

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

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

js에서는 값을 return문이 없는 함수는 undefined를 반환하지만, void를 통해 명시적을 값이 반환되지 않음을 보여줄 수 있다.

2. 타입 선언을 안 해도 되는 경우

let name1 = "김힘찬";
let name2:string = "김힘찬";

첫번째는 암묵적으로 name1에 string 이란 type 값이 지정된다.

두번째 경우는 name2는 값이 문자열이므로, 암묵적으로 string 타입이 지정되므로 다시 한 번 더 :string 타입을 지정해 줄 필요가 없다.

즉, 타입스크립트 컴파일러가 유추 가능한 곳에 명시적으로 타입을 추가하는 것은 피해야 한다.

타입유추

const age = 30; // 상수 age에 타입이 없다.
function getTax(income: number):number {
	return income * 0.15;
}

let myTax = getTax(1000); // 변수 myTax에 타입이 없다.

타입스크립트는 문자열 리터럴을 타입으로 사용할 수도 있다.

let name3: "김힘찬";

name3 = "찬힘김"; // error

타입확장

초기값 없이 변수를 선언하면 타입스크립트 컴파일러는 any로 타입을 유차한다.

이처럼 컴파일러가 변수 타입을 유추하는 것을 타입확장이라고 한다.

let 주문번호;
주문번호 = null;
주문번호 = undefined;

타입스크립트 컴파일러는 주문번호를 any 타입으로 유추하고 null과 undefined 값에 할당한다.

타입스크립트 컴파일러는 —stringNullCheck 옵션을 통해, 정해진 변수에 null이 입력되는 것을 막는다.

// --strictNullCheck 일 때
let 주문번호 = 123;
주문번호 = null; // 컴파일 오류
주문번호 = undefined; // 컴파일 오류

3. 함수 본문 내 타입선언

function calcTax(state: string, income: number, dependents: number): number {
	if (state === 'NY'){
	        return income*0.06 - deduction;
	    } else if (state ==='NJ'){
	        return income*0.05  - deduction;
	    }
}

NY, NJ 외의 state가 입력될 경우 undefined가 반환된다.

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

위처럼, undefined이 나올 수 있음을 명시적으로 적어줄 수 있다.

4. 유니온 타입

let padding: string | number;

유니온 타입을 쓰는 이유

function padLeft(value: string, padding: any ) {
    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}'.`);
}

any를 쓴다면, throw new Error를 통해서 에러처리를 해줘야한다.

조건문을 통해 변수 타입을 세분화하는 것을 타입 축소라고 한다.typeof는 타입스크립트 내장 타입에 사용되며, instanceof는 사용자가 만든 타입에 사용된다.

function padLeft(value: string, padding: string | number ):string {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
}

유니온 타입을 사용하면, 예최 처리의 필요성이 사라진다. (간단!)

function padLeft(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;
    }
}

위 처럼, 실행이 안 되는 코드는 nerver 타입으로 유추된다. else 문 내의 padding은 never 타입이 유추된다.