sanguk.dev
작성완료
타입스크립트 타입

타입스크립트 타입

타입스크립트의 기본 타입에는 boolean, number, string, object, array, tuple, enum, any, void, null, undefined, never, Promise가 포함된다. 변수와 객체의 타입을 정의하는 방법, 인터페이스를 통해 타입의 재사용과 오류 방지를 설명하며, 함수의 파라미터와 반환값에 타입을 정의하는 방법도 다룬다. 옵셔널 파라미터와 타입 단언에 대한 설명도 포함되어 있다.

TypeScript

기본 타입

  • boolean
  • number
  • string
  • object
  • array
  • tuple
  • enum
  • any
  • void
  • null
  • undefined
  • never
  • Promise

변수

문자열

typescript
let str: string = 'hello';

숫자

typescript
let num: number = 10;

배열

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

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

튜플

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

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

진위값

typescript
let show: boolean = true;

객체

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

typescript
// 타입스크립트에서 객체를 정의하는 방식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
}

인터페이스

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

typescript
// 변수 인터페이스 정의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를 가지고 조작할 때마다 타입스크립트가 자동적으로 추론을 해서 타입까지 정의해준다는 장점이 있다.
typescript
// 인덱싱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(객체지향 프로그래밍)에서의 상속, 자바스크립트의 프로토타입과 같이 인터페이스를 상속받아서 기존에 있던 것보다 더 확장해서 사용하는 것이다.

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

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

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

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

함수

파라미터, 반환값

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

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

sum(10, 20);// 30

함수의 옵셔널 파라미터

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

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

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

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

  • 물음표는 옵셔널 체이닝(?)과 옵셔널 파라미터(?) 등으로 사용
  • 느낌표는 non-null assertion 이라고 타입 단언의 한 연산자로 사용.
    (특정 코드가 null이 아니라는 것을 단언)