타입스크립트 (Tyscript)

Command Prompt

tsc app.ts 
node app.js
tsc --init // tsconfig.json 생성
tsc -w app.ts // watch

타입 추론 (Type Inference)

타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추해낼 수 있다.

let a = 5;
a = 'hello'; // Error: Type 'string' is not assignable to type 'number'.

타입 명시 (Type Annotations)

변수를 선언할 때, 변수값의 타입을 명시함으로써 변수값의 데이터 타입을 지정

let x: string = '영원히 문자열';
x: number = 20; // Error: 'number' only refers to a type, but is being used as a value here.

let studentID: number = 12345;
let studentName: string = 'Jenny';
let age: number = 21;
let gender: string = 'female';
let subject: string = 'Javascript';
let courseCompleted: boolean = false;

인터페이스 (Interface)

"객체의 구조를 정의". (이름은 대문자로 시작)
인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다.

function getStudentDetails(studentID: number): object { // 아무 값도 반환하지 않으면 void
  return null;
}

function getStudentDetails(studentID: number): { // 반환되는 객체의 구조를 타입으로 지정
  studentID: number;
  studentName: string;
  age: number;
  gender: string;
  subject: string;
  courseCompleted: boolean;
} {
  return null;
}

interface Student {
  readonly studentID: number, // Read-only
  studentName: string,
  age?: number; // Optional Property
  
  // gender: GenderType,
  gender: 'male' | 'female' | 'genderNeutral',
  
  subject: string,
  courseCompleted: boolean,
  
  // addComment (comment: string): string; 또는
  addComment?: (comment:string) => string
}

function getStudentDetails(studentID: number): Student {
  return {
    studentID: 123456,
    studentName: 'Mark',
    gender: /* 'male' */ GenderType.Male,
    subject: 'Node JS',
    courseCompleted: true
  };
}

• 프로퍼티에 Optional 기호 ?
• Read-only

function saveStudentDetails (student: Student): void {
  // student.studentID = 11222;
  // Error: Cannot assign to 'studentID' because it is a read-only property.
}

• 인터페이스 내에 프로퍼티 뿐 아니라 메소드 또한 정의할 수 있다.
  메소드 : "객체 내에서 선언된 함수"
• 타입스크립트 컴파일러가 타입스크립트를 자바스크립트로 컴파일 할 때, 인터페이스는 그냥 지워버림
• 작성 중인 코드에 대한 더 많은 정보를 타입스크립트에게 제공하기 위해 존재
• 더 많은 정보 제공 ➡ 더 많은 도움

saveStudentDetails({
  studentID: 121212,
  studentName: 'Janet',
  age: 30,
  gender: /* 'female' */ GenderType.Female,
  subject: 'Mongo DB',
  courseCompleted: false
});

let student1 = {
  studentID: 121212,
  studentName: 'Janet',
  age: 30,
  gender: /* 'female' */ GenderType.Female,
  subject: 'Mongo DB',
  courseCompleted: false
}
saveStudentDetails(student1);

멋진 녀석들: 열거형 (Enum)과 리터럴 (Literal)

🧐 gender: string 을 주관식(any)이 아닌 객관식으로 명시하고 싶을 때 2가지 방법

1. 열거형 Enum
   연관된 아이템들을 함께 묶어서 표현할 수 있는 수단
   인터페이스와 달리 js파일에 코드가 구현됨. "런타임에 존재하는 실제 객체"
   gender: GenderType

1-1) 숫자 열거형 (Numeric Enum)

enum GenderType {
  Male,
  Female,
  GenderNeutral
}

GenderType.Male 이 숫자 0이 아니라 string value인 'Male' 이길 원한다면,
1-2) 문자열 열거형 (String Enum)

enum GenderType {
  Male = 'male',
  Female = 'female',
  GenderNeutral = 'genderNeutral'
}

2. 리터럴 타입 (Literal)
   파이프라인을 이용해 나열
   gender: 'male' | 'female' | 'genderNeutral'

Any, 유니언 타입, 타입 별칭 (Type Aliases), 타입 가드 (Type Guard)

any : 만사OK! 아주 제한적으로 사용할것

let someValue: any = 5;
someValue = 'hello';
someValue = true;

제한된 타입들을 동시에 지정 : 유니언 타입 (Union)

let someValue: number | string;

number | string 이라는 같은 코드를 반복하는 대신
조합된 코드를 타입으로 지정하고 재활용 : 타입 별칭 (Type Aliases)

type StrOrNum = number | string;
let orderID: StrOrNum;

타입 가드 (Type Guard)

문제 : StrOrNum 타입의 매개변수 price 를 number 타입의 itemPrice 에 할당하려 할 때 에러 발생
해결 : JS의 Typeof Operator(연산자) 와 조건문 사용
"유니언 타입을 사용할 때 Typeof Operator를 사용하여 코드 검증을 수행하는것" +a..

let itemPrice: number;
const setItemPrice = (price: StrOrNum):void => {
  // itemPrice = price; // Error
  
  if (typeof price === 'string') {
    itemPrice = 0;
  } else {
    itemPrice = price;
  }
};
setItemPrice(50);

함수의 타이핑, 매개변수/전달인자

• 반환 (Return)
• 매개변수 (Parameter)

function 함수이름 (매개변수1: type, 매개변수2: type): 함수의 반환 type {}

function sendGreeting (param1, param2): void {}
sendGreeting(arg1, arg2);

void 타입: 아무것도 반환하지 않는, 함수의 반환값으로만 사용할 수 있는 타입
string
string[] ...

• 타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정.
• 함수 호출 시 타입스크립트 컴파일러는 함수에 정의된 매개변수 (parameter) 와 함수를 호출할때 전달되는 인자 (argument) 를 비교/검사

문제 : 매개변수-전달인자 수가 일치하지 않으면 에러발생
해결 : 프로퍼티의 선택 속성과 마찬가지로 선택적 매개변수 (Optional Parameter) ?

function sendGreeting (message: string, userName?: string): void {
  console.log(`${message}, ${userName}`);
}

💥 전달되는 매개변수가 여러개이고, 몇가지만 선택적 매개변수인 경우
선택적 매개변수들은 필수 매개변수 뒤에 위치할 것 !
타입스크립트 규칙상 선택적 매개변수 오른쪽의 나머지 매개변수들도 선택적 매개변수가 됨.

문제 : 아무런 값이 전달되지 않았을 때 undefined 대신 기본값 할당하기
해결 : 기본 매개변수 (Default Parameter)

기본 매개변수 자동 할당될 경우, 선택적 매개변수 ? 제거, 타입 명시 :string 제거 (타입 추론)

function sendGreeting (message = 'Hello', userName = 'there'): void {
  console.log(`${message}, ${userName}`);
}
sendGreeting(); // Hello, there
sendGreeting('Good morning'); // Good morning, there
sendGreeting('Good afternoon', 'Jane'); // Good afternoon, Jane

화살표 함수 (Arrow Function)

const sendGreeting = (message = 'Hello', userName = 'there'): void => {
  console.log(`${message}, ${userName}`);
}