Typescript 기본

타입스크립트 vs. 자바스크립트

• 런타임 전에 타입 체크를 하는 지 유무
  자바스크립트는 코드를 실행 후 런타임에서 변수의 타입을 체크한다. 하지만 타입스크립트는 런타임 이전인 개발 단계에서 타입을 체크하기 때문에 코드 결함을 사전에 파악할 수 있다.

  const add = (n1: number, n2: number) => {
    return n1 + n2;
  }

  만약 위 코드를 자바스크립트로 바꾼다면 코드가 훨씬 길어질 것이다.

  const add = (n1, n2) => {
    if (typeof n1 !== number || typeof n2 !== number) {
        throw new Error('숫자가 아니면 더할 수 없습니다.');
    }
    return n1 + n2;
  }

타입스크립트의 타입

• 타입 키워드는 소문자로 시작
• 대문자로 시작하는 키워드(Number)는 래퍼 객체인 object를 의미하며 타입스크립트에서 타입으로 사용하지 말 것을 권장

프로젝트 세팅

npm init -y

npm i typescript -D

npx tsc --init

• tsconfig.json 파일 생성

실행

npx tsc

• 컴파일
• js 파일 생성
• node [js 파일] 로 실행

number 타입

let decimal: number = 6;
let hex: number = 0xf00d; // 16진수
let binary: number = 0b1010; // 2진수
let octa: number = 0o733; // 8진수
let notANumber: number = NaN;
let underscoreNum: number = 1_000_000 // 읽기 편하게 언더스코어로 표기

• 10진수, 2진수, 8진수 16진수 가능
• NaN 가능
• 언더스코어를 이용, 1000단위로 나눠서 가독성 향상 가능

Array, Tuple 타입

let arr: number[] = [1, 2, 3];
let list: (number | string)[] = [1, '2', 3];

let nums: Array<number> = [1, 2, 3];

• array 변수 list에는 숫자 또는 문자열이 올 수 있다.
• array 변수 nums의 타입이 왜 시작하는 이유?
  • Array는 primitive type(boolean, string, number, null, undefined 등)이 아니라서
  • Array<number> 보다는 number[] 가 권장됨

let person: [string, number] = ['hyun', 32];
person = [32, 'hyun'] // Error
person[2] // Error

let [name, age] = person;

• tuple 변수 person 의 첫 번째 값은 string, 두 번째 값은 number 가 꼭 와야함
• 세 번째 값부터는 undefined 이기 때문에 접근 불가

any 타입

const func = (obj: any) => {
    let num = obj.num;
    let str = obj.str;

    return num;
} 

const b = func({});

• any는 가급적 사용하지 않는 것이 좋다.
• obj를 any로 받는 순간 any가 전파된다. (num, str, b 모두 any가 됨)
• any를 사용했더라도 중간에서 타입을 지정해주는 것이 좋다.

const func = (obj: any) => {
    let num: number = obj.num;
    let str: string = obj.str;

    return num;
} 

const b: number = func({});

unknown과 타입 가드: any의 불안정함을 대체하기 위해

프로그램 개발 중에 모르는 변수의 타입을 묘사해야할 수 있다. 예를 들어, API를 이용해 동적 컨텐츠를 가져오는 경우 등

• 타입 가드로 unknown 타입을 if 문 안에서 어떤 타입인지 확인한 후에 해당 타입으로는 할당이 가능하다.

declare const maybe: unknown;
const num: number = maybe; // Error, 만약 maybe가 any 였다면 Error 없이 통과되었을 것

if (typeof maybe === 'number') {
    const num: number = maybe;
}

if (maybe === true) { // 타입 가드를 통해 maybe가 true 타입임을 확인하면 boolean 에 넣어 줄 수 있다.
    const aBoolean: boolean = maybe;
}