[Hanaro] 18일차 / TypeScript (Type System, Union&Literal, Object, function)

TypeScript 시작하기

• TypeScript
  • JS에 타입을 부여하고, 부여된 타입을 체크하고, 만족하는 JS 코드 생성
  • 2012 년에 microsoft visual studo for JavaScript
• TypeScript의 구성
  • 프로그래밍 언어
  • 타입 검사기(TypeChecker)
    • 코드의 모든 구성요소(함수, 변수 등)를 이해하고 오류 감별
  • 컴파일러(pre-compiler)
    • TS Syntax-tree를 JS Code로생성
  • 언어지원 서비스(IDE)
    • VSCode, SublimeText, Vim 등 편집기에서 TS 지원
• TypeScript Compiler
  • Read TSConfig (tsconfig.json)
  • Pre-process Files
  • Tokenize(Scan) and Parse
  • Binder
  • Type check
  • Transform
  • Emit

 

TypeScript - 타입 시스템

• install typescript
  • npm init -y
  • npm install -g typescript ts-node
  • tsc -v
  • tsc —init
  • ts-node 파일.ts
    • 해당 파일 실행
  • tsc 파일.ts
    • 해당 파일 js 파일로도 생성
• 타입의 종류 - 원시 타입(Primitive Type)
  • null
  • undefined
  • boolean
  • string
  • number
  • bigint
    • 0n, 2n -4n, …
  • symbol
    • Symbol(), Symbol(”ho”), ..
• 타입 시스템의 코드 이해 방법
  • 코드를 읽고 존재하는 모든 타입과 값을 이해
  • 각 값이 초기 선언에서 가질 수 있는 타입 확인
  • 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법 확인
  • 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류 표시
• 구문(Syntax) 오류 vs 타입 오류
  • 구문(문법) 오류
    • 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
    • 타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생
  • 타입 오류
    • 타입 검사기에 따라 일치하지 않는 것이 감지된 경우
    • 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생
• 할당 가능성 (Assignability)
  • TS에서 함수 호출이나 변수에 값을 제공할 수 있는 지 여부 확인
• Type Annotation
  • 초기값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문
  • let 변수: 데이터타입;
    • ex) let lastName: string;

 

TypeScript - 유니언과 리터럴

• 타입 별칭(Alias)
  • 자주 사용될 타입에 이름 붙이기
  • ex)
  • type PersonInfo ={ id: number, name: string, age: number, address: string; } // 아래처럼 타입 만들기 const something = ({id, name, age, addess}: PersonInfo) => { ... }
• literal 타입
  • 원시 타입보다 더 구체적인 원시 타입
  • 원시 값 자체가 타입이 된다.
• union 타입
  • union(|)은 값에 허용되는 타입을 두 개 이상으로 가능한 타입으로 확장하는 것
    • ex)
      • phone: number | string;
      • addr?: string;
  • 확장된 타입에서 어느 하나의 타입에 할당 가능

  type Member = {
     name: string,
     addr: string,
     discountRate: number;
  };
  type Guest = {
     name: string,
     age: number,
  };
  type Customer= Member | Guest;
  

• union type - narrowing과 type guard
  • union type에서 특정 타입에만 존재하는 속성에 접근하고 싶을 때 type guard를 통해 type narrowing
  • narrowing
    • 값이 더 구체적인 타입임을 코드에서 유추하는 것
  • type guard
    • narrowing을 하기 위한 논리적인 검사
  • 값 할당을 통한 narrowing
    • 변수에 값을 직접 할당하면 할당된 값의 타입으로 좁혀진다.
  • typeof 검사를 통한 narrowing
    • 조건문에서 type을 확인하여 타입을 좁힌다.
  • 조건 검사를 통한 narrowing
    • if 문
• strictNullChecks
  • 엄격한 null 검사 활성화/비활성화
    • null 혹은 undefined 값을 참조/할당 했을 때 타입 에러 발생 여부
  • strictNullChecks 활성화
    • 다른 타입이 필요한 위치에서 null 혹은 undefined 값을 참조/할당 하는 것을 방지
    • 활성화해야만 null 및 undefined에 대한 오류로부터 안전해진다.
  • strictNullChecks 비활성화
    • 다른 타입이 필요한 위치에서 null 혹은 undefined 값을 참조/할당 하는 것을 방지하지 않는다.

 

TypeScript - 객체 타입

• 객체(Object) 정의하는 타입
  • 객체의 형태를 정의하고 객체의 할당 가능성 확인
  • TS의 타입 시스템은 타입을 구조화하여 정의 (structured type system)
• CoVariance & ContraVariance
  • Covariance
    • 원래 지정된 것보다 더 많이 파생된 형식을 사용할 수 있다.
    • IEnumerable<Derived>의 인스턴스를 IEnumerable<Base> 형식의 변수에 할당할 수 있다.
  • Contravariance
    • 원래 지정된 것보다 더 제네릭한(덜 파생적인) 형식을 사용할 수 있다.
    • Action<Base>의 인스턴스를 Action<Derived> 형식의 변수에 할당할 수 있다.

 

TypeScript - 함수 타입

• 함수 매개변수
  • 타입 애너테이션으로 함수 매개변수의 타입 선언
    • ex)

    function add(a, b) {
       return a + b;
    }
    // 아래 같이 변경 
    function add(a : number, b: number) {
       return a + b;
    }
    

  • 타입스크립트는 함수에 선언된 모든 매개변수가 필수라고 가정한다.
• 선택적 매개변수
  • 타입 애너테이션의 : 앞에 ?를 추가해서 매개변수가 선택적이라고 표시
    • ex)

    	const introduce = (name:string, **height?:number**) => {
    	console.log(`이름 : ${name}`);
    	if(typeof height === 'number'){
    	// 내로잉을 통해서 타입 좁혀줌
    	console.log(`키 : ${height + 10}`)   
     	}
    }
    
    introduce("김현준"); // OK
    introduce("김현준", undefined); // OK
    introduce("김현준", 170); // OK
    

  • 매개변수의 타입도 선택적으로 가능
    • ex)

    const introduce2 = (name:string, **height : number|undefined** ) => {
    	console.log(`이름 : ${name}`);
    	if(typeof height === 'number'){
    	console.log(`키 : ${height + 10}`)   
     	}
    }
    
    introduce2("김현준"); // Error : Expected 2 arguments, but got 1.
    introduce2("김현준", undefined); // OK
    introduce2("김현준", 170); // OK
    

• 기본 매개변수
  • 기본 매개변수는 기본적으로 값이 제공되기 때문에 TS 타입에는 암묵적으로 함수 내부에 | undefined 유니언 타입이 추가된다.
  • TS는 함수의 매개변수에 대해 인수를 누락하거나 undefined 인수를 사용하여 호출하는 것을 허용한다.