TypeScript | 타입 스크립트 겉핥기

TypeScript

• 타입스크립트는 자바스크립트의 모든 기능을 포함하면서 정적 타입을 지원하는 언어
• 자바스크립트의 확장
• 자바스크립트와 달리 브라우저에서 실행하기 위해선 컴파일해주어야 함
• 타입 오류가 컴파일 시 발견됨 -> 에러의 사전 방지
• 마이크로소프트에서 개발하며 꾸준하게 업데이트 버전이 출시됨
• 자바스크립트의 새로운 표준이 빠르게 추가됨

타입

타입을 선언하는 방법은 변수 명 오른쪽에 콜론(:)과 함께 타입을 선언하며, 이 콜론을 타입 애노테이션(Type Annotation)이라 부른다.

const height: number | string = 180;    // number 혹은 string 타입으로 정의, 초기값은 180
height = '150';                         // 문자열 저장 가능

타입스크립트의 타입은.. (자주 사용되는 것들 위주로 정리)

• primitives
  • number
  • boolean
  • string
• Array
• Tuple
• null
• undefieded
• any
• void
• never
• object
• Union
• enum

any타입은 기존의 자바스크립트 코드로 작성된 프로젝트를 타입스크립트로 포팅하는 경우 유용하게 사용됨
실제로 타입을 알 수 없는 경우나 타입 정의가 안 된 외부 패키지를 사용하는 경우에 좋음
하지만 any타입을 남발하면 타입스크립트를 사용하는 의미가 퇴색되므로 되도록 피하는 것이 좋음

const age: number = 7;             // 숫자
const isReady: boolean = true;     // boolean
const name: string = '이름';        // 문자

// 배열은 두 가지 방법으로 선언 가능
const arr1: number[] = [1, 2, 3];        
const arr2: Array<number> = [1, 2, 3];  // 제네릭 사용        

// 튜플: 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
const data: [string, number] = ['foo', 0];
data[0].substr(1);  // OK
data[1].substr(1);  // error 숫자에 문자열 메서드 호출할 경우 타입에러 발생

// null & undefined
const foo: undefined = undefined;
const bar: null = null;
// undefined와 null은 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용된다.
let msg: string | undefined = undefined;
msg = 'hello';

// any: 모든 종류의 값을 허용하는 special type
let obj: any = { x: 0 };
// 아래 코드 모두 컴파일 에러가 발생하지 않는다
obj.foo();
obj();
obj.bar = 100;
obj = 'hello';
const n: number = obj;

// void
function print(name: string): void {  // 반환하는 값이 없는 함수의 반환 타입은 void로 정의한다
     console.log("My name is ", name); 
}

// never
function fail(msg: string): never {   // 항상 비정상적으로 종료되는 함수의 반환 타입은 never로 정의한다
     throw new Error(msg); 
}

// object
let cat: object;
cat = { name: 'nabi' };
cat.color;  // error. 해당 속성이 정의되지 않았기 때문에

// Union: | 기호로 정의
const id: number | string;

// Intersection: & 기호로 정의
let v1: (1 | 3 | 5) & (3 | 5 | 7);  // let v1 = 3 | 5;와 동일
v1 = 3;   // OK
v1 = 1;   // error


// Enum
enum Fruit {
 Apple, Banana, Orange 
}
const v1: Fruit = Fruit.Apple;
const v2: Fruit = Fruit.Orange | Fruit.Banana = Fruit.Banana;

// 열거형 타입의 첫 번째 값은 자동으로 0이 할당되며, 
// 중간에 값을 입력하면 다음 원소는 이전 원소에서 1만큼 증가한 값을 갖는다
enum Players {
  Curry,
  Lebron = 6,
  Jrue
}
console.log(Players.Curry, Players.Lebron, Players.Jrue);   // 0, 6, 7이 출력된다

Type Aliases

type 키워드를 사용해 타입에 별칭(alias)을 줄 수 있다.

// number 혹은 string을 저장할 수 있는 ID라는 이름의 type을 정의
type ID = number | string;

let id: ID;
id = 100;         // OK
id = 'c302';      // OK

Interface

객체에 이름, 타입을 부여하는 방법 중 하나

interface Player {
    name: string;
      backNumber: number;
      team: string;
}

const curry: Player = { name: 'Stephen Curry', backNumber: 30, team: 'Golden State Warriors' };
const davis: Player = { name: 'Anthony Davis', backNumber: '3', team: 'LA Lakers' };  // error 


// 선택속성, 읽기 전용
interface Person {
     readonly name: string;          // 읽기 전용
      age?: number;                   // ?을 붙이면 필수 속성이 아님
    height: number | undefined;     // undefined로 유니온 타입 추가. 필수 속성임
}

const foo: Person = { name: 'Ace', height: 400 }; // age는 생략 가능
foo.name = 'Jelly';  // error. 변수 정의 후 읽기 전용 속성 변경 불가

const bar: Person = { name: 'Ade' };              // error. undefined를 유니온 타입으로 추가해도 필수임

힘들다..