[Typescript 개념 정리 - 1]

1. 타입스크립트 개념

https://www.typescriptlang.org/

Typed Javascript at any scale

• TypeScript extends Javascript by adding types.
  자바스크립트 언어에 타입을 추가함으로서 확장
• By understanding Javascript,
  Typescript saves you time catching error and providing fixes before you run code
  타입스크립트는 코드 실행전에 에러를 잡고 고칠수 있게함으로서 시간을 절약할 수 있다.
• Any browser, any OS, anywhere JavaScript runs.
  Entirely Open Source.
  어떤 브라우저, 자바스크립트가 동작하는 OS에서 동작, 전부 오픈소스

2. complied 언어와 interpreted 언어 차이

1) complied 언어

• 컴파일이 필요함
• 컴파일러가 필요함
• 컴파일된 결과물 실행

2) interpreted 언어

• 컴파일이 필요 X
• 코드 자체를 실행
• 코드를 실행하는 시점 = 런타임

3. node.js / browser

1)node.js

chrome's V8 Javascirpt Engine을 사용하여, 자바스크립트를 해석하고 OS레벨에서 API를 제공하는 서버사이드용 자바스크립트 런타임 환경

2)browser

HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고, DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경

4. 프로젝트 내에서 ts 설치

mkdir tsc-project

cd tsc-project

npm init -y // y는 옵션 주기

npm i typescript

cat package.json

npx tsc --init

.ts 파일 컴파일

npx tsc

command + shift + p

5. BASIC TYPE

(1) void / undefined / null

//void는 타입으로만 사용, 값으로 사용하지 않음 
//let v : void = void (X)  
  
//void 타입은 undefined만 사용할 수 있음  
let v : void = undefined;
  
//undefined와 null은 각각 자신의 타입에 해당하는 값만 설정할수 있다.  

let u : undefined = undefined;
//let u : undefined = null (X)

let n : null = null;
//let n : null = undefined(X)  
  

//let name : string = null(X)
//let name : string = undefined(X)
  
//union 사용

let union1 : string | null | undefined = undefined
let union2 : string | null | undefined = 'abc'
let union3 : string | null | undefined = null
  

(2) Array

let list1 : number[] = [1,2,3]

let list2: (number | string)[] = [1,2,3,"4"]

//let list: Array<number> = [1,2,3]  
//이렇게도 사용할 수 있으나 jsx, tsx 사용시 충돌이 일어날 수 있므로 사용자제 권고

• Tuple
  길이가 정해진 배열에 각각 다른 타입을 지정할 때 사용

 
let x: [string , number];

x = ["hello", 39];

/* x = [10, "Mark"](X)
오류 : Type 'number' is not assignable to type 'string'.ts(2322)
	  Type 'string' is not assignable to type 'number'.ts(2322)
*/
  
/* x[2]; : 오류 발생
 오류 : Tuple type '[string, number]' of length '2' has no element at index '2'.ts(2493)  
*/
const person : [string, number] = ["Mark", 39];

/* const [first, second, third] = person;   
오류 : Tuple type '[string, number]' of length '2' has no element at index '2'.ts(2493) => 2번 인덱스의 값은 없으므로
*/  

(3) any

• 어떤 타입이어도 상관없음
• 최대한 사용하지 않도록 함(컴파일 타임에 에러체크가 정상적으로 되지 않으므로)
• 컴파일 옵션 중에는 any를 명시해야 하지 않으면 오류를 출력하도록 옵션도 존재
  noImplicitAny

• any는 계속해서 개체를 통해 전파
• 타입 안전성을 잃을 수 있다.
• 타입 안전성은 TypeScript를 사용하는 주요 동기 중 하나이며 필요하지 않은 경우에는 any 사용을 하지말것
• 생산성을 위해서 any를 사용하더라도 신중하게 고려할것

function returnAny(message) : any{
  	console.log(message)
  }
 returnAny("아무거나 리턴")

(4) unknown

• 모르는 변수의 타입을 any로 사용할 경우 이후에 연산된 코드가 영향을 받을 수 있음(타입 안정성 해침)-> leaking 방지 필요성
• 응용 프로그램을 작성할 떄 모르는 변수의 타입을 묘사해야 할 수도 있음
• 타입 강제를 위해 unknown을 사용

declare const maybe : unknown;


const aNumber : number = maybe;

if(maybe === true){ //타입 가드
		const aBoolean: boolean = maybe; 
		
		const aString : string = maybe;
}

	if(typeof maybe === 'string'){
		const aString : string = maybe; //string 타입  

		const aBoolean: boolean = maybe;
}

(5) never

• 아무 것도 return 되지 않음
• 함수가 실행이 끝나지 않음

function error(message : string) : never {
		throw new Error(message) // 예외 던진후 함수 종료 => never 리턴
}

function fail(){
		return error("failed");
}

function infiniteLoop : never {
		while(true){}

}

• never 타입은 모든 타입의 sub 타입이며, 모든 타입에 할당 할 수 있다.
• 하지만, never에는 어떤것도 할당할수 없다.
• any 조차도 never에 할당할 수 없다.
• 잘못된타입을 넣는 실수를 막고자 할때 사용하기도 한다

let a : string = "hello"

if(typeof a !== 'string'){
		a; //never
}

declare const a : string | number;

if(typeof a !== 'string'){
	
}

//다음과 같이 잘못된 타입을 넣는 실수를 방지하기 위해 사용

type Indexable<T> = T extends string ? T & {[index : string] : any } : never;

const b : Indexable<{}> = ''; // 오류 발생

(6) void

• return된 부분을 가져다가 아무것도 하지 않겠다는 것을 명시하기 위해 사용한다.

function returnVoid(message : string): void{
		console.log(message);
		return;
		//return undefined;
}

returnVoid("리턴이 없다.");