DAY 23 - TIL

동적 타입

컴파일 단계 없이 인터프리터와 같은 코드 해석기가 코드를 라인 단위로 읽으면서 바로 코드를 실행할 때 코드 내의 

변수(데이터)타입이 정해지는 방식

인터프리팅 언어들이 동적 타입을 사용하는 이유는 코드 컴파일 없이 바로 코드를 실행해야 하기 때문

스크립트 언어들이라고 불리는 언어들이 동적 타입 방식을 많이 사용 Ex) JS, PYTHON, RUBY

 

인터프리터/스크립트 언어

• 일련의 작업만을 수행하도록 하는 코드를 빠르게 작성하는 데에 집중이 되어있으므로 일반적인 컴파일 언어보다는 기능도 적고 제한도 적음(자유도가 높음)
• 소규모 프로젝트, 작업 자동화
• JS/PYTHON/RUBY/SHELL SCRIPT...

 

정적 타입

타입을 코드에 명시적(일부는 묵시적)으로 표현하는 방식으로써 코드가 실행되기 전에 타입을 정의하는 방식

• 언어의 전용 컴파일러가 컴파일 단계에 코드 내의 변수들의 타입들을 분석하여 코드를 실행하기 전에 기초적인 결함을 찾을 수 있음
• 컴파일 과정을 반드시 거쳐야하는 단점이 있으나 그만큼 기본적인 결함은 없는 상태의 결과물을 얻을 수 있음
• 코드 리팩터링과 같은 최적화가 되어있어서 작성한 코드의 성능을 올려줌

컴파일 언어

• 스크립트 언어와 반대로 복잡한 로직을 갖는 시스템을 위해 만들어진 언어
• 기본 기능도 많을 뿐만 아니라 복잡성을 해결하기 위해 어느 정도의 제한(엄격한 규칙)을 가지고 있음
• 중-대규모 프로젝트
• C/C++/JAVA/RUST/GO+....

 

JS의 문제

• 코드의 직관성
• 고질적인 동적 타입의 문제(매개변수,리턴값 등)
• 예측할 수 없는 null, undefined 문제 / reference to undefined...

/ 코드 직관성 + 동적 타입의 문제
function func1(person) {
// person이 객체인지 string타입인지
// 판단하기가 어려움
// 만약 객체라면 안에 있는 property가
// 무엇인지도 현재 함수 코드만 봐서는
// 알 수가 없음
}

// 동적 타입의 문제
function foo() {
let a = 1;
let b = ‘2’;
console.log(a + b); // ?
}

// 예측할 수 없는 null, undefined 문제
function foo(obj) {
console.log(obj.name); // MAX
console.log(obj.key.name); // reference to undefined property name
}
foo({
id: 1,
name: “Max”,
})

일상적인 프로그램 개발 과정(개발 부분만)

코드추가/수정 -> 컴파일 -> 커밋 -> 코드리뷰 -> 빌드 -> 배포

 

타입 시스템을 추가하여 뒷 단계일 수록 버그를 발견했을 때의 처리 비용이 기하 급수적으로 늘어나는 것을 방지

• 미리 에러를 발견할 수록 처리 비용은 감소
• 코드 수정/개발 단계에서 조금 더 엄격하게 작업을 하면 잠재적인 버그들이 현저히 줄어들 수 있다는 것

정적 타입 시스템의 장점

• 버그 발견 시점을 앞당김
• 상대적으로 간결한 문서화
• 용이한 코드수정 및 리펙터링

 

TypeScript

자바스크립트에 정적 타입 시스템을 도입한 모델

JS의 확대집합, JS로 작성된 코드는 타입스크립트 코드

타입스크립트로 작성된 코드를 단일 컴파일러를 사용해서 최적화된 JS코드를 만드는 방식

 

• 대규모 커뮤니티= 많은 사용자
• 다수의 타입스크립트 기반 프로젝트 -> 잘 갖추어진 생태계
• 많은 프레임워크 또는 런타임 지원(React,Vue,Angular,Node.js,Deno...)
• 사용자가 많은 IDE(VScode)에서 적극적으로 지원(코드를 해석해서 자동완성, 에러체크등 여러 기능 제공)

타입 스크립트 기본구성

• tsc : 타입스크립트 전용 컴파일러
• tsconfig.json: 타입스크립트 컴파일러를 튜닝하기 위한 설정 파일

다양한 타입

• any & unknown: 아무 타입 vs 모르는 타입
• 원시 타입 : number,string,boolean,null,undefined
• Array타입
• 함수 표현
• optional
• class/interface
• union & intersection
• type alias
• literal
• enum
• utility types

타입 추론

function addFunc(a: number, b: number, c: number) {
// 리턴 타입이 number이지만 알아서 함수를 읽고 추론 하기 때문에
// 함수 표현식에 리턴 타입을 명시 안해도 됨
	return a + b + c;
}
function main() {
// num1의 타입을 명시 안했지만 1이라는 숫자가 할당되었기 때문에 알아서 number 타입이라고 추론함
	const num1 = 1;
	const num2 = 5;
	const num3 = 10;
	const result = addThree(num1, num2, num3);
}

 

정적 타입 분석

• tsc<filename> 명령으로 .ts파일을 컴파일 함과 동시에 타입 분석을 실행함
• 타입 분석 후 문제가 있을 시에는 에러 로그를 띄어줌
• VScode의 경우 현재 보고 있는 코드에 대한 실시간 타입 분석을 해주며 문제시 빨간줄로 표시

컴파일

• tsc<filename> 명령으로 작성한 .ts 파일들을 컴파일
• tsconfig.json 파일에서 다양한 컴파일 설정을 바꿔줌  ex)컴파일 결과물 경로변경/컴파일 대상경로,컴파일 제외경로

제네릭

• 함수, 인터페이스, 클래스에 재상용성을 더해준 기능
• 함수, 인터페이스, 클래스를 정의한 사람이 아닌 사용하는 사람이 필요한 타입을 제공하는 방식
• 특정 구조를 가진 함수, 인터페이스, 클래스를 다양한 타입을 적용시킴으로 사용성을 극대화