.jpg)
TypeScript 기본기 다지기
Table of Content
1. TypeScript란?
TypeScript?
•
TypeScript는 타입 구문이 있는 JavaScript이다.
◦
TypeScript는 JavaScript 기반의 강력한 타입 프로그래밍 언어로 어떤 규모에서도 더 나은 도구를 제공한다.
정적 VS 동적 프로그래밍 언어(토글)
•
TypeScript는 JavaScript의 상위 집합이다.
ES(ECMAScript)6 이후, 모던 자바스크립트라고 부름
◦
TypeScript는 추가적인 구문을 JavaScript에 에디터와 긴밀히 연결 되는 기능을 제공 함. 에디터에서 일찍 오류를 잡을 수 있음
▪
개발자는 개발 단계에서 코드 작성 중 실시간으로 오류를 발견할 수 있음
◦
TypeScript 코드는 JavaScript로 변환되며, JavaScript가 실행되는 모든 곳 (브라우저, Node.js, Deno, Bun 및 앱)에서 실행 됨
▪
TypeScript는 컴파일 과정에서 원래 코드의 의미를 보존하면서, 타입 정보는 제거하고 순수한 JavaScript 코드로 변환 됨
▪
기존 JavaScript 프로젝트에 쉽게 통합할 수 있는 장점
◦
TypeScript는 JavaScript를 이해하고 타입 추론을 사용하여 추가 코드 없이 훌륭한 도구를 제공
▪
TypeScript는 JavaScript의 문법과 동작 방식을 완전히 이해하고 있음
▪
JavaScript로 작성된 코드가 TypeScript에서도 유효하다는 것
•
TypeScript는 JavaScript의 유연성, 확장성을 유지하면서도 정적 타입 시스템의 이점을 제공하여, 동적+정적 타입 언어의 특성을 모두 이해하는 더 나은 개발 경험을 제공
2. 코드를 통한 확인
2.1 Javascript의 코드
심플 테스트용 프로젝트 생성
•
빈 프로젝트 폴더에서 아래 명령어 입력
npm init -y
Shell
복사
•
index.js 파일 생성
•
index.js에서 아래와 같은 기본 Javascript 변수 선언 및 할당(초기화)
// Javascript code
let a = 10; // number
let b = "Hello Web"; // string
let c = true; // boolean
let d = [1, 2, 3] // array
let e = { name: "Bob", age: 30 }; //object
TypeScript
복사
•
a, b 변수 재할당
// Re-Initialize(Dynamic)
a = "abcd"; // string
b = 1004; // number
TypeScript
복사
•
로그를 통한 출력
console.log("a=" + a + ", type of a=" + typeof a);
console.log("b=" + b + ", type of b=" + typeof b);
console.log("c=" + c + ", type of c=" + typeof c);
console.log("d=" + d + ", type of d=" + typeof d); // 배열(array)은 객체(object)의 일종 - 참조형 변수
console.log("d[0]=" + d[0]); // 참조형 변수는 키(인덱스)로 접근해야 값을 알 수 있음
console.log("e.name=" + e.name + ", e.age=" + e.age + ", type of e=" + typeof e);
TypeScript
복사
•
실행확인
node index.js
Shell
복사
•
이를 통해 Javascript의 특징
◦
Javascript : Dynamically typed language
◦
변수의 타입이 초기화를 통해 변경 될 수 있음 = 고정된 것이 아님 = 유지보수가 어려움
◦
실행 되어야 타입을 알 수 있음 = 런타임 환경에서 타입이 결정, 변경 됨
유지 보수의 어려움..
// [무서운이야기]
let columnLength = 10; // 초기 개발 때 cm단위라 생각하고 number 타입으로 기획
// ... 개발중
// ... 오랜 시간 + 수많은 코드...
// ... 길이를 입력하는 부분
// ... 잠시 신입 개발자가 개발함
columnLength = "30cm"; // 길이를 입력.. 오류가 없다?
// ... few days later
// ... 원래 개발자가 휴가갔다 복귀함
// ... few days later
let addLength = columnLength + 5; // 15cm... 35cm 처럼 나오겠지
// ... 측정 단위 변경 필요 기획 변경
// ... cm를 m로 바꾸려면..?
let meterLength = addLength / 10; // 0.15m... 0.35m 처럼 나와야지..
// ... few days later
// ... 개발 완료
console.log(addLength + "m")
console.log(meterLength + "m")
TypeScript
복사
•
개발 중에 어떤 문제도 알 수 없었지만 개발자가 예상한 값에 이상이 있음
•
수 많은 코드에서 틀린 부분을 찾기 어려울 수 있음
2.2 TypeScript의 코드
무서운 이야기를 해결해보자
•
타입 스크립트 설치
npm i typescript
Shell
복사
•
타입 스크립트 환경 설치
npx tsc --init
Shell
복사
•
타입 스크립트는 .ts 확장자 파일에서 사용 할 수 있음
◦
index.js를 → index.ts 로 변경
◦
에디터에서 곧바로 나타나는 오류 확인
◦
변수에 타입 지정
// TypeScript code
let a:number = 10; // number
let b:string = "Hello Web"; // string
let c:boolean = true; // boolean
let d:number[] = [1, 2, 3] // array
let e:Person = { name: "Bob", age: 30 }; //object
interface Person {
name: string;
age: number;
}
TypeScript
복사
◦
이후에 초기화로 변수에 값을 넣으려 할 때 타입이 맞지 않으면 오류를 발생 시킴
▪
정상적인 변수 값 재 할당 가능
// Re-Initialize(Static)
// a = "abcd"; // string
a = 300; // number, OK
// b = 1004; // number
b = "Hi"; // String, OK
TypeScript
복사
▪
Javascript로 컴파일
npx tsc index.ts
Shell
복사
▪
컴파일 된 js파일은 타입 등 표기가 없는 순수 자바스크립트인 것을 확인
▪
node로 실행
node index.js
Shell
복사
2.3 타입 추론
TypeScript는 정적 타입 언어
•
위에서 본 것 처럼 타입스크립트는 변수 초기화 단계에서 타입을 지정하여 개발자 환경에서부터 타입과 관련된 오류를 찾아 낼 수 있다.
•
하지만 아래와 같이 기존 순수 JavaScript와 같이 변수를 선언해도 문제가 되지 않는다.
// TypeScript의 타입 추론
let f = 10;
TypeScript
복사
•
다만 변수 값을 재할당 할 때, 최초 변수의 예상 타입과 맞지 않는 경우 오류를 나타낸다.
// TypeScript의 타입 추론
let f = 10;
f = "Hi";
TypeScript
복사
•
이렇게 초기화 시점에서 타입을 지정해 주는 걸 타입 추론, Type Inference라고 함
◦
타입에 대한 버그 최소화
2.4 메서드에서의 타입 안정화
변수 선언 뿐만 아니라 메서드에서도 마찬가지로 적용
•
아래와 같이 add 메서드를 만든 경우에도 즉시 오류가 나타난다.
◦
이는 js 파일에서 해당 함수를 선언해보면 오류가 없는 것을 비교 할 수 있다.
// TypeScript의 파라미터 타입 검사
function add(x, y) {
return x + y;
}
TypeScript
복사
•
타입 스크립트에서는 파라미터 및 반환 타입을 명시해 주어야 한다.
// TypeScript의 파라미터
function add(x : number, y : number): number {
return x + y;
}
TypeScript
복사
•
아래처럼 해당 메서드를 사용하려고 할 때, 그 오류를 직접 확인 할 수 있다.
let sum = add(a, b);
TypeScript
복사
•
이렇게 다양한 방식으로 타입을 잘못 사용하는 걸 막아주는 걸 Type Safety라고 한다.
◦
타입스크립트로 코드를 작성하면 규모가 커져도 안정되게 개발을 진행 할 수 있음
◦
유지보수성이 높음
◦
개발 단계에서 실행 전에 타입 에러를 검사하는 걸 정적 타입 검사라 함
◦
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
TypeScript
복사
▪
이 코드를 .js 와 .ts에서 각각 확인해본다.
▪
쉽게 찾을 수 없는 오류 일 수도 있다.
•
자바스크립트는 잘못 작성한 height 필드가 오브젝트에 새로 추가된 필드인 것으로 인지하고 오류라 생각하지 않음.
▪
이런 개발자의 실수, 오류를 빠르게 찾아내는 것이 필요하며, 서포팅이 큰 도움이 됨
Related Posts
Search
