TypeScript의 개념

TypeScript(타입스크립트)란?

자바스크립트의 모든 기능을 포함한 상위 집합의 언어입니다. 즉, typescript = javascript + 정적 type system 입니다.

 

 

 

 

모던 개발 환경에서 안전한 프로그래밍을 위해서는 정적 타입 시스템이 존재하는 언어를 사용하는 것이 필수이기 때문에 타입스크립트는 중요합니다!

 

 

 

 

 

 

Javascript vs TypeScript 

특징	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
컴파일	필요 없음	javascript로 컴파일 필요 (프로젝트가 대형화되면 컴파일 시간이 길어짐)
개발 경험	유연하고 빠르게 시작 가능	코드 완성, 타입 검사 등으로 향상된 개발 경험
프로젝트 규모	작은 프로젝트에 적합	대규모 프로젝트에 적합
런타임 오류	런타임에 오류 발견 가능	컴파일 타임에 타입 오류 발견 가능
학습 곡선	낮음	높음
도구 지원	광범위한 도구와 라이브러리 지원	javascript 생태계의 모든 도구와 라이브러이 지원
브라우저 지원	모든 브라우저에서 기본적으로 지원	트랜스 파일 된 javascript가 모든 브라우저에서 지원

 

 

 

 

 

기본형 예시

function add(a: number, b: number): number {
  return a + b;
}

const sum: number = add(1, 2);
console.log(sum); // 3

 

 

 

 

 

 

선언 가능한 모든 타입 총정리

 

• 불린 : boolean

let isBoolean: boolean;
let isDone: boolean = false;

• 숫자: number

let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;

• 문자열: string

let str: string;
let red: string = 'Red';
let green: string = 'Green';
let myColor: string = `My color is ${red}`;
let yourColor: string = 'Your color is ' + green;

• 배열: Array

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

let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];

let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];
let array: Array<string | number> = ["Apple", 1, 2, "Banana", "Mango", 3];

let someArr: any[] = [0, 1, {}, [], "str", false];

• 인터페이스: interface

interface IUser {
  name: string;
  age: number;
  isVaild: boolean;
}

let userArr: IUser[] = [
  {
    name: "Neo",
    age: 10,
    isVaild: true,
  },
  {
    name: "Lewis",
    age: 64,
    isVaild: false,
  },
  {
    name: "Evan",
    age: 123,
    isVaild: true,
  },
];

• 타입 별칭: type

type User = {
    name: string;
    age: number;
    isValid: boolean;
};

let userArr: User[] = [
    {
        name: "Neo",
        age: 10,
        isValid: true,
    },
    {
        name: "Lewis",
        age: 64,
        isValid: false,
    },
    {
        name: "Evan",
        age: 123,
        isValid: true,
    },
];

• Null과 Undefined

let undefin: undefined = undefined;
let nul: null = null;

let stringOrNull: string | null = null;
let numberOrUndefined: string | undefined = undefined;

• 모든 타입: any

let any: any = 123;
any = 'play game';
any = {};
any = null;

const arr: any[] = [1, true, 'typescript'];

• 리턴받지 않아도 되는 함수: void

function coding(msg: string): void {
  console.log(`Happy ${msg}`);
}

• 유니온: Union

📌 **유니온 타입**
유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(`||`)와 같이 A이거나 B라는 의미의 타입입니다.
`|` 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다.


let union: (string | number);
union = 'Hello World';
union = 777;
union = false; // Error

• 인터섹션: intersection

📌 타입 인터섹션
인터섹션 타입(Intersection Type)은 두 개 이상의 타입을 조합하여 하나의 타입으로 합치는 방식입니다.
이는 자바스크립트의 AND 연산자(`&&`)와 비슷한 개념으로, A이면서 동시에 B인 타입을 의미합니다.


interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const testCase2: User & Validation = {
  name: 'jisu',
  age: 30,
  isValid: true
}

• 함수: Function

let myFunc: (arg1: number, arg2: number) => number;
myFunc = function(x, y) {
  return x + y;
}
myFunc(1, 2); // 3

let noneFunc: () => void;
noneFunc = function () {
  console.log('hihi');
};

 

 

이런 타입도 있어요!

• 읽기전용: readonly
• 튜플: Tuple
• 열거형: enum
• 객체: object
• 알 수 없는 타입: unknown
• Never

 

 

 

 

 

Type과 interface의 차이점

interface Hello {
	name: string
}

interface Hello {
	age: number
} // ✅ 가능, Hello 는 name 과 age 모두를 포함하게 됨

type Hello2 = {
	name: string
}

type Hello2 = {
	age: number 
} // 🙅‍♂️ 불가능

 

• 인터페이스(interface): 인터페이스는 항상 확장 가능합니다. 다른 인터페이스를 상속하거나 동일한 이름으로 다시 열어 새로운 속성을 추가할 수 있습니다.
• 타입 별칭(type alias): 타입 별칭은 한 번 정의되면 다시 열어 새로운 속성을 추가할 수 없습니다. 따라서 동일한 타입에 새로운 속성을 추가해야 하는 경우 인터페이스가 더 유리합니다.