[TypeScript] 타입스크립트란? + (기본 타입)

1. 타입스크립트란? 

• 자바스크립트에 타입을 부여한 언어 ( 자바스크립트의 확장판 ! )
• 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다. => 변환 과정을 컴파일 (complile) !

 

 

 

 

2. 타입스크립트를 쓰는 이유 ! 

1. 에러의 사전 방지

// math.js

function sum(a, b) {
  return a + b;
}

sum(10, 20); // 30

sum('10', '20'); // 1020

위 코드는 두 숫자의 합을 구하는 함수 코드입니다.

맨 밑줄에서는 숫자 대신 문자열을 더하여 원하는 결과 값 10 + 20 = 30이 아닌, 1020이라는 결과가 나타날 수 있습니다.

 

이처럼 의도하지 않은 코드의 동작을 예방 하기 위해 우리는 typescript를 사용할 수 있습니다 !

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

 

 

 

 

---

 

Tip !    Typescript의 기본 타입 작성법 

 

 ' : ' 을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기라 합니다.

 

// String 
let str : string = "Hello";

// Number
let num : number = 10;

// Boolean
let isTrue : boolean = false;


// Array
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];


// Tuple - 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
let arr: [string, number] = ['hi', 10];
// 정의하지 않은 타입이나 인덱스로 접근할 경우
arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.


// Enum - 특정 값(상수)들의 집합
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor


// Any - 모든 타입에 대하여 허용한다는 의미
let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];



// Void - 변수에는 undefiend와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}



// Never - 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입
// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

 

 

 

 

 

 

---

 

 

 

 

 

 

reference  타입스크립트 핸드북