타입스크립트

[원티드 프리온보딩 교육과정]

 

사용 이유: 안정성, 표현력

런타임에서 계속 타입을 바꿀 수 있는 언어: 약타입 언어 JavaScript, 다이나믹 타입 언어

강타입 언어: 변수를 선언한 시점부터 지정해야 함. 지정한 타입을 벗어난 값은 해당 값을 할당할 수 없다: 정적타입

 

컴파일 언어: 통째로 번역함. 책 한권을 다 번역한 뒤 완성본을 내가 받아봄. 최초 실행 시간이 길다(컴파일 하는데 시간이 필요)

인터프리터 언어: 실시간 번역. 책 한문장 한 문장을 바로바로. 앞에서 한걸 또 하면 반복해서 해야하고, 시간이 조금 필요함. 최초 실행 시간이 짧다(바로 하니까)

 

추상: 나 이거(매개변수) 하면 이거 줄께(리턴). HOW에  관한 부분이 구체, WHAT에 관한 부분이 추상

타입은 추상을 표현한다.

추상 이라는 것은 "무엇을 한다"고 표현

코드를 "작성"하는 입장에서는 구체적인 동작의 수행 방법이 필요하지만,

함수를 "사용"하는 입장에서는 추상!

알 필요 없게 코드를 짜는게 중요하다.

 

 

배열: 두 가지 표현 방법

const numbers: number[] = [1,2,3]
const numbers: Array<number> = [1,2,3]

튜플

배열이랑 똑같지만 수정하지 못함=> length, element타입이 고정되어 있는 배열

 

Type Alias

타입에 대한 변수. 타입에 대한 표현은 Pascalcase로 적어주기.

type Point = {
	x:number,
    y:number
}

Interface

단, 객체에만 이름을 붙일 수 있다!

(<=> type alias는 여러개 쓸 수 있다.) 

interface Point {
}

그러면 Type Alias? Interface? 어떤걸..?

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Documentation - Everyday Types

공식 문서의 의견

기능상의 차이는 거의 없다.

마음대로 써라.

휴리스틱: 명백한 논리적 근거는 없지만(직관적 경험에서 나온 결과로는) 일단 interface 쓰고, Type Alias 필요할 때 써요

 

interface는 추상을 표현하고 싶을 때.

 

Advanced Type

let age:3 = 3;
age = 5 //error
const age = 3 과 같다.

const를 쓴다.

 

primitive type에 한해서.

Object는 가변하기 때문!

 

 

as const 타입

const numbers = [1,2,3] as const const theme = { red: "#999" gray: } as const

이렇게 쓰면, 자동완성에서 타입이 구체적으로 어떤 색의 숫자인지 볼 수 있다.

 

 

Generic

- 타입을 인자처럼 활용하기

변할 수 있는 타입

Type 'string' is not assignable to type 'number'

function map<T>(array:T[], callback:(...args:any[]) => any;) {
	const result = [];

	for(const element of array){
		result.push(callback(element));
	};

	return result;
}

map<number>([1,2,3,4], x => x + 1); // Good
map<string>(["hello", "world"], x => x.toUpperCase());

keyof : 객체 타입에서 key 만 뽑기

typeof: 값에서 type 추출하기

 

narrowing: 타입 가드. 타입을 분기화해서.

- 타입의 범위를 좁혀 나가기

만약 union을 이용해서 타입을 표현한 경우 (예:  arg: string | number )

if(typeof arg === "string") arg.toUpperCase();

 

https://www.typescriptlang.org/docs/

The starting point for learning TypeScript

https://www.typescriptlang.org/docs/handbook/intro.html

Handbook - The TypeScript Handbook

https://www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBBCcQQ0MwAUVWDEQC0gADVHBQGNJ3KAALygABEAAkYNAMOB4GRonzFBTBPB3AERcwABS0+mM9ysygc9wASmCKhwzQ8ZC8iHFzmB7BoXzcZmY7AYzEg-Fg0HUiQ58D0Ii8fLpDKZgj5SWxfPADlQAHJhAA5SASPlBFQAeS+ZHegmdWkgR1QjgUrmkeFATjNOmGWH0KAQiGhwkuNok4uiIgMHGxCyYrA4PCCJSAA 

TS Playground - An online editor for exploring TypeScript and JavaScript

https://github.com/type-challenges/playground-plugin

GitHub - type-challenges/playground-plugin: Plugin for TypeScript Playground

https://transform.tools/json-to-typescript

JSON to TypeScript

https://iborymagic.tistory.com/73

명령형 vs 선언형 프로그래밍