TypeScript 문법 (타입, 함수, 연산자 활용 타입)

TypeScript 프로젝트 환경 구성하기

1. 먼저 프로젝트 폴더를 생성한다.
2. 프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화한다.
3. 프로젝트 내부에서 npm을 사용할 준비가 되었으므로, 이제 TypeScript를 설치한다.
   npm install typescript --save-dev
4. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성한다. 이어 밑의 내용을 붙여 넣는다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

5. 이제 src 폴더 밑에 TypeScript 언어로 된 파일을 작성할 수 있다.

TypeScript(타입스크립트)란

TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어다.

JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다.

TypeScript를 사용했을 시 장점

TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다.

또한 TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며, 인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다.

TypeScript의 타입

Boolean(불리언) 타입

let isShow: boolean = true;
let isDone: boolean = false;

Number(숫자) 타입

let number1: number = 5;
let number2: number = 0.7;

String(문자열) 타입

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

Array(배열) 타입

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

Tuple(튜플) 타입

let user: [string, number, boolean] = ["kimcoding", 20, true];

Object(객체) 타입

let obj: object = {};

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

Any 타입

let obj: object = {};

//에러가 난다.
obj = "hello";

let maybe: any = 4;

//정상적으로 동작한다.
maybe = true;

TypeScript의 함수

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

//리턴값이 없다면,
let printAnswer = (): void => {
	console.log("YES");
}

TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러가 난다.
greeting('coding');

//정상적으로 작동한다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

만약 개발자가 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다.

let greeting = (firstName: string, lastName="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동한다. 
greeting('coding');

//정상적으로 작동한다.
greeting('coding', undefined);

//너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동한다.
greeting('coding');

//정상적으로 작동한다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 난다.
greeting('coding', 'kim', 'hacker');

그러나 이때는 greating('coding')과 같이 전달인자를 하나만 전달했기 때문에, 뒤의 매개변수는 undefined로 반환이 된다.

TypeScript의 연산자 활용 타입

유니온(Union) 타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입이다. | 연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입이다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

유니온(Union) 타입 사용 시 유의할 점

유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있기 때문에 유의해야 한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

이렇게 인터페이스를 사용하여 Developer와 Person을 정의했다.

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

그러나 실질적으로 askSomenone 함수 내부에서는 Developer와 Person이 갖고 있는 공통 프로퍼티인 name에만 접근할 수 있다. 왜냐하면 공통되고 보장된 프로퍼티만 제공해야 하기 때문이다. 만약 나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용해야 한다.

타입 가드(Type Guard)란? TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나이다. 타입 가드는 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입 안정성을 보장해 준다.

아래 코드는 타입 가드를 사용해 작성된 코드다.

function askSomeone(someone: Developer | Person) {
  // in 연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자
  // in 연산자는 객체의 속성 이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

인터섹션(Intersection) 타입

인터섹션(Intersection)은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이다. & 연산자를 사용하여 표현한다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

이런 식으로 인터섹션으로 타입을 연결해 하나의 단일 타입으로 표현할 수 있기 때문에, 타입 가드가 필요하지 않는다.

위의 코드는 인터섹션 타입을 사용하여 Developer와 Person을 하나의 타입으로 묶었다. 따라서 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있다.