TypeScript에 대해 설명합니다.
글에 오류가 있다면 댓글 부탁드립니다.
학습 내용
TypeScript
TypeScript는 JavaScript의 상위 집합(Superset) 언어이다.
TypeScript = JavaScript + 정적타입 검사
마이크로소프트에서 개발했다.
*정적 검사: 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것. 정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾습니다.
등장 배경
배경
Javascript가 발전하면서 생긴 단점을 보완하기 위해 등장했다.
JavaScript는 초기에는 웹 페이지의 상호작용을 위해 짧은 코드를 작성하는 용도로 개발되었다. 그러나 JavaScript의 인기와 함께 웹 개발자들은 JavaScript를 사용하여 더 많은 기능과 상호작용을 갖는 웹 애플리케이션을 구축하고자 했다.
JavaScript는 동적 타입 언어로서 몇 가지 특징 때문에 개발자들에게 일부 이슈를 야기시켰습니다. 예를 들어, 동등 연산자(==)는 인수를 강제로 변환(coerce)하여 예상치 못한 동작을 유발할 수 있다. 또한, 존재하지 않는 프로퍼티에 접근해도 오류가 발생하지 않는 등 JavaScript의 특성으로 인해 예기치 않은 동작이 발생할 수 있다.
이러한 이유로 인해 타입스크립트(TypeScript)가 등장하게 되었다.
목적
타입스크립트는 JavaScript에 타입 시스템을 도입하여 코드의 안정성과 가독성을 향상시키는 목적으로 개발되었다.
특징과 기대 효과
-
타입스크립트는 JavaScript의 모든 기능과 라이브러리를 그대로 사용할 수 있으며, 타입 시스템을 통해 개발자가 코드를 더욱 안정적이고 확장 가능한 방식으로 작성할 수 있게 해준다.
-
컴파일러가 코드를 분석하고 타입 오류를 검출하는 과정을 거친다.
이를 통해 개발자는 컴파일 단계에서 타입 관련 이슈를 오류를 포착하고 수정할 수 있으므로 런타임 시 발생할 수 있는 타입 관련 버그를 사전에 방지할 수 있다. -
변수, 함수, 객체, 클래스 등에 명시적인 타입을 지정할 수 있다.
이를 통해 개발자는 코드의 의도를 명확히 표현하고, 다른 개발자와의 협업 시 타입 정보를 통해 코드 이해를 돕고, 에디터에서 코드 완성 기능과 타입 체크 기능을 제공받을 수 있다. -
인터페이스와 제네릭 등의 고급 타입 기능을 제공하여 코드의 재사용성과 유연성을 높일 수 있다. 타입스크립트 컴파일러는 타입 추론을 통해 코드에서 암묵적으로 타입을 유추하며, 개발자는 필요한 경우 명시적인 타입 정보를 추가하여 코드의 가독성을 높일 수 있다.
요약
타입스크립트를 사용하면,
- 런타임 에러 최소화
- 코드 가독성 향상
의 효과를 얻을 수 있다.
타입
Boolean, Number, String
let 식별자: type = 값;
ex)
let number1: number = 7;
number1이라는 변수를 정의.
type은 number type으로 정의.
값에 7을 할당
Boolean, Number, String 타입은
작성 방법 외에는 크게 다룰 내용이 없다.
- bigint
Typescript는 Number 타입에서 bigint를 지원한다.
BigInt 타입은 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값이다. BigInt로 Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있다.
Number.MAX_SAFE_INTEGER 상수는 JavaScript에서 안전한 최대 정수값을 나타낸다. (2^53 - 1) = 약 9000조
요약: bigint 타입을 사용하면, 약 9000조를 넘어서는 숫자도 계산이 가능하다.
Array
2가지 방법으로 타입을 선언한다.
- 타입+괄호
let items: string[] = ["apple", "banana", "grape"];
- Array<타입>
let numberList: Array<number> = [4, 7, 100];
Tuple
배열 안에 요소의 타입과 개수를 고정하는 것을 표현할 수 있다.
let user: [string, number, boolean] = ["DongwooJoo", 27, true];
console.log(user[2].toString());이렇게 user[2]에 접근하면, 타입 에러가 발생한다.
user[2]에 있는 요소는 boolean 타입이기 때문이다.
Object 타입
TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타낸다.
- 1번째 방법
let user: {name: string, age: number} = {
name: "kimcoding",
age: 20
}객체의 프로퍼티 타입들을 각기 명시해 주는 방법.
객체는 이런 방식으로 key-value에 구체적인 타입까지도 지정할 수 있다.
- 2번째 방법
let obj: object = {};-> TypeScript에서 object 타입은 모든 객체를 수용하는 타입으로,
객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수 있다.
그러나 이는 타입 안정성을 보장하지 않기 때문에 편하지만, 추천하는 방법은 아닙니다.
Any 타입
의미: 어떤 타입이든 사용하겠다.
let value: any = 4;
모든 타입의 값을 재할당할 수 있다.
any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용하다.
예를 들어, 여러 타입이 섞인 배열을 받고자 할 때 유용하다.
함수
함수 선언문
function add(x: number, y: number):number {
return x + y;
}arrow function
let add = (x: number, y: number): number => {
return x + y;
}
2곳에 작성해야 하는데,
매개변수 옆에 : "타입" 을 작성한다.
매개변수 괄호 밖에 : "타입"을 작성한다.
선택적 매개변수를 활용하는 방법도 있다.
선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.
let greeting = (firstName: string, lastName?: string): string => {
return `hello, ${firstName} ${lastName}`;
}
//정상적으로 작동합니다.
greeting('coding');
//정상적으로 작동합니다.
greeting('coding', 'kim');
//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');그러나 이때는 greating('coding')과 같이 전달인자를 하나만 전달했기 때문에,
뒤의 매개변수는 undefined로 반환이 된다.
연산자 활용 타입
유니온 타입(Union Types)
두 개 이상의 타입을 | 연산자로 결합하여 새로운 타입을 만드는 방식이다.
유니온 타입은 "A이거나 B이다"라는 의미를 가지며, 입력값이 여러 타입 중 하나일 수 있는 상황에 유용하다.
예를 들어, number | string은 숫자 또는 문자열 타입을 의미한다.
유니온 타입을 사용하면 타입 추론이 가능해지고,
타입에 관련된 API를 쉽게 자동완성으로 얻을 수 있으며,
코드의 가독성을 높일 수 있다.
인터섹션 타입(Intersection Types)
두 개 이상의 타입을 & 연산자로 결합하여 새로운 타입을 만드는 방식이다.
인터섹션 타입은 "A이면서 B이다"라는 의미를 가지며,
입력값이 여러 타입의 조건을 모두 만족해야 할 때 사용된다.
예를 들어, Developer & Person은 Developer와 Person 타입이 가지고 있는 모든 속성을 포함하는 타입이다.
인터섹션 타입은 타입 가드가 필요 없으며, 모든 프로퍼티에 접근할 수 있다.
다만, 인터섹션 타입을 사용할 때는 전달해야 하는 값이 모든 타입의 조건을 만족해야 하므로 주의해야 한다.
요약
유니온 타입은 "A이거나 B이다"라는 선택지를 가지고 있으며,
타입 가드를 사용하여 각 타입에 맞게 처리할 수 있다.
인터섹션 타입은 "A이면서 B이다"라는 조건을 충족하는 타입으로
모든 프로퍼티에 접근할 수 있고, 타입 가드가 필요하지 않다.
유니온 타입은 선택적인 경우에 유용하며,
인터섹션 타입은 여러 타입의 조건을 동시에 만족해야 하는 경우에 활용된다.
