타입이 있는 자바스크립트

• 타입스크립트는 자바스크립트로 컴파일되는 자바스크립트의 타입이 있는 상위집합이다.
  보다 정확히는 정적 타입 시스템(static type system)을 도입한 자바스크립트이다.
• 정적 타입 시스템이 있는 언어, 즉 정적 타입 언어(statically typed language)에서는 프로그램의 예상 동작을 타입을 통해 나타내고, 그 예상에 맞게 동작할 지의 여부를 타입 검사기(type checker)를 통해 실행 전에 확인할 수 있다.
  
  

자바스크립트 코드

function preferTypeScript(person) {
  return person.favoriteLanguages.includes('TypeScript');
}

타입스크립트 코드

type Language = 'TypeScript' | 'JavaScript' | 'Python' | 'Rust' | 'Haskell';
interface Person {
  favoriteLanguages: Array<Language>;
}
function preferTypeScript(person: Person): boolean {
  return person.favoriteLanguages.includes('TypeScript');
}

• 위의 자바스크립트 코드를 아래의 타입스크립트로 나타낼 수 있다.
• 기본적으로 같은 내용이지만 함수의 인자나 리턴값 등 만족해야 할 특정 조건에 대한 정보를 추가적으로 담고 있다.
• 타입스크립트 코드는 타입스크립트 컴파일러에 의해 자바스크립트 코드로 컴파일된다.

타입스크립트 기초 문법

타입 표기 (Type Annotation)

• 타입스크립트 코드에서 어떤 변수나 값의 타입을 표기하기 위해 타입 표기를 사용한다.
• 타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여 value: type의 형태로 표기한다.
• 지정해 준 타입 외에 다른 타입을 값으로 입력하면 에러가 발생한다.

const areYouCool: boolean = true;
const answer: number = 42;
const typescript: string = "great";
const greetings: string = `
Hello, Readers!
Welcome to TypeScript.
`;
const hasType: Object = {
  TypeScript: true,
  JavaScript: false
};

기본 타입

• 타입스크립트의 기본 타입에는 자바스크립트에서 제공하는 boolean, nember, string, null / undefined 외에 특수한 타입이 몇 가지 있다.

any

• any 타입은 모든 타입과 호환 가능하다. 모든 값의 타입을 any로 지정할 수 있고, any 타입의 변수에 모든 값을 할당할 수 있다.
• 타입 정의를 제공하지 않는 라이브러리, 코드 작성 시점에 형태를 알 수 없는 값의 타입 표기에 유용하다.
• 하지만 any를 남용하면 타입스크립트를 사용하는 의미가 사라지기 때문에 필요한 경우에만 사용해야 한다.

void

• null과 undefined 만을 값으로 가질 수 있는 타입으로, 아무 값도 반환하지 않는 함수의 반환 타입을 표시할 때 사용한다.

never

• 아무런 값도 가질 수 없는 타입으로 null, undefined를 포함해 어떤 값도 할당할 수 없다.

function alwaysThrow(): never {
  throw new Error(`I'm a wicked function!`);
}

배열과 튜플

배열

• 배열 타입은 자바스크립트 Array 값의 타입을 나타낸다.

// 원소 타입 뒤에 대괄호 []를 붙여 표현
const pibonacci: number[] = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: string[] = ['Imperial Stout', 'India Pale Ale'];

const pibonacci: Array<number> = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55];
const myFavoriteBeers: Array<string> = ['Imperial Stout', 'India Pale Ale'];

튜플

튜플 타입을 이용해 원소의 수, 각 원소의 타입이 지정된 배열의 타입을 정의할 수 있다.

const nameAndHeight: [string, number] = ['조단비', 163]

튜플 타입 변수는 명시된 개수 만큼의 원소만 가질 수 있다. 정의 보다 더 많거나 더 적은 원소를 갖는 배열을 할당하면 에러가 발생한다.

// 에러 발생 예
const invalidNameAndHeight: [string, number] = ['조단비', 163, 3];

튜플 타입의 값을 Array 프로토타입의 메소드를 통해 조작하는 것이 가능하다. 그렇기 때문에 아래 코드에 에러가 발생하지 않는다.

const validNameAndHeight: [string, number] = ['조단비', 163];
validNameAndHeight.push(3);

객체

객체 타입

자바스크립트의 오브젝트 리터럴을 정의 하듯이 중괄호 {}를 이용하여 객체 타입을 표현한다.

const user: { name: string; height: number; } = { name: '조단비', height: 163 };

이렇게 정의하는 객체 타입은 리터럴과 차이가 있다.

• 콜론(:)의 오른쪽은 값 대신 해당 속성의 타입이 들어간다.
• 구분자로 콤마(,)도 사용할 수 있지만 세미콜론(;)도 사용할 수 있다.

선택 속성

속성명 뒤에 물음표(?)를 붙여 사용하는데 해당 속성이 존재할 수도 있고, 존재하지 않을 수도 있을 때 사용한다.

const example: { text: string; number?: number; } = { 
  text: '타입스크립트' 
};

읽기 전용 속성

속성명 앞에 readonly라는 키워드를 사용하여 해당 속성의 재할당을 막을 수 있다. readonly 키워드가 붙은 속성은 const 키워드를 이용한 변수 정의와 비슷하게 동작한다.

const text: { 
  readonly string: string; 
  number: numer; 
} = { string: '타입스크립트', number: 1 };
text.string = '자바스크립트'; // 에러 발생

📌 실제 프로젝트에서 사용하며 알게된 정리
배열 / 객체 - 메모리를 가지는 경우가 다르고 각자의 장단점이 있다.

• 객체를 꼭 만들어야 하지 않는 경우라면, 배열로 만드는 것이 좋다.
• 프로젝트가 커지게 되면 객체를 만들 때 마다 인스턴스를 생성하기 때문이다.
• usecallback를 쓰지 않고 일반적인 함수라면 뷰에 작성 하지 않고 뷰모델에 작성 해주는 것이 좋다.
• reducer도 타입 지정 가능하다.