Using Type

TypeScript

const button = document.querySelector("button");
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

function add(num1: number, num2: number) {
  return num1 + num2;
}

button.addEventListener("click", function () {
  console.log(add(+input1.value, +input2.value));
});

JavaScript

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
    return num1 + num2;
}
button.addEventListener("click", function () {
    console.log(add(+input1.value, +input2.value));
});

다시 한번 말하지만 타입 스크립트는 ts 파일을 js로 컴파일하며 오류를 발견하여 개발자에게 알려주는 그러한 용도로 사용됩니다. 컴파일된 js파일은 ts 적인 요소가 남아 있지 않으며 이는 브라우저에서 그대로 로드됩니다.

위 코드에서 함수의 매개변수 뒤에 : type 이 사용된 것은 js 파일로 컴파일된 이후 없어집니다. 이러한 점을 염두해 두면서 타입스크립트를 배워나가면 됩니다.

💡 매개변수 뒤에 : type 은 해당 매개변수가 제대로 된 타입으로 들어오는 가를 체크합니다. 함수에서 뿐만 아니라 일반 변수 선언시에도 가능합니다.
하지만 해당 변수가 함수의 매개변수로서 들어간다면 ( 해당 함수의 매개변수의 타입이 지정이 되어있다면 ) 중복된 변수의 타입선언 이므로 별로 좋은 코드로 평가 받지는 못 합니다.

function add(num1: number, num2: number) {
  return num1 + num2;
}
button.addEventListener("click", function () {
  console.log(add(+input1.value, +input2.value));
});
let age :number;
age = 'string'; // error
add(age, age);

위 코드와 같이 형식을 지정해둔 변수에 다른 타입의 코드를 넣으면 컴파일시 에러를 출력합니다. VScode에서는 내부에서 타입스크립트를 실행하기 때문에 바로 에러를 감지해줍니다.

유형 추론

let lol = "doodream";
lol = 20; //error

타입 스크립트에서 따로 변수에 타입을 명시하지 않더라도 유형추론을 통해 해당 타입이 명시되어 있다고 추론합니다. 이 유형 추론은 다양한 코드 상황에서 크게 도움이 됩니다.

const testObj = {
  name: "doodream",
  age: 21,
  nestedObj: {
    testName: "doo",
    testAge: 20,
  },
  arr: [1, 2, 3],
};

for(const num of testObj.arr){
  console.log(num);
}

위 코드에서 testObj.arr 은 숫자로 이루어진 배열이라는 것을 타입스크립트는 유형 추론을 통해 알수 있었고 이후 해당 배열을 사용해서 for ... of 구문을 사용할 때 num은 number 타입이라는 것을 추론 하였습니다. 만약 num이 let으로 선언되어 문자열을 넣으려고 한다면 타입스크립트는 에러를 반환할 것입니다.

Object type

객체의 프로퍼티를 감지

const testObj = {
  name: "doodream",
  age: 21,
};

testObj.school // error

타입스크립트는 우와 같이 객체 내부에 없는 프로퍼티를 감지하여 접근하는 것을 에러처리 합니다.

기존의 자바스크립트라면 접근 즉시 객체 내부에 프로퍼티를 생성시키고 undefined를 할당하여 출력했을 것입니다.

객체의 타입

const testObj: {
  name: string;
  age: number;
} = {
  name: "doodream",
  age: 21,
};

const testObj = {
  name: "doodream",
  age: 21,
};

객체의 타입을 명시하려면 굳이 위와 같이 명시할 수 있습니다만 역시나 좋은 코딩은 아닙니다. 컴파일 하는 즉시 명시된 데이터 타입은 자바스크립트에서 찾아볼수 없으며 저렇게 명시하지 않더라도 유형 추론에 의해 타입스크립트는 데이터 타입을 추론 할수 있습니다. 두번째 코드의 컴파일에서 타입스크립트는 아무런 오류를 출력하지 않습니다.

❗️이는 객체가 중첩되어 있는 경우에도 유효 합니다.

const testObj = {
  name: "doodream",
  age: 21,
  nestedObj: {
    testName: "doo",
    testAge: 20,
  },
};

이러한 유형 추론은 배열에서도 일어납니다.

let testArr = ['a','b'];
testArr = 'doodream';

배열에서의 명시적인 타입지정은 type[] 이라고 합니다.

any 타입

나중에 더 자세히 다룰 예정이지만 any 타입은 이전의 자바스크립트 처럼 어떤 유형이든 자유롭게 넣을 수 있는 데이터 타입입니다. 아래 코드는 전혀 에러를 생성하지 않습니다. 이는 굉장히 flexible 하지만 타입스크립트의 이점을 전부 내려놓게 됩니다.

let testArr:any = ["a", 1];
testArr = "doodream";

any 타입을 하지 않는 경우 아래와 같은 에러가 생성됩니다. 변수를 선언하고 일반적으로 변수타입을 선언하지 않으면 타입스크립트는 any 타입이 기본으로 있다고 유형추론 합니다.

let testArr = ["a", 1];
testArr = "doodream";

위 코드에서 알수 있다시피 변수는 복수의 타입지정이 가능합니다.

Tuple

튜플이라는 것은 자바스크립트에는 없는 데이터 타입 입니다. 고정된 수의 ( 명시된 데이터 수 ) 길이를 가지며 명시된 데이터 타입의 자리에 해당하는 데이터 타입이 오지 않으면 에러를 출력합니다. 또한 접근 할 수 있는 이상의 데이터 index에 접근 하려고 해도 에러를 출력합니다.

const testTuple: [number, string, number] = [1, "a", 1];
testTuple[4];

Enum

열거형 데이터 타입 이라고 합니다. 보통 한 종류의 데이터의 값을 구분할 때 쓰입니다.
TypeScript

enum FileAccess {
  // constant members
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write,
  // computed member
  G = "123".length,
}

console.log(FileAccess.None); // 0
console.log(FileAccess.Read); // 2
console.log(FileAccess.ReadWrite); // 6

JavaScript

(function (FileAccess) {
    // constant members
    FileAccess[FileAccess["None"] = 0] = "None";
    FileAccess[FileAccess["Read"] = 2] = "Read";
    FileAccess[FileAccess["Write"] = 4] = "Write";
    FileAccess[FileAccess["ReadWrite"] = 6] = "ReadWrite";
    // computed member
    FileAccess[FileAccess["G"] = "123".length] = "G";
})(FileAccess || (FileAccess = {}));
console.log(typeof FileAccess.None);
console.log(FileAccess.Read);
console.log(FileAccess.ReadWrite);

기본적으로 아무값을 할당을 하지 않으면 위에서 부터 0, 1, 2.. 이렇게 값이 배정됩니다. 그리고 각 값은 읽기 전용으로서 수정이 되지 않아 const 선언 형태와 유사합니다.

Union

위에서 데이터 타입을 중복으로 허용하는 것을 언급했었는데 바로 이것이 Union 입니다.
아래 코드와 같이 타입에 따라 다른 결과를 도출할때 혹은 여러 타입을 허용할 때 사용합니다. 중복은 계속 늘릴수 있습니다. 유형에 좀더 flexible하게 대처할 수 있습니다.

function testUnion(obj: string | string[]) {
  if (typeof obj === "string") return [obj];
  return obj;
}