20210504 TypeSciprt 01 개념, 설치 및 환경설정, 컴파일 방법, Type Annotation, 기본적인 type 6가지 ( + union type)

TypeScript01

• TypeScirpt는 타입을 추가시켜 JavaScript를 확장시킴
• 코드 실행전에 Error 잡거나, 수정하게 함으로써 시간을 줄여줌
• 어떤 실행 환경이든 간에 동작가능 (browser, nodejs 등)
• Programming 언어 이자 Compiled 언어(전통적인 complie과는 다름)
• 다른 언어와 다르게 Compile 이라는 용어를 TS(compiled 언어) -> 순수한 JS(interpreted 언어)로 변환시키는 것으로 사용 됨 (다른 말로는 Transpile 이라고도 함)
  • 즉, TS를 editor에서 작성시켜서 바로 runtime할수 없기 때문에 compile 과정(TypeScript Compiler 가 변환)을 통해서 JS로 만들어서 Browser, Nodsjs에서 사용

Compiled VS Interpreted

• Compiled : 실행시킬수 있는 코드로 모두 변환시킨 후 컴파일된 결과물을 실행함 (컴파일이 필요, 컴파일러가 필요)
  • 변환시키고 실행하기 전인 그 사이의 시점을 Compile time 이라고 하는데 그때 error를 확인하고 코드를 수정할 수 있음
• Interpreted : 코드 자체를 하나하나 실행함 (컴파일, 컴파일러, 컴파일 시점 없음)
  • 바로 실행시키기 때문에 runtime 시에 error를 확인가능함

TypeSciprt 설치

JS 실행환경 (node.js vs browser)

• nodejs : Chrome의 V8 javaSciprt Engine을 사용하여 js를 해석하여 os에서 api를 사용가능케하는 서버사이드용 js 런타임 환경
  • nvm (nodejs version 관리 package 사용)
• browser : 브라우저에서 자바스크립트 해석, DOM 제어를 가능케하는 js 런타임 환경
  • chorme 사용

TypeScirpt Complier 설치

• npm i typescript -g (-g 안붙이면 node_modules를 통해서 modules에서만 가능함)
• tsc 파일이름 : Compile 시킴

컴파일 해보기

• windows는 nano 대시 notepad 사용하고, cat 대신 type를 활용해서 파일을 만들고 확인할 수 있음
• 글로벌 설치하여 컴파일
  • cmd 에서 tsc 파일이름 : 해당 파일이 complie 되어 js 파일 생성
  • cmd 에서 project 폴더 위치에서 tsc 명령 시키면 해당 폴더 하위 문서들은 모두 js로 만들어 짐 (단, init이 필요함 tsc --init -> tsconfig.json 파일이 생성되어 compile을 어떻게 할 것인지 세팅 가능 이렇게 해야 tsc 명령 했을때 모두 적용됨)
  • tsc -w watch 모드로 실행하면 해당 폴더의 ts 파일이 변경되는 것을 감지해서 자동으로 js에 반영
• 프로젝트 내에서 설치하여 컴파일
  • npm uninstall typescript -g 전역 설치 삭제
  • npm init 을 통해서 npm 패키지 관리를 만듦 (npm 프로젝트로 만듦)
  • npm i typesciprt를 통해서 해당 프로젝트 안에서만 사용되어 지게 만들고 dependencies를 형성
  • 하지만 해당 폴더에서 g가 아니라서 tsc 실행이 안되기 때문에 node_moudles/typesciprt/bin/tsc 또는 node_modules/.bin/tsc 로 실행해야 되서 길어 불편함
    • npm에서 제공하는 npx로 실행시키면 편하게 실행이 가능함 (npx tsc)
    • npx tsc --init 사용하여 tsconfig.json 만듦
    • npx tsc , npx tsc -w 모두 사용 가능
    • 심지어 package.json 파일의 sciprts 를 수정할때 그냥 tsc 로 연결해도 알아서 node_modules를 찾아서 실행시킴 (편하게 CLI에서 사용가능)
      • 예 ) json script를 "build": "tsc" 세팅 -> npm run build CLI 명령 -> tsc 실행

VSCode 와의 관계

• TS Compiler가 내장 되어 있어서 vscode에 맞게 TScompiler도 update 됨
• 내장된 컴파일러, 직접 설치한 컴파일러 중에 선택도 가능 함
• 개발용으로 사용하는 모듈임을 알려주기 위해서 package.json Dependencies 설정시 devDependencies로 따로 보여지게 -D 옵션을 붙여 npm i typescript -D를 사용
• vscode 하단의 typescirpt version을 눌러 select typesciprt를 통해서 package에 설치한 typesciprt를 쓸건지 vscode의 TS를 쓸건지 정할수 있음

First Type Annotation

• Type Annotation : Type 을 지정함으로써 제한하는 것을 말함
• 예시) c: string / 변수 앞에 콜론을 사용하고 그리고 type을 적어 지정함

let a = "Mark";
// 변수에 값을 할당 할 때 해당 값의 type도 지정함
a = "jerry";
// a = 1 ; // Error

let b;
// 변수를 선언만 하고 값을 주지 않은 경우 any type으로 지정됨

let c: string;
// 이렇게 type을 지정해 주면 그 type만 사용가능하게 함 (이렇게 type을 지정하는 것을 Type Annotation 이라고 부름)

// 콜론을 사용함
let d: number;

d = 12;

const hello = (b: number) => {};
// 함수 안에서도 사용 가능함 (인자의 type 제한)
hello(11); // 들어 오는 인자를 check해서 error를 표시함

TS types vs JS types

Static Types (TS) vs Dynamic types (JS)

