JavaScript의 문제점

자바스크립트는 전세계의 97% 이상의 웹사이트에서 사용되고 있는 만큼 가장 인기 있는 프로그래밍 언어 중에 하나이다.

자바스크립트는 웹사이트를 동적으로 만들 수 있고 다른 복잡한 기능들을 구현가능하게 해주기 때문에 웹사이트에서는 거의 필수적인 존재라고 볼 수 있다.

하지만 타입 또한 동적으로 결정되기 때문에 (변수의 타입이 런타임 중에 결정되므로) 개발자가 의도하지 않은 타입 변환으로 인해 버그가 발생할 수 있다.

아래 코드를 예시로 보자.

function add(var1, var2){
    return var1 + var2
}

console.log(add(1, 2))  // 3
console.log(add(1, '2'))  // 12 (문자열 결합)

함수 add는 두 개의 인자를 받아와서 덧셈 연산을 수행하는 함수이다.

만약 파라미터로 숫자 타입과 문자열 타입의 인자가 함께 들어가면 숫자를 문자열로 암묵적으로 변환하여 문자열 ‘12’를 출력한다.

이런 암묵적인 타입 변환이 예상치 못한 동작을 초래할 수 있으며, 디버깅과 유지보수를 어렵게 만들 수 있다.

물론 아래와 같이 타입을 체크하는 함수를 만들 수도 있지만, 이 또한 코드를 실행시키기 전에는 오류를 확인할 수 없다.

function addTypeSafe(num1, num2) {
    if (typeof num1 === 'number' && typeof num2 === 'number') {
        return num1 + num2;
    } else {
        throw Error('숫자만 파라미터에 입력해주세요.')
    }
}

console.log(addTypeSafe(1, 2))  // 3
console.log(addTypeSafe(1, '2'))  // Error 발생 (타입 체크)

반면 TypeScript는 정적 타입 체계를 도입하여 개발자가 변수의 타입을 명시할 수 있어 잘못된 타입간의 연산이나 할당을 사전에 방지하여 런타임 에러를 줄일 수 있다.

function add(num1: number, num2: number){
    return num1 + num2;
}

console.log(add(1, 2))  // 3
console.log(add(1, '2'))  // 오류: Argument of type '"2"' is not assignable to parameter of type 'number'.

이제 타입스크립트에 대해 공부해보자..!!

TypeScript 환경설정

• 컴퓨터에 Node.js가 설치되어 있으면 타입스크립트를 실행할 수 있다.

• 타입스크립트를 설치하기 위해서는 다음 명령어 실행

Windows

npm install –g typescript // 현재 컴퓨터에 설치
npm install typescript // 로컬로 설치(현재 위치의 폴더에 설치)

Mac

$ sudo npm install -g typescript // 현재 컴퓨터에 설치
$ sudo npm install typescript // 로컬로 설치(현재 위치의 폴더에 설치)

tsconfig.json 파일 만들기

• TypeScript 프로젝트를 어떻게 빌드할지 설정하는 파일
• 편집기에서 특정 폴더를 열었을 때, 편집기가 이제 해당 폴더를 타입스크립트 프로젝트로 인식하게 한다.

tsc --init

TypeScript 기본 타입

타입 표기 (Type Annotation)

타입스크립트 코드에서 어떤 변수 또는 값의 타입을 표기하기 위해 타입 표기를 사용한다. 타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type 의 형태로 표기한다.

• 타입스크립트의 기본적인 타입은 자바스크립트의 일곱가지 기본 원시 타입과 동일하다.
  • null
  • undefined
  • boolean
  • string
  • number
  • bigint
  • symbol
• 타입스크립트는 다음 값을 일곱 가지 기본 원시 타입 중 하나로 간주한다.

null; // null
undefined; // undefined
true;  // boolean
"Louise";  // string
1337;  // number
1337n;  // bigint
Symbol("Franklin");  // symbol

TypeScript 기본 타입

불리언 (Boolean)

• 참/거짓(true/false) 값

let isDone: boolean = false;

숫자 (Number)

• JavaScript처럼, TypeScript의 모든 숫자는 부동 소수 값
• TypeScript는 16진수, 10진수 리터럴에 더불어, 2진수, 8진수 리터럴도 지원

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

문자열 (String)

• JavaScript처럼 TypeScript도 큰따옴표 (")나 작은따옴표 (')를 문자열 데이터를 감싸는데 사용

let color: string = "blue";
color = 'red';

• 템플릿 문자열 을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 표현식을 포함시킬 수도 있음.
• 이 문자열은 백틱/백쿼트 (`` ) 문자로 감싸지며, ${ expr }`과 같은 형태로 표현식을 포함

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

배열 (Array)

• TypeScript는 JavaScript처럼 값들을 배열로 다룰 수 있게 해줌
• 배열 요소들을 나타내는 타입 뒤에 []를 쓰거나 제네릭 배열 타입을 써서 사용

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

튜플 (Tuple)

• 튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

• 정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타남.

console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.

• 정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면, 오류 발생

x[3] = "world"; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.

console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.

열거 (Enum)

• enum은 값의 집합에 더 나은 이름을 붙여줄 수 있음.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

• 기본적으로, enum은 0부터 시작하여 멤버들의 번호를 매기지만, 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있음.
• 예를 들어, 위 예제를 0대신 1부터 시작해 번호를 매기도록 바꿀 수 있음.

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

• 또는, 모든 값을 수동으로 설정할 수 있음.

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

• 이렇게 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있음.
• 예를 들어, 위의 예제에서 2라는 값이 위의 어떤 Color enum 멤버와 매칭되는지 알 수 없을 때, 이에 일치하는 이름을 알아낼 수 있습니다:

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력됩니다.

Any

• 타입을 지정하기 애매할 때, 모든 타입을 허용
• 기존에 JavaScript로 작업할 수 있는 강력한 방법으로, 컴파일 중에 점진적으로 타입 검사를 하거나 하지 않을 수 있음.

let anyVar: any;
anyVar = 100;
anyVar = '문지은';
anyVar = true;

• 어떤 타입의 변수이든 값을 지정할 수 있음.

let testNumber: number = anyVar;
let testString: string = anyVar;
let testBoolean: boolean = anyVar;

unknown

• any와 마찬가지로 모든 타입을 허용
• any 타입과는 다르게 프로퍼티 또는 연산을 하는 경우 컴파일러가 체크합니다. 그러므로 문제 되는 코드를 미리 예방할 수 있음

let unknownType: unknown;
unknownType = 100;
unknownType = 'unknown';
unknownType = true;

• 다른 타입 변수에는 저장 불가능

let testNumber2: number = unknownType; 
// 오류 : 'unknown' 형식은 'number' 형식에 할당할 수 없습니다.

Void

• 어떤 타입도 존재할 수 없음
• 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰임

function warnUser(): void {
    console.log("This is my warning message");
}

Never

• 절대 발생할 수 없는 타입
• 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰임

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

References

[Typescript] 타입스크립트를 "사용해야 하는" 이유 (+ 온라인에서 연습하기)

[TypeScript]타입스크립트 any, unknown 차이

https://typescript-kr.github.io/pages/basic-types.html

https://ahnheejong.gitbook.io/ts-for-jsdev/03-basic-grammar/primitive-types