[TypeScript] 개념과 특징, 기본 타입<원시값, 함수, 배열>

 

안녕하세요! 오늘은 TypeScript 의 정의와 기초 문법에 대해 작성해보고자 합니다.

프로그래밍 과정 중에 변수에 데이터가 할당하게 됩니다. JavaScript의 경우 변수에 할당하는 값에 제한이 없었습니다. number값을 할당했던 변수에 string, 객체를 할당할 수 있고 런타임 시 코드를 읽어나가며 해당 변수의 타입을 추론하여 연산하게 됩니다.

 

📎 Type Script 란?

JavaScript를 설명하자면, 타입 추론을 통해 변수에 할당되어 있는 값의 타입을 추론하게 됩니다. string과 number의 + 연산에서도 에러를 발생하지 않는 유연함을 보이지만, 그로 인해 실수에 취약하게 됩니다. 개발 당시 즉각적인 피드백이 없으며, 어떤 사이드 이펙트가 발생할지 예상하기 어려운 상황이 발생할 수 있죠. 

그래서 변수명이나 함수명에 어떠한 타입인지을 표시하거나(num1 등), 주석에 함수의 기능을 설명하거나, 코드 실행부에 입력값의 타입을 체크한 후 에러 발생하는 예외 코드를 작성하고는 합니다.

 

TypeScript는 JavaScript에 정적 타입 시스템과 추가적인 언어 기능을 제공하는 프로그래밍 언어입니다. Microsoft에서 개발했으며, JavaScript의 상위 집합(superset)으로 설계되었습니다.
TypeScript로 작성된 코드는 ts의 확장자를 가지며, 컴파일을 통해 일반 JavaScript로 변환되며, 모든 JavaScript 런타임 환경에서 실행할 수 있습니다. 그리고 TypeScript는 편집기와의 통합을 지원함으로써 편집기에서 개발 당시 즉시 오류를 잡을 수 있습니다.

 

TypeScript

 

JavaScript

 

 

 

---

 

📎 TypeScript의 주요 특징

1. 정적 타입 시스템 (Static Typing)

위에서 본 예시와 같이 변수와 함수의 타입을 명시적으로 정의할 수 있어, 코드 작성 중 또는 컴파일 단계에서 타입 오류를 발견할 수 있습니다. 런타임 오류를 줄이고 코드의 안정성을 높여줍니다

 

 

2. 최신 JavaScript 지원과 하위 호환성

TypeScript는 최신 JavaScript 기능(예: async/await, ES Modules)을 지원하며, 이전 브라우저 환경에서도 사용할 수 있도록 트랜스파일합니다. config 파일을 통해 컴파일할 특정 js 버전을 명시할 수도 있기 때문에 구형 브라우저나 환경에서도 호환 가능합니다.

// 최신 JavaScript 코드
const greet = (name?: string): string => `Hello, ${name ?? "Guest"}`;

// 변환된 ES5 코드
var greet = function(name) {
    return "Hello, " + (name !== null && name !== void 0 ? name : "Guest");
};

 

 

3. 코드의 가독성과 유지보수성 개선

타입 정의를 통해 코드의 의도를 명확히 하여, 다른 개발자가 코드를 이해하거나 유지보수하기 쉽습니다. 변수에 할당되어야 하는 값의 타입을 정의 시점 뿐만 아니라 개발 중 변수에 어떤 타입이 할당되어야 하는지 편집기를 통해 확인할 수 있고, 함수의 입력값과 출력값도 확인이 가능하게 됩니다. 올바르지 않은 값을 할당할 경우 즉시 에러로 확인할 수 있으니 의도를 명확하게 표현할 수 있습니다.

 

function addNumbers(...numbers:number[]):number {
	return numbers.reduce((a,b) => a+b);	
}
// 다른 개발자: 아, number[]을 입력 받아서 number를 반환하는구나!

 

하나의 예로 위와 같이 number배열을 받아 전체 수의 합을 반환하는 코드가 있다면 TypeScript의 경우 개발 당시 다르게 사용할 경우 에러를 반환받아 확인할 수 있습니다. 하지만 JavaScript의 경우 다른 배열을 혹은 배열이 아닌 값을 입력해도 에러가 반환되지 않습니다.

 

  function add(...numbers) {
    return numbers.reduce((a, b) => a+b);
  }

  add(1, '2'); // '12'
  add('string'); // 'string'
  add(true,true,1); // 3

 

