먼저, TypeScript는 **정적 타입 검사자(A Static Type Checker)**입니다.
정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾습니다.
또한 TypeScript는 타입이 있는 JavaScript의 상위 집합 (A Typed Superset of JavaScript) 입니다.
따라서 TypeScript는 JavaScript와 구문과 런타임 특성을 공유합니다.
현실적으로 TypeScript를 사용하는 가장 큰 이유는 Visual Studio Code 자동 완성과 실시간 오류 검사 때문입니다.
간단히 REPL을 사용하고 싶다면 ts-node를 실행하면 됩니다.
npx ts-nodeREPL이란?REPL이란? Read-Eval-Print-Loop의 약자로 애플리케이션 실행 상태에서 사용자가 입력한 명령어(소스코드)를읽고(Read)명령어를 **평가(Eval)**하고 결과를 **출력(Print)**한 다음 다시 입력을 기다리는 상태로 돌아가는 과정을 **반복(Loop)**합니다.REPL의 필요성REPL은 주로 개발자들이 소스 코드 실행 결과를 빨리 확인해야 하는 경우 사용합니다.
특정 개발자들은 더 나은 단위 테스트를 작성하기 위해REPL을 사용하기도 합니다.
Chrome 개발자 도구의 콘솔 탭도REPL도구 중 하나입니다.
1. 타입 지정
// 원시 타입 : string, number 그리고 boolean
let name: string;
let age: number;
name = '한성욱';
age = 30;
name = 13;
// <repl>.ts:6:1 - error TS2322: Type 'number' is not assignable to type 'string'.
age = '한성욱';
// <repl>.ts:7:1 - error TS2322: Type 'string' is not assignable to type 'number'.
let human: {
name: string;
age: number;
};
human = { name: '한프로', age 15 };
// 정해진 값으로 타입을 지정할 수 있습니다. 이런 타입은 Union에서 유용하게 쓰입니다.
let category: 'food';
category = 'food';
// 배열은 타입 뒤에 대괄호를 붙여주면 됩니다.
let numbers: number[];
numbers = [1,2,3];
// 배열보다 깐깐하게 타입을 관리하고 싶다면 Tuple을 사용합니다.
let pair: [string, number];
pair = ['hp', 256]2. 타입 정의(Defining Types)
TypeScript에서는 복잡한 오브젝트의 타입을 재사용하기 위해 타입을 정의할 수 있습니다.
타입을 정의하는 방법에는 interface와 type을 사용하는 방법이 있습니다.
type Human = {
name: string;
age: number;
};
let boy: Human;
boy = { name: '한성욱', age: 30 };
interface Person {
name: string;
age: number;
}
let girl: Person;
girl = { name: '한과장', age: 20 };
function add(x: number, y: number): number {
return x + y;
}
add(1, 2);
add('hello', 2);
// <repl>.ts:6:5 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
function sub(x: number, y: number): string {
return x - y;
}
// <repl>.ts:6:45 - error TS2322: Type 'number' is not assignable to type 'string'.3. 타입 추론 (Types by Inference)
TypeScript는 JavaScript 코드를 받아들이면서 타입을 가지는 타입 시스템을 구축할 수 있습니다. 예를 들어, 변수를 생성하면서 동시에 특정 값에 할당하는 경우 TypeScript는 그 값을 해당 변수의 타입으로 사용합니다.
const name: string = '한성욱';
const name = '한성욱';4. Union Type
**유니언 타입(Union Type)**은 서로 다른 두 개 이상의 타입들을 사용하여 만드는 것으로, 유니언 타입의 값은 타입 조합에 사용된 타입 중 _무엇이든 하나_를 타입으로 가질 수 있습니다. 조합에 사용된 각 타입을 유니언 타입의 멤버라고 부릅니다.
**유니언 타입(Union Type)**은 | operator를 사용합니다. 예를 들어, boolean 타입을 true 또는 false로 설명할 수 있습니다.
type bool = true | false;
let flag: bool;
flag = true;
flag = flase;
flag = 3;
//<repl>.ts:10:1 - error TS2322: Type 'number' is not assignable to type 'bool'.- 매개변수를 제한하거나 할 때 유용하게 사용할 수 있습니다.
type Category = 'food' | 'toy' | 'bag';
function fetchProducts({ category }: { category: Category }) {
console.log(`Fetch ${category}`);
}- ReactNode처럼 레거시 환경 또는 코드 때문에 사용할 수 밖에 없습니다.
export type ReactNode =
| React$Element<any>
| ReactPortal
| ReactText
| ReactFragment
| ReactProvider<any>
| ReactConsumer<any>;
let target: string | number;
target = '한성욱';
target = 11;
target = null;
//<repl>.ts:11:1 - error TS2322: Type 'null' is not assignable to type 'string | number'.
target = undefined;
//<repl>.ts:11:1 - error TS2322: Type 'undefined' is not assignable to type 'string | number'.아래 예제 코드의 Person은 마치 하나의 객체 리터럴 타입으로 작성된 것 처럼 Human 와 Creature 두 개의 모든 속성을 가지고 있습니다. Intersection Type은 & Operator를 사용합니다.
type Human = {
name: string;
age: number;
};
type Creature = {
hp: number;
mp: number;
};
types Person = Human & Creature;
let person: Person;
person = {name: '한성욱', age: 20, hp: 400, mp: 200}아래 예제 코드처럼 undefined를 직접 사용하진 않습니다.
let targetName: string | undefined;
targetName = '한성욱';
targetName = undefined;undefined는 함수 매개변수(Parameter)에서 주로 사용되고,
**물음표 기호(?)**를 사용해서 Optional Parameter로 처리합니다.
function greeting(name?: string): string {
return `Hello ${name || 'world'}`;
}
// Optional Parameter로 처리하는 것도 좋지만 기본값을 잡아주면 더 좋습니다.
function greeting(name: string = 'world'): string {
return `Hello ${name}`;
}
// Optional Parameter는 매개변수가 오브젝트일 때 가장 많이 사용합니다.
function greeting({ name, age }: { name: string; age?: number }): string {
return age ? `${name} (${age})` : name;
}
// 기본값을 잡아줄 경우
function greeting(
{ name, age }: { name: string; age?: number } = { name = '' }
): string {
return age ? `${name} (${age})` : name;
}
// 아래처럼 타입 정의를 활용해서 처리할 수도 있습니다.
type Human = {
name: string;
age?: number;
};
function greeting({ name, age }: Human): string {
return age ? `${name} (${age})` : name;
}REPL이란? Read-Eval-Print-Loop의 약자로 애플리케이션 실행 상태에서 사용자가 입력한 명령어(소스코드)를읽고(Read)명령어를평가(Eval)하고 결과를출력(Print)한 다음 다시 입력을 기다리는 상태로 돌아가는 과정을반복(Loop)합니다.REPL의 필요성REPL은 주로 개발자들이 소스 코드 실행 결과를 빨리 확인해야 하는 경우 사용합니다. 특정 개발자들은 더 나은 단위 테스트를 작성하기 위해 REPL을 사용하기도 합니다. Chrome 개발자 도구의 콘솔 탭도REPL도구 중 하나입니다.