3. 자바스크립트가 가지지 못한 녀석, 타입

3.1 타입스크립트 타입 알아보기

3.1.1 타입 지정하는 방법 (타입 선언 및 타입 추론)

// 자바스크립트 코드
let str = 'hello world!';

// 타입스크립트 코드
let str:string = 'hello world!';

let str : string = 'hello wolrd';

let str : string = 'hello wolrd';
str = 1; // Type 'number' is not assignable to type 'string'.

let str = 'hello world!'; // 자바스크립트 코드
str = 3 ; // 에러 발생
console.log(str); 

let str = 'hello world!';
str = 3 ; //Type 'number' is not assignable to type 'string'.
console.log(str);

3.1.2 기본 타입 알아보기

3.1.2.1 Boolean

let ts: boolean = true;
let ts2: boolean = false;

3.1.2.2 Number

let ts: number = 10;
let ts2: number = 20.3;

3.1.2.3 String

let ts: string = 'hello TypeScript!';

3.1.2.4 Object

let obj: object = { name: 'Kimlion', age: 27 };

type User = {
  name: string,
  age : number
}
let obj: User = { name: 'kimlion', age: 27 };

type UserType = {
  name: string,
  age : number
}
let obj: UserType = { name: 'kimlion', age: true }; //error!

interface User {
  name: string,
  age : number
}
let obj: User = { name: 'kimlion', age: 27 };

3.1.2.5 Array

let arr : number[] =[];
arr.push(1); // ok
arr.push("hello"); // error! Argument of type 'string' is not assignable to parameter of type 'number'.

3.1.2.6 Tuple

let a: [string, number] = ['hi', 10 ];
let b: [string, number] = [10 ,'hi']; // error!

let c: [string, number] = ['hi'];
// error! Type '[string]' is not assignable to type '[string, number]'.

3.1.2.7 enum

enum Animals { Cat, lion, pig }
let hero = Animals.lion;

enum Animals { Cat, lion, pig }
let hero = Animals[0]; 
console.log(hero);//cat

3.1.2.8 any

let ts: any = 'hi';
let ts2: any = 10;
let ts3: any = ['a', 1, true];

3.1.2.9 void

function sayHello(): void {
  console.log('hello'); 
}

function sayBye(): void {
  return "Bye"; // 값을 반환하여 에러가 난다.
}

3.1.2.10 undefined 과 null

3.1.2.11 never

function goingOn(): never {
  while (true) {
		console.log("go");
  }
}

3.2 타입 더 알아보기

3.2.1 리터럴 타입(Literal Types)

let x: "tsType" = "tsType";

x = "tsType"; // ok

x = "JS";  // error! Type '"JS"' is not assignable to type '"I'm TS"'.
x = "hello world"; // error!

3.2.2 유니온 타입 (Union Types)

function printId(id: number | string) {
  console.log("ID is: " + id);
}
printId(111); // OK
printId("222"); // OK
printId({ myID: 33333 }); // Error
printId([1, 2, 3]); // Error

3.2.3 교차타입 (Intersection Types)

• 예제

// TypeScript
interface Painting {
    name: String;
    color: String;
    price: Number;
}

interface Giraffe {
    name: String;
    color: String;
    height: Number;
}

const GiraffePainting : Painting & Giraffe = {
    name: "기린그림",
    color: "yellow",
    price: 10000,
    height: 100
}

// JavaScript (TypeScript 컴파일 결과)
var GiraffePainting = {
    name: "기린그림",
    color: "yellow",
    price: 10000,
    height: 100
};

3.2.4 열거형 타입 (Enum)

• 숫자 열거형

enum Weniv {
    Licat = 1,
    Zaespa = 2,
    Chilli = 3,
    Binky = 4
}

• 예제

// TypeScript
enum Weniv {
    Licat = 10,
    Zaespa = 20,
    Chilli ,
    Binky
}

// JavaScript (TypeScript 컴파일 결과)
var Weniv;
(function (Weniv) {
    Weniv[Weniv["Licat"] = 10] = "Licat";
    Weniv[Weniv["Zaespa"] = 20] = "Zaespa";
    Weniv[Weniv["Chilli"] = 21] = "Chilli";
    Weniv[Weniv["Binky"] = 22] = "Binky";
})(Weniv || (Weniv = {}));

• 문자 열거형

enum Weniv {
    Licat = "Jeju",
    Zaespa = "Seoul",
    Chilli = "Busan",
    Binky = "Dokdo"
}

• 복합 열거형 (Heterogeneous Enums)

