거인의 코딩일지
타입스크립트란??? 본문
타입스크립트란???
자바스크립트에 타입을부여한 언어, 자바스크립트의 확장된 언어이다.
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다.
이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.
타입 스크립트를 쓰는 이유???
타입스크립트는 2가지 관점에서 자바스크립트 코드와 품질과 개발 생산성을 높일 수 있다.
1. 에러의 사전방지
2. 코드 가이드 및 자동완성(개발 생산성 향상)
에러의 사전 방지
타입스크립트는 에러를 사전에 미리 예방할 수 있다.
// math.js
function sum(a, b) {
return a + b;
}
// math.ts
function sum(a: number, b: number) {
return a + b;
}
두 코드 모두 두 숫자의 합을 구하는 함수 코드이다 하나는 자바스크립트 다른하나는 타입스크립트로 작성하였다.
sum(10, 20); // 30
자바스크립트 코드로도 이렇게 sum 함수를 이용하여 숫자 10과 20을 더했을 때 30을 얻을수 있지만 문자열을 sum 안에다가 넣었을때 결과는 달라지게 된다.
sum('10', '20'); // 1020
문자열을 넣는다면 주석에 작성해 둔것처럼 1020 이라는 값을 얻게된다.
타입스크립트를 사용한다면 이처럼 의도하지 않은 코드의 동작을 예방할 수 있다.
// math.ts
function sum(a: number, b: number) {
return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.
이 코드를 VScode 에서 작성한다면 이런 오류를 확인 할 수 있다.
코드 자동완성과 가이드
타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것이다. VScode 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있다.
타입스크립트의 기본 타입??
타입스크립트의 기본 타입은 Boolean, Number, String, Object, Array, Tuple, Enum, any, void, null, undefined, never 이 있다.
Tuple : 튜플은 배열의 길이가 ㅈ고정되고 각 요소의 타입이 지정되어 있는 배열 형식이다.
let arr : [String : number] = ["hi", 10];
// 만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류
Enum : 이넘은 C, Java 와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합이다.
enum Avengers { Capt, IronMan, Thor}
let hero : Avengers = Avengers.Capt;
// 이넘은 인덱스 번호로도 접근 가능, 이넘의 인덱스를 사용자 편의로 변경 가능하다.
any : 기존에 자바스크립트로 구현되어 있는 웹서비스 코드에 타입스크립트를점진적으로 사용할 때 활용하면 좋은 타입.
단어 그대로 모든 타입 들에서 가능
void : 반환값이 없는 함수의 반환 타입, 아래와 같이 return 이 없거나 return이 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void 로 지정
function printSomething():void {
console.log('sth');
}
function returnNothing():void {
return;
}
Never : 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입
function neverEnd() : never {
while(true){
}
}
'코딩 > JS' 카테고리의 다른 글
[JS] 객체 환산 연산자란? (...) (0) | 2023.09.25 |
---|---|
메서드 체인(Method Chaining)이란? (0) | 2023.08.14 |
널 병합 연산자 [Nullish coalescing operator] (??) VS 널 병합 할당[Nullish coalescing assignment](??=) (0) | 2023.08.14 |
[Vue.js] Props? Emits? (0) | 2023.08.05 |
[Vue.js] 컴포넌트란? (0) | 2023.08.05 |