• Static Types (TS) : 개발하는 중간에 type 확인 가능
• Dynamic Types (JS) - runtime할때 type 확인

type 제한 확인 예시

• JS에서의 type 제한 및 확인

// JavaScript
const add = (n1, n2) => {
  if (typeof n1 !== "number" || typeof n2 !== "number") {
    throw new Error("invaild data");
  }
  return n1 + n2;
};

const result = add(39, 28);

• TS에서의 type 제한 및 확인

// TypeScript
const tsAdd = (n1: number, n2: number) => {
  return n1 + n2;
};

const tsResult = tsAdd(39, 28);

Type 차이

JS의 기본 자료형 6가지(Primitive Type)

• object, reference 형태가 아닌 실제값을 저장하는 자료형
• : Boolean, Number, String, Null, Undefined, Symbol (+es6)
• 덕분에 primitive type의 내장 함수 사용 가능
  • 번외) Array: object형
• literal : 문자자체로 값을 할당하는 방식 (true, 'hello', 3, null, undifined)
• literal 값으로 Primitive 타입의 서브타입을 나타낼 수 있음
• . 또는 Wrapper 객체로 만들수 있음 (new 생성자를 사용해서 해당 type의 object를 만들수 있음)
• 즉, 이것들은 primitive Type이 아니므로 TS에서 type을 줄때 이와같은 대문자 형식의 객체 이름으로 주면 안된다. (소문자 형식으로 주어야 함)

new Boolean(false); // typeof -> object
new String("world"); // typeof -> object
new Number(42); // typeof -> object

• 아래 처럼 : string (O) , : String (X)

const revers = (s: string): string => {
  return s.split("").reverse().join("");
};

TS에서 지원하는 자료형

• : Any, Void, Never, Unknown, Enum
• 번외) Tuple: Object형

Type 알아보기

boolean

• wrapper object 조심할 것!
• Boolean vs boolean

let isDone: boolean = false;

isDone = true;

console.log(typeof isDone); // 'boolean'

let isOk: Boolean = false; // wrapper 로서 값은 분류 하지만 primitive는 아니다.
// let isNotOk: boolean = new Boolean(true);  // new Boolean은 object이기때문에 boolean으로 type제한이 걸린 변수에 할당이 불가

number

• 2, 8, 10, 16 진수 지원
• NaN
• Underscore Number 지원

// number는 부동소수점 값
let decimal: number = 6; // 10진수

let hex: number = 0xf00d; // 16진수 (TS)

let binary: number = 0b1010; // 2진수 (+es5)

let octal: number = 0o744; // 8진수 (+es5)

let notANumber: number = NaN; // NaN도 number의 한 종류임

let underscoreNum: number = 1_000_000; // 보기 편하게 할려고

string

• '' , "" 을 똑같이 사용함
• template string도 똑같이 사용함 (`${}`)

let myName: string = "jerry";

myName = "Anna";

// Template String
let fullName: string = "Tom Kim";
let age: number = 24;
// backquote의 있는 enter를 통한 개행도 인식함
let sentence: string = `Hello, My name is ${fullName}.

I'll be ${age + 1} years old next month.`;

console.log(sentence);

symbol (es2015)

• new Symbol로 사용 불가함
• Symbol을 함수로 사용해서 symbol타입을 만들어 낼수 있음
• 기본적인 ts config init 세팅값으론 Symbol 함수를 사용 할 수 없음
• config를 수정해줘야 함 (lib에 es2015, Dom을 넣어줌)
• primitive type 값을 담아서 사용
• 고유하고 수정 불가능한 값으로 만들어줌
• 그래서 주로 접근을 제어하는 경우에 사용됨

console.log(Symbol("foo") === Symbol("foo")); // false

const sym = Symbol();

// 일반적인 obj
const obj = {
  sym: "value",
};
obj["sym"];
// 누구나 sym으로 문자열을 넣으면 접근 가능해짐

// symbol을 이용한 obj
const obj1 = {
  [sym]: "value",
};
obj1[sym];
// symbol을 직접 넣어줘야 접근 가능함

// 접근을 막거나, 접근을 허락한 경우에만 가능케 하고자 할 때 이용

null & undefined

• undefined 와 null 실제로 각각 undefined 및 null 이라는 타입을 가짐
• void처럼 유용하진 않음
• 둘다 소문자만 존재
• config 설정을 안하면 undefined 와 null은 모든 다른 타입의 subtype임
• 즉, number에 null, undefined를 할당 가능함

Strict option

• --strictNullChecks 옵션을 사용하면 진짜 자기 자신 또는 void 아니면 할당 불가능 하게 된다는 것!
• void에 undefined을 할당 할 수 있음 (유일하게) null은 안됨

// config의 strict 옵션을 주석 처리시 (즉, dynamic)
let MyName: string = null;
let MyAge: number = undefined;
let u1: undefined = null;

// strict 옵션시
let v: void = undefined;

union type

• union |
• string type과 null type의 합집합 같은 느낌으로 type 제한을 만들어줌
• 그리고 두 타입 중에서 조건을 걸어줄수 있는 type Guard라고 함 (추후에 배울 예정)

let union: string | null = null;
union = "Tom";

null in JS

• 무언가 있는데, 사용할 준비가 덜 된 상태
• null type은 null만 가짐
• runtime에서는 typeof으로 알아내면 object로 나나탐!

let n1: null = null;
console.log(n1); // null
console.log(typeof n1); // object

undefined in JS

• 값을 할당하지 않은 변수 (무언가 아예 준비가 안된상태)
• object의 property가 없을때도 undefined임!!
• runtime시 typeof 연산자이용시 undefined라고 뜸

let u1: undefined = undefined;
console.log(u1); // undefined
console.log(typeof u1); // undefined