[TypeScript 강의노트]

 - 오픈소스 프로그래밍 언어

- 자바스크립트 상위 집합으로 ECMA스크립트의 최신 표준을 지원

- 정적인 언어로 컴파일 시간에 타입을 검사

- 장점

1. 강력한 타입으로 대규모 어플리케이션 개발에 용이

2. 유명한 자바스크립트 라이브러리와의 편리한 사용

3. 개발 도구에서의 강력한 지원

 

1. 설치 

 

npm install typescript -g (전역설치)

 

tsc hello.ts

 

- tsc 명령어로 타입스크립트 컴파일러를 실행시킬 수 있다.

타입 스크립트를 컴파일해서 자바스크립트 파일을 만들 수 있다.

 

 

tsc hello.ts --target es6

 

- 예 ) es6만 지원하려면 target 옵션 주기

 

 

2. promise 기능 es5로 컴파일해보기

 

let timeoutPromise = new Promise((reslove, reject) => {
  setTimeout(() => {
    reslove("1 sec");
  }, 1000);
});
timeoutPromise.then(console.log);

 

결과: error

- 문법적으로 추가된 것이기보다 새로운 타입, 기능이 추가된 것이기 때문에 promise를 지원하기 위해서는 별도의 폴리필이 필요하다. but, 해당 라이브러리는 전역에 추가하기 때문에 타입 스크립트에서는 문제가 없다는 것을 알려야 한다.

=> 라이브러리 옵션을 주기

 

↓

 

//es6의 promise를 쓰겠다.
tsc hello.ts --lib es2015.promise

//해당 명령어 이후 에러가 계속 발생한다면 그 에러를 
//처리하기 위한 옵션을 또 추가해주면 된다.

 

 

- 타입스크립트 컴파일 시 각 옵션 정의

 

{
  "inlcude": [
    "src/**/*.ts" //소스폴더의 전체 타입스크립트 파일
  ],
  "exclude": [
    "node_modules" //노드 모듈에 있는 노드 패키지들은 타입스크립트 컴파일 대상 제외
  ],
  "compilerOptions": {
    "module": "commonjs", //모듈에 대한 옵션
    "rootDir": "src", //모듈에 루트가 되는 폴더
    "outDir": "dist", //컴파일된 파일들이 만들어지는 최상위 폴더
    "target": "es5",
    "sourceMap": true, //컴파일된 파일이 아닌 원본을 보고싶은 경우
    "removeComments": true, //주석을 제거할 수 있는 설정
    "noImplicitAny": true // 형태를 정하지 않은 any형태를 방지
  }
}

 

(배포 시, 웹팩으로 dist에 있는 파일을 번들링 해서 실제 웹어플리케이션에서 구동시킨다.)

 

 

- 변수 선언

 

function outer(){
	if(true){
    	let score = 30;
        score= 40;
        score="50";
    }
}

outer();

//위 코드를 컴파일하면 error가 발생한다.
//이유 : 이미 score의 초기 값 설정시 number 타입으로 설정되어있었는데 갑자기 문자열 타입을 할당할 수 없다.

function outer(){
	if(true){
    	let score;
        score= 40;
        score="50";
    }
}

outer();

//초기값을 설정하지 않은 경우, score은 any 타입이 되어 어떤 타입의 값이어도 할당이 가능하다.

 

//let
function outer(){
	if(true){
    	let score: number; //타입 지정하기 // 이후 숫자형 외 다른 타입은 할당할 수 없다.
        score= 40;
    }
}

outer();

//const
function outer(){
	if(true){
    //const는 초기값이 무조건 있고, 
    //재할당도 불가하기 때문에 타입을 굳이 설정하지 않아도 초깃값으로 알 수 있다.
    	const score: number;
        score= 40;
    }
}

outer();

 

 

+) 변수 선언 정리

 

var - 함수 단위 scope

let, const - block 단위 scope

 

var, let, const 모두 초깃값 설정 시 해당 초깃값의 타입으로 고정이 된다. => 타입을 굳이 지정하지 않아도 됨

var와 let과 같은 변수 초깃값이 설정되어있지 않은 경우, 타입을 지정해야 한다.

const는 초깃값이 무조건 있어야 하기 때문에 타입 지정하지 않고, 초깃값으로 타입이 확인됨

 

 

 기본 타입

 

- 자바스크립트의 기본 타입과 유사하다.

 

number
string
boolean
undefinded
null
symbol
object
any

 

모든 타입의 하위 타입은 - null, undefined - 상위 타입에 할당될 수 있음

모든 타입의 상위 타입은 - any - 전체 모든 타입의 값이 할당 가능

 

numValue = undefined;
undefinedValue = null;
numVaule = undefined;

