타입스크립트의 타입에 대해서

자바스크립트는 다이나믹 타이핑을 제공하는 언어이기 때문에 원래는 숫자 숫자 연산만 가능하지만 자바스크립트가 알아서 숫자로 변형시킨다.

5 - 3
5 - '3'

 

프로젝트가 커지면 커질수록 유연성을 제공하는 것은 문제가 될 수 있다.

또한 타입스크립트는 오타 교정처럼 디테일한 에러 디버깅이 가능하다.

 

node.js 최시버전을 설치하고 터미널에 아래 명령어 입력 후 tsconfig.js 파일을 만들고 코드를 작성할 수 있다.

npm install -g typescript

 

또한 브라우저는 자바스크립트만 읽을 수 있기 때문에 타입스크립트로 작성되어 있는 코드는 자바스크립트 코드로 변환시켜줘야 한다.

따라서 터미널에 tsc -w 를 입력하면 아래 사진처럼 자바스크립트 파일이 생기면서 자동 변환이 가능해진다.

변환하는 과정을 '컴파일한다' 라고 표현하는데 이 때 변환할 조건을 tsconfig.json 파일에 설정해준다.

//tsconfig.json

{
  "compilerOptions": {
    "target": "es5", //타입스크립트를 어떤 버전의 자바스크립트로 변환할지
    "module": "commonjs", //import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳
  }
}

 

타입스크립트는 변수에 타입을 지정해주는데 이때 지정한 타입이 아닌 것을 할당하면 아래와 같은 에러메시지를 나타낸다.

let nameKim : string = 'kim';
nameKim =123;

type 키워드를 이용해 타입을 변수처럼 담아서 사용 가능하다.

type nameType = string | number;
let name :nameType = 'kim';

 

타입의 종류는 아래와 같다

1. String
2. Number
3. Boolean
4. Object
5. Array
6. Tuple
7. Enum
8. Any
9. Void
10. Null, Undefined
11. Never

String : 문자열

let str: string = "hi";

Number : 숫자

let num: number = 1;

Boolean

let star: boolean = true;

Object : 객체

let obj: { name: string; age: number } = {
  name: "kim",
  age: 20,
};

Array : 배열

1. let arr: Array<number> = [1, 2, 3];
2. let arr: Array<string> = ["kim", "nameKim"];
3. let arr: number[] = [1, 2, 3];

Tuple : 배열의 길이는 고정, 각 요소의 타입을 다르게 지정

let person: [string, number] = ["name", 20];

Enum : 특정 값(상수)들의 집합, 인덱스 번호로도 접근 가능

enum Kakao { Choonsik, Apeach, Lion }

let myKakao: Kakao = Kakao.Choonsik; // 1
let myKakao: Kakao = Kakao[0]; // Choonsik

Any : 모든 타입이 입력 가능

let str: any = 'hi';
let num: any = 20;
let arr: any = ['hi', 1, true];

Void : 변수에는 null과 undefiened에 선언하고 함수의 반환 값이 없을 때 선언

let hi: void = hello(1); 
console.log(hi); // undefined