출처: 엘리스 자료, https://typescript-kr.github.io/
한인호님 강의
동적 타입과 정적 타입
동적 타입 (Dynamic Typing)
- 컴파일 단계 없이 인터프리터와 같은 코드해석기가 코드를 라인 단위로 읽으면서 코드를 실행할때 코드 내의 변수(데이터) 타입이 정해지는 방식
- 인터프리팅 언어들이 동적 타입을 사용하는 이유는 코드 컴파일 없이 바로 코드를 실행해야 하기 때문이다.
- 흔히 스크립트 언어들이라고 불리는 언어들이 동적 타입 방식을 많이 사용함
- JavaSCript, Python, Ruby
-> 코드를 실행해보기 전까지 데이터 타입의 오류를 알아차릴 수 없음
정적 타입 (Static Typing)
- 타입을 코드에 명시적(일부는 묵시적)으로 표현하는 방식으로, 코드가 실행되기 전에 타입을 정의하는 방식
- 언어의 전용 컴파일러가 컴파일 단계에 코드내의 변수들의 타입을 분석하여 코드를 실행하기 전에 결함을 찾을 수 있음
- 코드 내의 변수(데이터) 타입이 실행 단계 이전에 정해지기 때문에 정적 이라는 단어를 쓴다.
- 컴파일 과정을 반드시 거쳐야 하는 단점이 있으나, 그만큼 기본적인 결함은 없는 상태의 결과물을 얻을 수 있다는 큰 장점이 있음
- 코드 리팩터링과 같은 최적화가 되어 있어서 작성한 코드의 성능을 올려줌
자바스크립트의 한계
인터프리터/스크립트 언어
- 일련의 작업만을 수행하도록 하는 코드를 빠르게 작성하는데에 집중되어 있었기 때문에 일반적인 컴파일언어보다는 기능도 적고 제한도 적음(자유도가 높음)
- 소규모 프로젝트, 작업 자동화
- JavaScript, Python, Ruby, ...
컴파일 언어
- 스크립트 언어와 반대로 복잡한 로직을 갖는 시스템을 위해 만들어진 언어
- 기본 기능도 많을 뿐만 아니라 복잡성을 해결하기 위해 어느정도의 제한 (엄격한 규칙)을 가지고 있음
- 중-대규모 프로젝트에 이러한 언어들이 많이 사용됨
- C, C++, Java, Go, ...
자바스크립트의 문제
- 최초에 작은 규모의 개발 목적으로 설계됨
- 대규모 프로젝트에 도입시 많은 문제들이 발생: 웹 프론트는 오직 JS만 가능
코드의 직관성, 고질적인 동적 타입의 문제(매개변수, 리턴값 등), 예측할 수 없는 null, undefined문제
//코드 직관성 + 동적 타입의 문제
function foo(person) {
// person이 객체인지 string타입인지 판단하기 어려움
// 만약 객체라면 안에 있는 property가 무엇인지도 현재 함수 코드만 봐서는 알 수 없음
}자바스크립트에도 타입 시스템 적용
왜 타입 시스템이 필요한가?
뒷 단계일수록 버그를 발견했을때 처리 비용이 기하급수적으로 늘어남
- 미리 에러를 발견할수록 처리 비용 감소
정적 타입 시스템의 장점
- 버그 발견 시점을 앞당길 수 있음
- 상대적으로 간결한 문서화
- 용이한 코드수정 및 리팩터링
Microsoft의 TypeScript
- 2012년 출시
- ES6 기준으로 디자인
- 자바스크립트로 작성된 코드는 타입스크립트 코드이기도 하다
- 타입스크립트로 작성된 코드를 단일 컴파일러를 사용해서 최적화된 자바스크립트 코드로 만드는 방식
타입스크립트 구성
tsc와 tsconfig.json
- tsc: 타입스크립트 전용 컴파일러
- tsconfig.json: TypeScript 컴파일러를 튜닝하기 위한 설정 파일
타입스크립트 특성
다양한 타입
- any & unknown: 아무타입 vs 모르는 타입
- 원시타입: number, string, boolean, null, undefined
- Array 타입
- 함수 포현
- optional
- class
- interface: 객체의 형태, 구현체 X, class와 다르다.
- union & intersection
등등..
코치님 강의
기본타입
boolean
let idsDone: boolean = false;number
2, 8, 10, 16진수 지원
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;string
let color: string = "blue";
color = "red";array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];튜플
타입과 개수가 고정된 배열
let x: [string, number];
x= ['hello', 10]; //성공
x= [10, 'hello']; //에러enum
enum Color {Red, Gree, Blue}
let c: Color = Color.Green;index가 0부터 시작한다. 수동으로 번호를 설정할수도 있다.
enum Color {Red=1, Green=2, Blue=4}
let colorName: string = Color[2]; // => GreenAny
모든 타입 가능
let notSure: any = 4;
notSure = "aaa"; // 성공
notSure = false; // 성공여러 다른 타입이 섞인 배열을 다룰 수 있다.
let list: any[] = [1, true, "free"];
list[1] = 100;void
return값 없을때 사용
function car(): void {
console.log("ho");
}변수에 void를 선언할경우 null, undefined만 할당할 수 있다.
null, undefined
각각 자기자신만 할당 가능
let u: undefined = undefined;
let n: null = null;never
함수식에서 항상 에러를 발생시키거나 절대 반환하지 않는 반환 타입으로 사용
// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message:string): never {
throw new Error(message);
}
function infi(): never {
while (true) {}
}
// 반환 타입이 never로 추론된다.
function fail() {
return error("fail");
}인터페이스
function printLabel(obj: {label:string}) {
console.log(obj.label);
}
let obj = {size: 10, label: "size"};
printLabel(obj);printLabel 함수는 string타입 label을 갖는 객체를 하나의 매개변수로 가진다.
최소한 필요한 프로퍼티가 있는지, 타입이 맞는지만 검사한다.
interface labelValue {
label: string;
}
function printLabel(obj: labelValue) {
console.log(obj.label);
}
let obj = {size: 10, label: "Size"};
printLabel(obj);
공부일기