TypeScript 기본 타입 데이터형 string, number 예제

타입스크립트 기본 타입(프리미티브 타입) 데이터형

타입스크립트를 사용해야 할지도 모를 상황이 생겨서 공부 겸 정리한 내용입니다. 잘못된 내용이 있으면 코멘트 남겨주세요.

TypeScript란 데이터형, 즉 테이터의 타입을 붙인 JavaScript입니다.

데이터 타입을 지정해주는 것으로 JavaScript와 처리하는 방식에 차이가 생길 수도 있습니다.

그러면 TypeScript에 어떤 데이터 타입이 있는지 알아보도록 하겠습니다.

TypeScript에서 가장 기본이 되는 타입입니다.

타입에는 string, number, boolean, symbol, bigint, null, undefined 가 있습니다.

서로 다른 타입이게 때문에 타입 간에 값을 대입할 수 없습니다.

const a: number = 3;

const b: string = a; // 에러: Type 'number' is not assignable to type 'string'.

단, 컴파일러 옵션에서 –strictNullChecks 을 꺼둔 경우는 null과 undefined는 각각 다른 타입의 값으로 사용할 수 있습니다.

const a: null = null;

const b: string = a; // strictNullChecks를 켜둔 경우에러

주의점으로 –strictNullChecks 옵션을 꺼두면 undefined과 null을 판단하거나 사용함에 있어 복잡해질 수도 있습니다.

특별한 경우가 아니라면 –strictNullChecks 옵션은 켜 두는 것이 좋습니다.

기본형 타입을 세분화한 것으로 리터럴 타입이 있습니다.

리터럴 타입에는 문자열 리터럴 타입과 숫자 리터럴 타입, 참과 거짓 값의 리터럴 타입이 있습니다.

타입을 지정하게 되면 지정한 이외의 타입은 대입할 수 없습니다.

const a: 'foo' = 'foo';
const b: 'bar' = 'foo'; // 에러: Type '"foo"' is not assignable to type '"bar"'.

‘foo’라는 문자열 타입으로 지정했기 때문에 ‘foo’ 이외의 문자열을 대입할 수 없습니다.

숫자도 동일합니다.

문자열 리터럴 타입은 string의 부분 타입이기 때문에 string 타입으로 선언한 변수에 대입할 수 있습니다.

const a: 'foo' = 'foo';
const b: string = a;

다른 리터럴 타입도 같습니다.

지금까지의 예제에서는 변수에 타입을 지정해주었지만 생략할 수 있습니다.

const a = 'foo'; // a 변수는'foo' 타입
const b: 'bar' = a; // 에러: Type '"foo"' is not assignable to type '"bar"'.

‘foo’라는 리터럴 타입은 대입된 값을 보고 형 추론에 의해 변수 a에 지정되었습니다.

이것은 const를 사용하여 변수를 선언하는 경우에만 해당됩니다.

JavaScript에서는 const 변수에 값을 변경할 수 없도록 되어있습니다.

즉 a라는 변수에는 ‘foo’값이 변하지 않고 계속 들어가 있기 때문에 변수 a의 타입은 ‘foo’라고 할 수 있습니다.

반면 const가 아닌 let이나 var을 사용하여 변수를 선언하는 경우는 언제든 값이 변할 수 있기 때문에, 변수 타입을 ‘foo’ 지정해버리면 다른 문자열을 대입할 수 없기 때문에 유용하게 사용할 수 없게 됩니다.

let이나 var로 변수를 선언하는 경우에는 형 추론을 하는 타입을 리터럴 타입이 아닌 기본 타입으로 해주는 것이 사용하기에 용이합니다.

let a = 'foo'; // 변수 a는 string 타입으로 형추론
const b: string = a;
const c: 'foo' = a; // 에러: Type 'string' is not assignable to type '"foo"'.

변수 a는 let으로 선언하였기 때문에 형추론에 의해 string 타입으로 지정됩니다.

그렇기 때문에 const로 선언한 변수c 에는 값을 대입할 수 없습니다.

그리고 let으로 선언한 경우에도 리터럴 타입을 지정하여 사용할 수도 있습니다.

let a: 'foo' = 'foo';
a = 'bar'; // 에러: Type '"bar"' is not assignable to type '"foo"'.