enum Work {
    Life_Balance = 0,
    Overtime = "YES"
}

3.2.5 함수

• 파라미터와 리턴 타입을 선언하는 기본 형식

function sum(a: number, b: number): number {
  return a + b;
}

• 화살표 함수로 타입을 선언

const sum = (a: number, b: number): number => {
  return a + b;
}

• 리턴 생략한 형태로도 선언

const sum = (a: number, b: number): number => a + b

// 아래 코드와 같습니다.
function sum(a: number, b: number): number {
    return a + b;
}

3.2.6 클래스 타입

• 예제

// JavaScript
class Chicken {
    constructor() {
        this.name = 'HoneyChicken';
    }
}

const chick = new Chicken();

console.log(chick.name); //HoneyChicken을 출력

//TypeScript
class Chicken {
    name:string;
    constructor() {
        this.name = 'HoneyChicken';
    }
}

const chick = new Chicken();

console.log(chick.name);

3.2.7 타입 별칭

• 타입 별칭을 사용하지 않은 객체 타입

const pizza:{
	price:number;
	brand:string
} = {
	price:10000,
	brand:'DOMINO'
};

const chicken:{
	price:number,
	brand:string
} = {
	price:20000,
	brand:'BBQ'
}

• 타입 별칭을 사용한 객체

type Food ={
	price:number,
	brand:string
}

const pizza:Food={
	price:10000,
	brand:'DOMINO'
}

const chicken:Food={
	price:20000,
	brand:'BBQ'
}

• 타입 별칭을 사용한 number,string 타입

type Price = number;
type Brand = string;

type Food ={
	price:Price,
	brand:Brand
}

const pizza:Food={
	price:10000,
	brand:"DOMINO"
}

const chicken:Food={
	price:20000,
	brand:"BBQ"
}

• 타입 별칭을 사용하지 않은 화살표 함수

const pizza=(price:number,brand:string):string=>{
  return `가격은 ${price}원 브랜드는 ${brand} 입니다.`;
}

pizza(10000,'Domino') //'가격은 10000원 브랜드는 Domino 입니다.'

• 타입 별칭을 사용한 화살표 함수

type Food=(price:number,brand:string)=>string;

const pizza:Food=(price,brand)=>{
  return `가격은 ${price}원 브랜드는 ${brand} 입니다.`;
}
pizza(10000,'Domino') // '가격은 10000원 브랜드는 Domino 입니다.'

3.2.8 인터페이스에서의 타입 사용

• 매개변수의 타입으로 사용하는 인터페이스 예제

// TypeScript

interface StudentInfo {
  name: string;
  grade: number;  // grade: 4를 아래에서 사용하고 싶을 경우 추가
  isAdult: boolean; // isAdult: true를 사용하고 싶을 경우 추가  
}

function printInfo(personA: StudentInfo) {  // 매개변수의 타입: StudetnInfo
  console.log(`이름: ${personA.name}`);
  console.log(`학년: ${personA.grade}`);
  console.log(`성인여부: ${personA.isAdult}`);
}

let myInfo = { name: "danny", grade: 4, isAdult: true };
// 객체 리러털(myInfo)을 통해 값("danny", 4, true)을 가져다가 씀
// isAdult: boolean이 존재하지 않을 경우 isAdult:true는 무시됨

printInfo(myInfo);  

• 출력결과

이름: danny
학년: 4
성인여부: true

• 매개변수의 타입으로 사용하는 인터페이스 예제

// JavaScript (TypeScript 컴파일 결과)

function printInfo(personA) {
    console.log("\uC774\uB984: ".concat(personA.name));
    console.log("\uD559\uB144: ".concat(personA.grade));
    console.log("\uC131\uC778\uC5EC\uBD80: ".concat(personA.isAdult));
}

var myInfo = { name: "danny", grade: 4, isAdult: true };
printInfo(myInfo);

3.2.9 제네릭 클래스에서의 타입 사용

• 예제

class Plate<T> {
  public Contents!: T;  // Contents에 넘겨줄 타입
}

let menu = new Plate<string>(); // string 타입의 menu 객체 생성
menu.Contents = "Beef";  

let nth = new Plate<number>(); // [1]
nth.Contents = 3;
nth.Contents = "Pork"  // error

console.log(menu.Contents);
console.log(nth.Contents);

• 출력결과

Beef
3

• 제네릭 클래스 사용 여부로 알아보는 차이점

/* 제네릭 클래스 사용 전 */

class StringDictionary{
    contents!: string;
}