anyValue = 1;
anyValue = "hello";
anyValue = {};

 

- 객체

- 원시형 타입을 제외한 값을 할당할 수 있다. (=> 객체 형태로 할당되어야 함)

 

objValue = {name: "hee"};
objValue = {};
objValue = new String(33);
objValue = "hello" //error
objValue = new String("hello")

 

 

- symbol은 Symbol()함수를 통해서만 생성이 가능하다

 

symbolVaule = Symbol();

 

 

+ 배열

- 타입 정의 시,배열 앞에 담길 항목의 타입을 정의해주어야 한다. (섞어서 넣을 경우, any)

 

let nameList : string[]; //배열에 담길 타입을 문자열로 지정
nameList = ["1","3"]
nameList.push(333) // error

 

 

+ 인라인 타입

- 타입 정의시, 객체가 어떠한 속성으로 구성되는지 별도 타입으로 정의하지 않고, 변수 선언과 동시에 인라인으로 정의할 수 있다.

 

//인라인으로 정의
let user1 : {name: string, score:number};
user1 ={
     name:"hee",
     score:26
}

 

+ 매번 재사용되는 건 인터페이스나 클래스로 정의할 수 있다. (위처럼 매번 정의할 필요는 없음)

 

 

+ 튜플

- 타입 정의 시, 배열 안에 들어가는 개수와 타입을 미리 정의하기

let tuple2: [number, string];

tuple2 =[] //error
tuple2 =[1,2]  //error
tuple2 =[1, "hello"]; //2개의 요소, number, string이 존재

 

 

- 인터페이스 interface

 

- interface를 통해 하나의 타입을 정의하는 것

- interface 키워드를 작성하고 해당 이름 작성

 

//1. 인터페이스 : 키워드로 타입 정의
interface TV {
  //메서드 정의, `어떤 행위를 한다`를 설명만 (구현은 하지 않음)
  turnOn(): boolean; //boolead 값 반환
  turnOff(): void; //void : 아무것도 반환을 안한다.
}

const myTV: TV = {
  //구현
  turnOn() {
    return true;
  },
  turnOff() {},
};

//TV 인터페이스를 사용하는 함수
function tryTurnOn(tv: TV) {
  tv.turnOn();
}

tryTurnOn(myTV);

//+)2. 인터페이스 : 행위말고 속성만(데이터만 담고 있는 속성만)
interface Cell {
  row: number;
  col: number;
  piece: PeriodicWave;
}

 

 

- 함수형 타입

 

1. 함수의 매개변수에 타입을 작성해야한다.

 

function add(x:number,y:number){
	return a+b;
}
const result = add(1,2)
//result는 number 라고 추론할 수 있다.

or

function add(x:number,y:number): number { //반환되는 타입을 추론할 수도 있다
	return a+b;
}
const result = add(1,2)

 

 

2. 매개변수의 Optional Parameter처리 등

 

function userInfo (name?: string = "-", smail?:string = "-"){ //`?`로 옵션 파라미터, ="-"로 기본값
	return {name, email};
}

userInfo(); //undefined

//

function userInfo (name: string = "-", smail:string = "-"){ // ="-"로 기본값 설정시 옵션 필요없지
	return {name, email};
}

userInfo(); 

//

function userInfo (name = "-", smail = "-"){ //타입값 지정 또한 필요없지
	return {name, email};
}

userInfo(); 

 

 

3. 함수의 오버로딩

 

- 타입스크립트의 ‘함수 오버로드(Overloads)’는 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것을 말한다.

 

function add(a: string, b: string): string; // 함수 선언
function add(a: number, b: number): number; // 함수 선언
function add(a: any, b: any): any { // 함수 구현
  return a + b;
}

add('hello ', 'world~');
add(1, 2);
add('hello ', 2); // Error - No overload matches this call.

 

- add 함수는 2개의 선언부와 1개의 구현부를 가지고 있다. 주의할 점은 함수 선언부와 구현부의 매개변수의 개수가 같아야한다.

- 함수 구현부에 any가 자주 사용된다.

 

 

- 열거형 enum

ex) 상수의 집합

 

//enum StarBuksGrade {
//	WELCOME,
//    GREEN,
//    GOLD
//}

//나중에 코드가 변경될 수 있기 때문에 초기값을 고정하여 할당하기(숫자도 가능)
enum StarBuksGrade {
      WELCOME="welcome",
      DDD="ddd",
      GREEN="green",
      GOLD=""gold"
}

function getDiscount(v: StarBuksGrade):number{
	switch(v){
    	case StarBuksGrade.WELCOME:
    		return 0;
        case StarBuksGrade.GREEN:
    		return 5;
        case StarBuksGrade.GOLD:
    		return 10;
    }
}