/
/

타입스크립트 타입

기본 타입변수인터페이스함수
avatar
전상욱
2025.04.10
·
6 min read

기본 타입

  • boolean

  • number

  • string

  • object

  • array

  • tuple

  • enum

  • any

  • void

  • null

  • undefined

  • never

  • Promise

변수

문자열

let str: string = 'hello';

숫자

let num: number = 10;

배열

// 제네릭 : Array<타입>
let arr: Array<number> = [1, 2, 3];

// 배열 리터럴 앞에 타입을 정의
let items: number[] = [1, 2, 3];
// 변수 타입에 어긋나는 경우 경고를 띄워 줌 (빨간밑줄-마우스오버하면 내용 뜸)
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10];

튜플

타입 뿐 아니라 위치까지 정해줌 (모든 인덱스의 타입을 정해줌)

let address: [string, number] = ['gangnam', 100];

진위값

let show: boolean = true;

객체

구체적으로 객체의 타입까지 지정할 수 있다.

// 타입스크립트에서 객체를 정의하는 방식
let obj: object = {};

// 객체의 특정 속성의 값까지 타입을 정의
// 1) person이라는 변수를 object라고만 정의를 하면 person변수에 어떤 속성이 들어오던지 크게 신경쓰지 않는다.
let person: object = {
	name: 'capt',
	age: 100
};

// 2) person의 속성에 타입이 설정되면 해당하는 타입의 속성이 들어와야 한다.
let person: { name: string, age: number } = {
	name: 'capt',
	age: 100
}

인터페이스

인터페이스로 정의한 것은 이후에 해당 인터페이스를 사용할 때 오탈자 방지, 중복/반복 되는 타입들을 손쉽게 정의할 수 있다는 장점이 있다.

// 변수 인터페이스 정의
interface User {
  age: number;
  name: string;
}

// 변수 인터페이스 활용
var ej: User = { // 변수에 활용한 인터페이스
  age: 26,
  name: 'ugkong'
}

// 함수 인터페이스 정의
interface SumFunction {
	(a: number, b: number): number;
}

// 함수 인터페이스 활용
var sum: SumFunction;
sum = function(a: number, b: number):  number {
	return a + b;
}

// 정의된 인터페이스 사용시 반드시 정의한 타입으로 설정해줘야 한다.

인터페이스의 방식

  1. 인덱싱 방식 인터페이스 : 속성 이름이 정의되어있지 않고, 사용할 때마다 속성을 임의로 부여해서 사용할 수 있다.
    배열의 인덱싱 방식에 대해서 인터페이스를 정의할 수 있다.

  2. 딕셔너리 방식 인터페이스 : 객체의 index, key에 접근 할 때 정의해 놓은 인터페이스에 어긋날 경우 발생하는 오류를 알려준다.
    object를 가지고 간단하게 배열을 만들어 함수에 사용할 경우, 해당 object를 가지고 조작할 때마다 타입스크립트가 자동적으로 추론을 해서 타입까지 정의해준다는 장점이 있다.

// 인덱싱
interface StringArray{
	[index: number]: string;
}
var arr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; // 에러 발생
arr[0]; // 'a' ([index: number]: string;)

// 딕셔너리
interface StringRegexDictionary {
	[key: string]: string
}
var obj: StringRegexDictionary = {
	job: 'developer',
	address: 'Seoul',
	name: 'Ugkong'
}

인터페이스 확장(상속)

OOP(객체지향 프로그래밍)에서의 상속, 자바스크립트의 프로토타입과 같이 인터페이스를 상속받아서 기존에 있던 것보다 더 확장해서 사용하는 것이다.

// 인터페이스 확장
interface Person {
	name: string;
	age: number;
}

interface Developer extends Person {
	// 다른 인터페이스와 중복되는 값들을 상속받아 사용할 수 있다.
	language: string;
}

위에서 Developter인터페이스를 이용해 변수를 선언할 경우, language, age, name모두 정의 해줘야 한다.

var  captain: Developer = {
	language: 'ts',
	age: 26,
	name: 'Ugkong'
}

함수

파라미터, 반환값

함수의 파라미터에 타입을 정의하고 반환 값에 대하여 타입을 정의하는 방식

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

sum(10, 20);  // 30

함수의 옵셔널 파라미터

특정 파라미터를 선택적으로 사용하고 싶을 때 ?를 붙여 준다.

function log(a: string, b?: string, c?: string) {
  return a + b + (c ?? '');
}

log('hello world');
log('hello ts', 'abc');

타입스크립트에서는 물음표와 느낌표에 많은 차이가 있다.

  • 물음표는 옵셔널 체이닝(?)과 옵셔널 파라미터(?) 등으로 사용

  • 느낌표는 non-null assertion 이라고 타입 단언의 한 연산자로 사용.

    (특정 코드가 null이 아니라는 것을 단언)

- 컬렉션 아티클