4. 강력한 도구 지원

IDE(Visual Studio Code 등)에서 자동 완성, 타입 검사, 리팩토링 지원 등 생산성을 높이는 기능을 제공합니다.

 

5. 타입 추론

모든 변수나 함수에 타입을 명시하지 않아도, TypeScript가 자동으로 타입을 추론합니다. JavaScript와 다른 점은 정의 시점에 타입 추론으로 타입이 할당되어 재할당 시 에러가 반환됩니다. 더 정확한 개발을 가능하게 합니다

 

6. 인터페이스와 제네릭

객체 구조를 정의하거나, 재사용 가능한 타입을 생성할 수 있습니다. 인터페이스를 정의함으로써 객체에 대한 설명을 문서화하는 효과가 있고, 타입을 분할하고 재구성하며 연관있는 데이터 간의 타입에 관계성을 명시할 수 있습니다.

 

 

 

---

 

📎 TypeScript 기본 타입

 

TypeScript의 기본 타입으로는 number, string, boolean, undefined, null, unknown, any, void, naver, object, Array가 있습니다. 

 

// number
const num: number = 10;

// string
const str: string = 'hello';

// boolean
const isTrue: boolean = true;

// undefined
let address: string | undefined;
function find(): number | undefined {}

// null
let name: string | null;

// unknown: 어떤 타입인지 모를 때
let notSure: unknown;

// any: 어떤 것이든 담을 수 있는 타입
let anything:any = 0;

// void
function print():void {}

// naver: 리턴하지 않음
function throwError():never {}

// object: 어떤 오브젝트도 전달받을 수 있음
function func(obj: object) {}

 

선언할 때 정의한 Type이 아닌 경우 즉시 에러를 확인할 수 있습니다.

 

 

---

 

📎  TypeScript에서의 함수

함수의 경우 입력값과 반환값의 타입을 작성할 수 있습니다. 

// function 함수명(input:입력타입):반환타입 {}

function printMessage(message:string):void {
	console.log(message);
}

 

문서화의 효과를 볼 수 있고, 함수 내부 전체 코드를 이해하지 않아도 어떤 값을 반환하는지 확인할 수 있습니다. 

 

Optional Parameter

옵션값인 경우 JavaScript와 동일하게 ?를 이용해 명시할 수 있습니다

function addUser(id: string, name?: string) {
	console.log(id)
    name && console.log(name)
}

 

Default parameter

기본값의 경우 타입 뒤에 = 로 명시할 수 있습니다

function printMessage(message: string = 'default message') {
	console.log(message)
}

 

 

Rest parameter

나머지 매게변수도 타입 할당이 가능합니다

function addNumbers(...numbers:number[]):number {
	return numbers.reduce((a,b) => a+b);	
}

 

 

readonly

함수의 입력값을 readonly 상태로 만들 수 있습니다. 해당 매개변수의 값을 변경해도 변경되지 않습니다

const admins = ['1', '2'];
  function readAdmins(admins: readonly string[]) {
    admins = [...admins, '123'];
  }
  readAdmins(admins);
  console.log(admins); // 변경되지 않음

 

 

---

 

📎  TypeScript의 Array와 Tuple

배열은 2가지 방법으로 할당이 가능합니다. 타입 뒤에 []을 붙히거나, Array<>를 이용해 작성이 가능합니다.

const names: string[] = ['apple','banana'];
const scores: Array<number> = [90,100,100];
const anything: Array<string | number> = ['1', 2, 4]

 

 

TypeScript에서는 tuple도 사용이 가능합니다. 튜플은 고정된 길이와 타입의 배열입니다.

선언 시 배열의 형태로 각 인덱스에 해당하는 타입을 정의하게 됩니다. 인덱스를 통해 해당 값에 접근하게 되며 사용하는 곳에서 변수명을 지정할 수 있습니다.

 

const tuple: [number, string, boolean] = [1, 'typeScript', true]
tuple[0] // 1
tuple[1] // 'typeScript'

const [id, name, active] = tuple

 

 

 

---