let sd = new StringDictionary();
sd.contents = "pi";  // ok
sd.contents = 1234;   // error

class NumberDictionary{
    contents!: number;
}

let nd = new NumberDictionary();
nd.contents = 3141592;  // ok

class BooleanDictionary{
		contents!: boolean;
}

let bd = new BooleanDictionary();
bd.contents = true;   // ok

/* 제네릭 클래스로 표현 */

class Dictionary<T> {
  contents!: T;
}

let sd = new Dictionary<string>();
sd.contents = "pi";

let nd = new Dictionary<number>();
nd.contents = 3141592;

let bd = new Dictionary<boolean>();
bd.contents = true

3.3 유틸리티 타입 (Utility Types)

3.3.1 Readonly<Type>

• 배열에서 readonly 속성 사용 예시

// 읽기 전용 배열
let strArr: readonly string[] = ["가", "나", "다", "라"];
console.log(strArr);  // ["가", "나", "다", "라"];

strArr[0] = "A"; // error

• 배열에서 readonly 속성 사용 예시 2

// 읽기 전용 배열
let numArr: ReadonlyArray<number> = [1, 2, 3, 4, 5, 6];
console.log(numArr); // [ 1, 2, 3, 4, 5, 6 ]

numArr.push(7); // error

• 인터페이스에서 readonly 속성 사용 예시

interface Shoes {
  readonly brand: string;
}

let myShoes: Shoes = { brand: "nike" };

myShoes.brand = "puma";  // error

• 인터페이스에서 readonly 속성 사용 예시 2

interface Students {
  name: string;
  grade: number;
  isAdult?: boolean;
}

/* 값 할당*/
let personK: Readonly<Students> = {  
  name: "Danny",
  grade: 4,
  isAdult: true,
};

/* 값 변경 */
personK.isAdult = false; // error

• 에러 메세지

3.3.2 Partial<Type>

• 예제

interface Student{
	name: string,
	grade: number,
	isAdult: boolean,
	gender: "male" | "female"
}

let personA: Partial<Student> = {
	name: "danny",
	grade: 4
}	

console.log(personA.name);
console.log(personA.grade);

• 출력 결과

danny
4

• 에러 케이스

interface Student {
  name: string;
  grade: number;
  isAdult: boolean;
  gender: "male" | "female";
}

let personA: Student = {
  name: "danny",
  grade: 4,
};

console.log(personA.name);
console.log(personA.grade)

• 에러 메시지

interface NewStudent {
  name: string;
  grade: number;
  isAdult?: boolean;
  gender?: "male" | "female";
}

const newPerson: NewStudent = {
  name: "danny",
  grade: 4,
};

console.log(newPerson.name);
console.log(newPerson.grade);

• 출력결과

danny
4

3.3.3 Required<Type>

• 예제

interface StudentB {
  name: string;
  grade: number;
  isAdult?: boolean;
  gender?: "male" | "female";
}

let personB: Required<StudentB> = {
  name: "danny",
  grade: 4,
};

3.3.4 Record<Keys,Type>

• Record<K,T> 사용예시

const student: Record<string, number> = {
  KIM: 20,
  PARK: 24,
};

3.3.5 Pick<Type, Keys>

interface Student {
  name: string;
  grade: number;
  isAdult: boolean;
  gender: "male" | "female";
}

let person: Pick<Student, "name" | "grade"> = {
  name: "danny",
  grade: 4,
  isAdult: true,   // error
};

3.3.6 Omit<Type,Keys>

interface Student {
  name: string;
  grade: number;
  isAdult: boolean;
  gender: "male" | "female";
}

let person: Omit<Student, "isAdult" | "gender"> = {
  name: "danny",
  grade: 4,
  isAdult: true,   // error
};

3.3.7 Exclude<Type1, Type2>

type TypeX = string | number | boolean;
type TypeY = Exclude<TypeX, number | boolean>;

3.3.8 NonNullable<Type>

type Type1 = string | number | boolean | void | null | undefined;
type Type2 = NonNullable<Type1>;  // string | number| boolean | void

3.3.9 ReturnType<Type>

• 예제1

type TypeC = ReturnType<() => boolean>;

• 예제2

function func1(args: { a: number; b: boolean; c: string }): void {}
type TypeD = ReturnType<typeof func1>;

3.3.10 Parameters<Type>

• 예제1

type TypeA = Parameters<() => boolean>;

• 예제2

function func1(args: { a: number; b: boolean; c: string }): void {}
type TypeB = Parameters<typeof func1>;