[TS] TypeScript 기본 & 기본 타입

본 포스팅은 Maximilian Schwarzmüller 님의 강의를 바탕으로 작성되었습니다.

 

Core Types

타입스크립트는 자바스크립트보다 더 많은 타입들을 명시할 수 있다.

 

1. number : int, float, double .. ➡️ 모든 숫자들, 정수와 실수의 차이가 없이 number 타입을 사용.

2. string : 'Hi', "Hi", `hi` ➡️모든 text value

3. boolean : true, false ➡️ 오직 true or false.

 

위 세가지의 코어 데이터 타입을 어떻게 사용할 수 있을까.

 

number

.ts는 typescript 확장자명이다.

위와 같은 함수를 호출한 경우 tsc app.ts 를 터미널에서 호출하여 .js 파일로 컴파일 시키면 아무런 문제없이 7.8이 찍힌다. 하지만 number1 에 string 데이터타입인 '5'를 입력하면 어떻게 될까. 52.8이 출력될 것이다.

왜냐면 숫자 연산을 한 것이 아니라 단순이 문자열을 연결한 것이기 때문이다.

 

이러한 문제는 우리가 협업을 하거나, 코드가 많아질 수록 발생할 가능성이 높아진다. 만약 이러한 에러가 발생한다면 찾아내기가 힘들 것이며 이것이 typescript를 사용해야 하는 이유다.

 

함수에 타입 배정(type assignment)을 매개변수에 추가할 수 있다.

 

컴파일 과정에서 number1의 데이터타입이 옳지 않아서 에러를 발생시켰다.

typescript는 컴파일하는 동안에만 유효하다.

브라우저에는 내장 타입스크립트 지원이 없기 때문에 런타임에서 자바스크립트가 다른 식으로 작동하도록 변경하지 않는다. 위의 경우에도 error를 야기하지만, 문제가 발생한 상태로 컴파일을 진행시켜주긴 한다.

 

string 데이터타입으로 컴파일된 app.js

 

JavaScript uses "dynamic types" (resolved at runtime), TypeScript uses "static types" (set during development).

 

모든 숫자형은 기본적으로 float 타입이다.

 

 

함수에 타입 명시 & 타입 추론

typescript는 기본적으로 할당된 데이터가 어떤 타입인지 추론가능하다.

const 로 명시한 데이터는 변하지 않는 상수값이기 때문에 큰 상관이 없으며, let으로 명시한 경우 해당 데이터 타입을 명시한 데이터 타입으로 생각한다. 만약, 명시하지 않았다면 'any'라는 타입으로 생각한다. 혹은 명시하지 않고 초기화를 하면 처음 초기화된 데이터 타입으로 데이터가 명시된다.

const 상수

let 변수

 

 

Core Types

 

4. object : {age: 30} ➡️ 자바스크립트 객체는 모두 객체 타입이지만 타입스크립트에서는 더 구체적인 객체가 있다.

 

object

객체는 어떻게 추론할까?

타입스크립트가 객체의 멤버를 추론하는 방법과 어떤 방식으로 '구체적인 객체'가 되는지 확인하자.

 

person에 콜론(:)이 생겼다.

object인 person에 마우스를 가져다대면 타입스크립트가 추론한 타입이 나온다. 여기서 유의하여 볼 것은 key : value 쌍이 아닌 key : type 쌍으로 추론된다는 것이다.

 

위 코드에서 좀 더 구체적으로 'object' 타입을 명시해보자.

const person: object = {
    name: "Juncheol",
    age: 30,
};

console.log(person.name);

이 상태로 코드를 작성하게 되면 타입스크립트는 person이 object타입인 것만 알게된다. 즉, 어떤 key값과 type을 가지는지 전혀 추론할 수 없다. 이런 식으로 코드를 작성하기 위해서 다음과 같이 추가적인 작업을 할 수 있다.

const person: {
    name: string;
    age: number;
} = {
    name: "Juncheol",
    age: 30,
};

console.log(person.name);

하지만 너무 불필요하다.

다시 말하지만 typescript는 '타입을 추론'할 수 있다. 즉, 처음에 초기화된 데이터의 타입으로 명시된다. 그러니 다음과 같이 코드를 작성하는 것이 바람직하다.

const person = {
    name: "Juncheol",
    age: 30,
};

console.log(person.name);

 

중첩된 객체와 타입

const product = {
    id: 'abc1',
    price: 12.99,
    tags: ['great-offer', 'hot-and-new'],
    details: {
      title: 'Red Carpet',
      description: 'A great carpet - almost brand-new!'
    }
  }
  console.log(product.details.title);

객체 타입은 중첩 객체에 대해서도 생성할 수 있다. 위와같은 객체가 있다면, 해당하는 타입에 맞게 명시될 것이다.

따라서, 객체 타입 안에 객체 타입이 있다고 말할 수 있다.

 

 

 

 

발생했던 typescript 버그

1.Duplicate function implementation. (IDE 버그)

첫번째 해결방법

Duplicate function implementation.

이는 비쥬얼 스튜디오코드의 버그이다. 이외에도 여러 버그를 야기하는데 터미널의 다음의 명령어를 입력하자.

tsc --init

tsconfig.json 파일이 생성되고, 에러가 사라지는 것을 확인할 수 있다.

추가적인 자료 : 링크

TypeScript 시작하기 | 교양있는 개발자, 데이비드의 블로그

 

두번째 해결방법

app.ts와 app.js가 동시에 켜져있으면 발생한다.

위 사진처럼 app.js와 app.ts에 같은 함수명 및 변수명이 중첩돼서 발생하는 에러이다. 작업중에 app.js는 닫아두고 작업하면 에러가 발생하지 않는다.

짜란