타입 스크립트

• 자바스크립트에 타입을 부여한 언어
• 자바스크립트와 달리, 브라우저에서 실행하기 위해 컴파일이 필요하다.
• ts 간단 테스트 (https://replit.com/languages/typescript)

왜 써야할까?

• 타입 에러 방지
  • 타입 정의 후 정의된 타입과 다른 타입을 사용할 경우 컴파일 에러 발생
• 코드 가이드 및 자동 완성
  • VSCode 등의 IDE를 이용하면 정의된 타입을 보고 해당 타입의 API 등을 자동완성으로 이용 가능함 (생산성 향상)

---

기초

타입 선언

// 문자열
const name: string = 'tester'; 

// 진위값
const isDone: boolean = false;

// 숫자
const age: number = 23; 

// 배열
const arr: Array<String> = [];
arr.push('hi'); 
arr.push(3); // tslint 에러 발생 - Argument of type 'number' is not assignable to parameter of type 

// 배열 - 리터럴
const items: string[] = []; 

// 배열 - 리터럴 - 문자와 숫자를 동시에 가지는 배열
const arrs: (string | number)[] = ['Apple', 1, 2];

// 읽기 전용 배열
const arrA: readonly number[] = [1, 2, 3, 4];

// 튜플 (정해진 타입의 고정된 길이 배열, 이는 할당에 국한됨, push나 splice는 막을 수 없음)
let tester: [string, number] = ['tester', 23];
address.push(2); // 가능
address = [2, 3]; // 첫번째 인자 에러 - Type 'number' is not assignable to type 'string'

// 객체
const obj: object = {};

// 타입 객체 선언
const person: { name: string, age: number } = { name: 'tester', age: 23};

// interface
interface user {
  name: string,
  age: number
}
let userA: user = { name: 'tester', age: 23};

// 열거형 - 기본적으로 값이 0부터 시작하여 1씩 증가함. 값이 숫자일 경우 역방향 매핑 지원함
enum Week {
  Sun, 
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat
}
console.log(Week.Mon); // 1
console.log(Week[0]); // 역방향 매핑 지원
console.log(Week); // {'0':'Sun', '1':'Mon' .. '6': 'Sat', Sun:0, Mon:1, ... Sat: 6}

// 수동으로 값을 변경할 수 있고, 변경한 부분 부터 다시 1씩 증가함
enum Week {
  Sun, // 0
  Mon, // 1
  Tue = 0, // 0
  Wed, // 1
  Thu, // 2
  Fri, // 3
  Sat // 4
}
console.log(Week); // {'0':'Tue', '1':'Wed' .. '4': 'Sat', Sun:0, Mon:1, Tue:0, Wed: 1, ... Sat: 4}
console.log(Week[0]); // Tue

// 열거형 - 문자 
enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'blue'
}
console.log(Color.Red); // red

// 모든타입
const any: any = 123;
const list: any[] = [1, true, 'test'];

// 알 수 없는 타입 - Unknown에는 어떤 타입의 값도 할당할 수 있지만 Unknown을 any를 제외한 다른 타입에는 할당할 수 없음
let a: any = 123;
let u: unknown = 123;

let v1: boolean = a; // 가능
let v2: number = u; // 불가
let v3: any = u; // 가능
let v4: number = u as number; // 타입을 단언하면 할당 가능

참고

• 타입스크립트 핸드북
• 한눈에 보는 타입스크립트