TS. Type / Boolean / Number / String / Symbol / Null & undefined / Object / Array

TypeScript

마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어이다. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다.

타입스크립트의 특징

컴파일 언어, 정적 타입 언어
자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환된다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.

자바스크립트 슈퍼셋(Superset)
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.

객체 지향 프로그래밍 지원
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

Typescript와 JavaScript 차이점

Typescript는 정적 유형으로 개발 중에 확인하는데, JavaScript는 런타임 진행 중에 확인이 된다.

// JavaScript
function add(n1, n2) {
  if (typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}
const result = add(39, 28);
// TypeScript
function add(n1: number, n2: number) {
  return n1 + n2;
}
const result = add(39, 28);

Typescript 문서를 확인하면 다음과 같은 내용이 있다.

프로그램이 유용하려면, 가장 간단한 데이터 단위로 작업할 수 있어야 한다.

Typescript에서, 우리는 JavaScript에서 기대하는 것과 동일한 타입을 지원하며, 돕기 위해 추가적인 열거 타입이 제공된다.

• TypeScript에서 프로그램 작성을 위해 기본 제공하는 데이터 타입
• 사용자가 만든 타입은 이 기본 자료형들로 쪼개진다.
• JavaScript 기본 자료형 포함 (superset)
  • ECMAScript 표준에 따른 기본 자료형 6가지
    • Boolean
    • Number
    • String
    • Null
    • Undefined
    • Sysbol (ECMAScript 6에 추가)
    • Array: Object 형
  • 프로그래밍을 도울 추가 제공되는 몇 가지 타입
    • Any, Void, Never, Unknown
    • Enum
    • Tuple: Object 형

데이터 타입 Primitive Types

오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형이다.

프리미티브 형의 내장 함수를 사용 가능한 것은 자바스크립트의 처리 방식 덕분이다.

• (ES2015 기준) 6가지
  • boolean
  • number
  • string
  • symbol (ES2015)
  • null
  • undefined

let name = 'Imae';

name.toString();

literal 값으로 Primitive 타입의 서브 타입을 나타낼 수 있다.

true;
'hello';
3.14;
null;
undefined;

또는 래퍼 객체로 만들 수 있다.

new Boolean(false); // typeof new Boolean(false) : 'object'
new String('world'); // typeof new String('world') : 'object'
new Number(42); // typeof new Number(42) : 'object'

TypeScript 파일 JavaScript로 변환

터미널에 아래의 코드를 입력하면 js파일이 생겨 컴파일할 수 있다.

node (만들고자하는 파일 이름).js로 파일을 생성하면 된다.

➜  basic-types npx tsc
➜  basic-types node string.js

Boolean / boolean

가장 기본적인 데이터 타입으로, 단순히 true 또는 false의 값을 가진다. 

let isDone: boolean = false;

isDone = true;

console.log(typeof isDone); // 'boolean'

let isOk: Boolean = true;

let isNotOk: boolean = new Boolean(true); // 오류!
// 'Boolean' 형식은 'boolean' 형식에 할당할 수 없습니다.
// boolean'은(는) 기본 개체이지만 'Boolean'은(는) 래퍼 개체입니다. 가능한 경우 'boolean'을(를) 사용하세요.ts(2322)

'Boolean' 형식은 'boolean' 형식에 할당할 수 없다.

'boolean'은 기본 개체이지만, 'Boolean'은 래퍼 개체이다. 가능한 경우 'boolean'을 사용하는 것이 좋다. ts(2322)

Number

JavaScript와 같이, TypeScript의 모든 숫자는 부동 소수점 값이다.

Typescript는 16진수, 10진수 리터럴 외에도 ECMAScript 2015에 도입된 2진수 및 8진수를 지원한다.

NaN도 Number 형으로 사용 가능하다.

1_000_000과 같은 표기도 가능하다. 1,000,000과 같은 의미로 _가 ,의 기능을 가지고 있다.

let decimal: number = 6; // 10진수 리터럴

let hex: number = 0xf00d; // 16진수 리터럴

let binary: number = 0b1010; // 2진수 리터럴

let octal: number = 0o744; // 8진수 리터럴

let notANumber: number = NaN;

let underscoreNum: number = 1_000_000; // 백 만을 보기 쉽게 표기

String

string

다른 언어와 마찬가지로 텍스트 형식을 참조하기 위해 'String' 형식을 사용한다.

JavaScript와 마찬가지로 TypeScript는 문자열 데이터를 둘러싸기 위해 큰 따옴표 (")나, 작은 따옴표(')를 사용한다.

let myName: string = 'Imae';

myName = 'Anna';

Template String

행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열이다. 이 문자열은 backtick(=backquote) 기호에 둘러쌓여 있다.

포함된 표현식은 `${expr}`와 같은 형태로 사용한다.

let fullName: string = `Imae Kwak`;
let age: number = 21;

let sentence: string = `Hello, My name is ${fullName}.

I'll be ${age + 1} years old next month.`;

console.log(sentence);
// Hello, My name is Imae Kwak.
// 
// I'll be 22 years old next month.

Symbol

ECMAScript 2015의 Symbol이다. new Symbol로 사용할 수 없다.

Symbol 함수를 사용하여 symbol 타입을 만들어낼 수 있다.

console.log(Symbol('foo') === Symbol("foo")); // false

// "target": "es2016",   
// "module": "commonjs" ,                                         
// "lib": [
//   "ES2015", 
//   "DOM"
//   ],            
// tsconfig 파일 바꾸어주어야 함.

프리미티브 타입의 값을 담아서 사용한다.

고유하고 수정불가능한 값으로 만들어준다.

그래서 주로 접근을 제어하는데 사용하는 경우가 많았다.

let sym = Symbol();
let obj = {
    [sym]: "value"
};
console.log(obj[sym]); // "value"

Null & Undefined

TypeScript에서, Undefined와 Null은 실제로 각각 undefined 및 null 이라는 타입을 가진다. void와 마찬가지로, 그 자체로는 딱히 유용하지는 않다. 둘다 소문자만 존재한다.

// let MyName: number = undefined; // 오류

// let u: undefined = null; // 오류
let v: void = undefined;

let union: string | null = null; // 합집합같은 의미

union = "Imae";

undefined & null은 다른 모든 형식의 하위 형식이다.

설정하지 않으면 그렇다.

number에 null 또는 undefined를 할당할 수 있다는 의미이다.

하지만, 컴파일 옵션에서 `--strictNullChecks`를 사용하면, null과 undefined는 void나 자기 자신들에게만 할당할 수 있다.

이 경우, null과 undefined를 할당할 수 있게하려면 union type을 이용해야 한다.

 

null in JavaScript

null 이라는 값으로 할당된 것을 null이라고 한다.

무언가 있는데, 사용할 준비가 덜 된 상태이다.

null이라는 타입은 null이라는 값만 가질 수 있다.

런타임에서 typeof 연산자를 이용해서 알아내면, object이다.

let n: null = null;

console.log(n); // null
console.log(typeof n); // object

undefined in JavaScript

값을 할당하지 않은 변수는 undefined라는 값을 가진다. 무언가가 아예 준비가 안된 상태이다.

object의 property가 없을 때도 undefined이다.

런타임에서 typeof 연산자를 이용해서 알아내면, undefined이다.

let u: undefined = undefined;

console.log(u); // undefined
console.log(typeof u); // undefined

Object

const person1 = {name: 'Imae', age: 29};

const person2 = Object.create({name: 'Imae', age: 29});
// 내장 객체

object

"primitive type이 아닌 것"을 나타내고 싶을 때 사용하는 타입

 

non-primitive type

not number, string, boolean, bigint, symbol, null or undefined

Array

자바스크립트에서 array는 객체이다.

사용방법은 두가지가 있다.

• Array<타입>
• 타입[]

let list: (number | string)[] = [1, 2, 3, "4"]; // 자주 사용
// union 타입으로 합집합을 나타냄 숫자거나 문자열
[10, "Imae"];

let list: Array<number> = [1, 2, 3]; // 사용을 자제