TypeScript 란 ?

TypeScript는 동적 언어의 Javasscript의 한계점을 보완하고자 나온건데,

원래 정적 타입의 언어는: 모든 변수에 타입을 다 지정해줘야 하기 때문에 → 타이핑 양이 매우 증가한다.

타입스크립트는 동적 타입시스템 + 정적타입 시스템의 결합한거라 보면된다.

 

TypeScript 동작 원리

JavaScript는 아래 그림과 같이 프로그래밍 언어 → 컴파일러 → 기계어 (JavaScript → 컴파일러 → 바이트코드)로 변환되어 동작된다.

 

 

그럼 TypeScript의 컴파일과정은 ?

Typescript는 AST 이후에 타입검사 과정을 거치게 되는데, 타입검사가 완료된 이후에 바이트코드로 변환되는게 아닌 JavaScript로 변환이 된다.

 

타입스크립트 컴파일러 옵션 설정하기

{
  "compilerOptions": {
    "target": "ES5", // 컴파일로 후 생성되는 자바스크립트 버전
    "module": "CommonJS", // javascript의 모듈시스템 지정
    "outDir": "dist", // 자바스크립트가 어디에 생성될지 경로 지정
    "strict": true, // 엄격하게 타입을 체크할거면 true
    "moduleDetection": "force" // 각 파일을 개별모듈로 강제로 지정
  },
  "include": ["src"] // 타입스크립트를 포함할 파일 경로들 지정
}

프로젝트, 팀에 따라 위 옵션 설정은 달라지겠지만 큰 범위내에서 크게 달라지진 않는다.

 

타입스크립트 기본타입

기본타입에는 대표적으로 number, string, boolean, null, undefined, 리터럴타입 존재한다. 하나씩 살펴보자면,

// number
let num1: number = 123;

// string
let str1: string = "hello";

// str1 = 123; // 에러발생

// boolean
let bool1: boolean = true;

// boo1 = 123 // 에러발생

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

// 리터럴 타입
let numA: 10 = 10;
let strA: "hello" = "hello";
// let boolA: true = false // true라는 값만 할당 가능.

 

배열, 튜플, 객체 Type

let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "apple"];
let boolArr: boolean[] = [true, false, true];

// 배열에 들어가는 요소들의 타입이 다양한 경우
let multiArr: (number | string)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

// 튜플 -> 길이와 타입이 고정된 배열 (배열이긴한데 엄격한 배열느낌.)
let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "2", true];

// 객체

let user: { id: number; name: string } = {
  id: 1,
  name: "jin",
};

let config: {
  readonly apiKey: string;
} = {
  apiKey: "MY API KEY",
};

// config.apiKey = "TEST KEY" -> readonly 속성이므로 에러 발생

배열, 튜플, 객체도 위와 같이 사용하면 되는데, readonly 키워드를 붙여서 객체의 값을 변경하지 못하도록 할 수 있다.