[TS] TypeScript 기초 문법

타입스크립트 (TypeScript)

자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능들을 추가한 언어

타입 시스템

타입과 관련된 언어의 문법 체계

• 즉, 프로그래밍 언어를 사용할 때 타입과 관련하여 지켜야 하는 규칙들을 모아둔 체계

✅ 정적 타입 시스템 

코드 실행 전에 모든 변수의 타입을 고정적으로 결정

• 모든 변수에 일일이 타입을 지정해주어야 하기 떄문에 타이핑 양이 증가하고 유연한 프로그래밍이 불가하다.
• 엄격하고 고정적인 시스템
• C, JAVA

✅ 동적 타입 시스템 

코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입을 결정

• === 변수의 타입을 직접 정의하지 않는다
• 변수의 타입이 어떤 하나의 타입으로 고정되지 않고 현재 변수에 담긴 값에 따라 동적으로 달라진다. 
• 코드의 타입 오류를 미리 검사할 수 없어 예기치 못한 오류가 발생할 수 있다. 
• 자유롭고 유연한 시스템
• Python, JavaScript

✅ 타입스크립트와 점진적 타이핑

자바스크립트의 동적 타입 시스템과 자바의 정적 타입 시스템을 혼합한 시스템

• 타입스크립트에서는 정적 타입 시스템처럼 변수의 타입을 코드 실행 전에 결정하고 타입 오류가 없는지 프로그램 실행 전에 코드를 검사한다. 
• 정적 타입 시스템처럼 안전하지만 동적타입시스템처럼 모든 변수에 직접 타입을 명시하지 않아도 된다. 
  • 변수에 담기는 초기값을 기준으로 타입을 자동으로 추론하기 때문이다.
• 이러한 타입 시스템을 점진적 타입 시스템이라고 한다.
• 즉, 점진적으로 타입이 정의된 변수들에 대해서는 타입을 미리 결정하고 타입이 정의되지 않은 변수들에 대해서는 타입을 자동으로 추론하는 시스템이다.

기본 타입

타입스크립트가 자체적으로 제공하는 타입 

원시 타입

✅number

숫자를 저장하는 타입

• 정수 뿐만 아니라 소수, 음수, Infinity, NaN 등의 특수한 숫자들도 포함
• 변수 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 문법을 타입 주석 또는 타입 어노테이션이라고 한다.

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;

num1 = 'hello'; // ❌
num1.toUpperCase(); // ❌

✅string

문자열을 의미하는 타입

• 쌍따옴표, 작은 따옴표, 백틱, 템플릿 리터럴로 만든 모든 문자열 포함

// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;

✅boolean

참과 거짓을 저장하는 타입

• true 또는 false만 해당

// boolean
let bool1 : boolean = true;
let bool2 : boolean = false;

✅null

오직 null 값만 포함하는 타입

// null
let null1: null = null;

✅undefined

오직 undefined 값만 포함하는 타입

// undefined 타입
let unde1: undefined = undefined;

✅any

어떤 타입이든 쓰일 수 있음

• 즉, 타입 검사를 하지 않는다.
• 해당 값에 대해서 타입 체킹을 끄는 것이므로 남용하지 않아야 한다. 

let anyVar: any = 10;
anyVar = "hello";

anyVar = true;
anyVar = {};

anyVar.toUpperCase();
anyVar.toFixed();
anyVar.a;

✅unknown

타입의 전체 집합

• any와 같이 모든 타입의 값을 가질 수 있다. 
• 그러나 unknown 타입의 값은 어떤 타입의 변수에도 저장할 수 없다.
• any는 타입체킹을 끄는 것이지만 unknown은 정확히 모르지만 어떤 한 타입인 것으로 보다 안전하다.

let unknownVar: unknown;

unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

✅never

타입의 공집합

• 불가능을 의미한다.
• any를 포함하여 그 어떠한 타입의 값도 never 타입 변수에 할당할 수 없다. 
• 함수가 어떠한 값도 반환할 수 없는 상황에서의 반환 값 타입으로 사용된다.
• 조건문에서 철저한 일치를 보장하기 위한 용도로 사용된다. 

function func3(): never {
  while (true) {}
}

function func4(): never {
  throw new Error();
}

✅void

함수의 반환값이 없음을 나타내는 타입 

• undefined 이외의 타입은 할당할 수 없다.
• strictNullChecks 옵션을 해제하면 null도 할당 가능하다.

function func2(): void {
  console.log("hello");
}

let a: void;
a = undefined;

// "strictNullChecks: false" 일 경우
let a: void;
a = undefined;
a = null;

 

리터럴 타입

딱 하나의 값만 포함하는 타입

• 타입스크립트에는 string, number 처럼 범용적으로 많은 값을 포함하는 타입 뿐만 아니라 딱 하나의 값만 포함하는 타입도 존재한다.
• 리터럴 means 값

let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;

배열

✅배열 타입 표기법

• 배열 요소들을 나타내는 타입 뒤에 [] 쓰기

let numArr: number[] = [1, 2, 3]
let fruits: string[] = ["Apple", "Banana", "Mango"];

✅제네릭 배열 타입

• <>안에 타입 쓰기

let fruits: Array<string> = ["Apple", "Banana", "Mango"];

✅유니온 타입 배열

• 다양한 타입의 배열 요소를 갖는 배열 타입은 소괄호와 바(|)를 이용하여 배열 요소가 둘 중 하나의 타입에 해당하도록 타입 정의

let multiArr: (number | string)[] = [1, "hello"];

✅다차원 배열

• []를 연달아 작성해 다차원 배열 타입 정의

let doubleArr : number[][] = [
  [1, 2, 3], 
  [4, 5],
];

 

튜플

크기와 타입이 고정된 배열

• 컴파일 시 튜플은 결국 배열로 변환된다.
  • push나 pop을 이용하여 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다. 

✅타입 고정

let x: [string, number];

x = ["hi", 10]; // 성공
x = [10, "hello"]; // 오류(원소 타입 불일치)
x = ["hello", 10, 99]; // 오류(원소 개수 불일치)

✅값 고정(강한 타입)

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

tuple = [2, 3]; //오류