Harvey's TechNote

keyof

interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}

type UserKey = keyof User;  // 'id' | 'name' | 'age' | 'gender'

const uk:UserKey= "name";

Partial<T>

interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}

// interface User {
//     id?: number;
//     name?: string;
//     age?: number;
//     gender?: "m" | "f";
// }
//partial을 아래와 같이 사용하면 위 주석의 코드를 사용한 것과 같다.

let admin :Partial<User> = { 
    id:1,
    name: "Bob",
}

Required<T> -> 모든 property를 필수로 바꿔준다.

interface User {
    id: number;
    name: string;
    age?: number;
}

let admin: User = { //Requiired<User> 형태로 넣으면 age가 없기 때문에 에러가 난다.
    id: 1,
    name: "Bob",
}

Readonly<T>

interface User {
    id: number;
    name: string;
    age?: number;
}

let admin: Readonly<User> = {  //이후 수정 불가.(읽기 전용)
    id: 1,
    name: "Bob",
}

admin.id = 4; // ->에러가 난다.

Record<K, T> -> K= Key, T=Type

// interface Score {
//     "1": "A" | "B" | "C" | "D";
//     "2": "A" | "B" | "C" | "D";
//     "3": "A" | "B" | "C" | "D";
//     "4": "A" | "B" | "C" | "D";

// }

// const score:Score = {
//     1 : "A",
//     2 : "C",
//     3 : "B",
//     4 : "D",
// }


// 위 코드를 아래와 같이 사용할수 있음.


const score: Record<"1" | "2" | "3" | "4", "A" | "B" | "C" | "D"> = {
    1 : "A",
    2 : "C",
    3 : "B",
    4 : "D",
}

type Grade = "1" | "2" | "3" | "4";
type Score = "A" | "B" | "C" | "D";

const score2: Record<Grade, Score> = {
    1 : "A",
    2 : "C",
    3 : "B",
    4 : "D",
}




interface User {
    id: number;
    name: string;
    age: number;
}

function isValid(user: User) {
    const result: Record<keyof User, boolean> = {
        id: user.id > 0,
        name: user.name !== "" ,
        age: user.age > 0,
    };
    return result;
}

Pick<T, K>, Omit<T, K>, Exclude<T, T>, NonNullable<Type>

interface User {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W";
}

const admin: Pick<User, "id" | "name"> = {
    id:0,
    name: "Bob",
}


const admin2: Omit<User, "age" | "gender"> = {
    id:0,
    name: "Bob",
}

type T1 = string | number | boolean
type T2 =Exclude<T1, number | string>; // -> boolean만 남게된다.

type T3 = string | null | undefined | void;
type T4 = NonNullable<T1>; // -> string과 void만 남게된다.

JavaScript에서는 다음과 같이 코드를 짰을 때 결과값에 대한 문제를 직접 찾아야한다.

function add(num1, num2) {
	console.log(num1 + num2);
}

add();					// -> NaN
add(1);					// -> NaN
add(1,2);				// -> 3
add(3,4,5);				// -> 7
add('hello', 'world');	// -> "helloworld"

JavaScript(동적 언어)의 경우 런타임에 타입이 결정되고 오류가 발견이 된다 -> 개발자의 실수로 인한 오류를 사용자가 볼수 있게된다.

 Java, TypeScript(정적 언어)는 컴파일 타임에 타입이 결정되고 오류가 발견이 되기 때문에 코드 작성 시간은 비교적 길어질수 있지만 초기 생각을 많이 해서 코드를 짠다면 안정적이고 빠르게 작업을 진행할 수 있다.

제네릭을 사용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능하다.  선언시에 타입 파라미터만 적어주고 생성하는시점에 사용하는 타입을 결정하는 것.
아래와 같이 여러 타입을 받을 때 쓰인다.

function getSize<T>(arr: T[]): number {
    return arr.length;
}

const arr1 = [1, 2, 3];
getSize<number>(arr1); //3

const arr2 = ["a", "b", "c"];
getSize<string>(arr2);

const arr3 = [false, true, true];
getSize(arr3);

인터페이스

interface Mobile<T>{
    name: string;
    price: number;
    option: any;
}

const m1: Mobile<object> = { // or Mobile<{ color: striong; coupon: boolean}>
    name:"s21",
    price:1000,
    option: {
        color:"red",
        coupon: false,
    },
};

const m2: Mobile<string> =  {
    name: "s20",
    price: 900,
    option: "good",
}

interface User {
    name: string;
    age: number;
}

interface Car {
    name: string;
    color: string;
}

interface Book {
    price: number;
}

const user: User = { name: "a", age: 10};
const car: Car = {name: "bmw", color: "red"};
const book: Book = { price : 3000};

function showName<T extends { name : string}>(data:T): string {
    return data.name;
}

showName(user);
showName(car);
// showName(book);  name 없거나 name의 type이 다르면 오류가 난다.

추상 클래스는 반드시 상속 받아서만 사용할수있다.
추상 클래스 내부 추상 메서드는 반드시 구현해줘야한다.

abstract class Car{
    color: string;
    constructor(color: string){
        this.color = color;
    }
    start() {
        console.log("start");
    }
    abstract doSomething():void;
}

class Bmw extends Car{
    constructor(color: string){
        super(color);
    }
    doSomething(){
        alert(3);
    }
}

const z4 = new Bmw("black");

리터럴 타입

const userName1 = "Bob";
let userName2: string | number = "Tom";
userName2 = 3;

type Job = "police" | "developer" | "teacher";

interface User {
    name : string;
    job : Job;
}

const user:User = {
    name: "Bob",
    job: "developer"
} 

interface HighSchoolStudent {
    name: string;
    grade: 1 | 2 | 3;  // => 유니온 타입
}

유니온 타입

interface Car {
    name: "car";
    color: string;
    start(): void;
}

interface Mobile {
    name: "mobile";
    color: string;
    call(): void;
}


function getGift(gift: Car | Mobile){
    console.log(gift.color);
    if(gift.name === "car"){
    gift.start();
    }else{
        gift.call(); 
    }
}

교차 타입

interface Car {
    name: string;
    start(): void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

const toyCar: Toy & Car = {
    name : "타요",
    start(){},
    color:"blue",
    price:1000,

}

//아래와같이 매개변수의 타입, 함수의 반환 타입을 입력한다.
function add(num1: number, num2: number): void{

    console.log(num1+num2);
}

function hello(name?: string){  //아래 name에 값이 없으면 "world"를 반환한다고 되어 있지만 name?과 같이 typescript에선 명시적으로 값이 없어도 된다고 알려줘야함.
    return `Hello , ${name || "world"}`;
}

function hello2(name = "world"){ //위와 같음.
    return `Hello , ${name}`;
}

const result = hello();

function hello(name: string, age?:number): string { // age?가 name 앞에 오지 않도록 주의.
    if(age !== undefined){
        return `Hello, ${name}. You are ${age}`;
    }else{
        return `Hello, ${name}`;
    }
}

function add(...nums:number[]){
    return nums.reduce((result, num) => result + num,0);
}

add(1, 2, 3); //6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); //55

this

interface User {
    name: string;
}

const Sam: User = {name:'Sam'}

function showName(this:User, age:number,gender:'m'|'f'){ //this의 자료형은 맨 앞에서 지정.
    console.log(this.name)
}

const a = showName.bind(Sam);
a(30, 'm');

오버로드

interface User {
    name: string;
    age: number;
}
function join(name: string, age:string): string;    //동일한 함수지만 매개변수의 타입이나 개수에 따라 다르게 동작해야할시 오버로드 사용. 
function join(name: string, age:number): User;
function join(name: string, age: number | string): User | string {
    if( typeof age === "number"){
        return {
            name,
            age,
        };
    }else{
        return "나이는 숫자로 입력해주세요.";
    }
}

const sam: User = join("Sam",30);
const jane: string = join("Jane","30");

type Score = 'A' | 'B' | 'C' | 'F';

interface User{
    name: string;
    age: number;
    gender? : string;
    readonly birthYear : number;
    // [grade:number] : string; ->number를 키로 받고 string을 value로 받는 property를 여러개 받을 수 있음.
    [grade:number] : Score; //Score라는 타입을 만들어 받을 수 있는 값을 지정.
}

let user : User = {
    name:'xx',
    age:30,
    birthYear:2000,
    1 : 'A',
    2 : 'B'
}

user.age = 10;
user.gender = "male"
// user.birthYear = 1990;  readonly라 최초에 값을 설정한 뒤에는 값을 변경할 수 없음.
 
console.log(user.age)


interface Add{
    (num1:number, num2:number): number;
}

const add: Add = function(x, y){
    return x+y;
}

add(10,20);

interface IsAdult {
    (age:number):boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33) // true

// inplements

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Benz extends Car {
    door: number;
    stop(): void;
}

const benz: Benz = {
    door: 5,
    stop(){
        console.log('stop');
    },
    color: 'black',
    wheels: 4,
    start(){}
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string){
        this.color = c;
    }

    start(){
        console.log('go..');
    }

}
const b = new Bmw('green');
console.log(b);
b.start();

//extends -> 확장.

//아래와 같이 다중 상속도 가능.

interface Car{
    color: string;
    wheels: number;
    start(): void;
}

interface Toy{
    name: string;
}

interface ToyCar extends Car,Toy {
    price : number
}

let age:number=30;
let age2=30;
let isAdult:boolean = true;
let a:number[]= [1,2,3];
let a2:Array<number> = [1,2,3];

let week1:string[] = ['sun','mon','tue'];
let week:Array<string> = ['wed','thu','fri'];

//튜플 (Tuple)

let b:[string, number];

b = ['z',1];
b[0].toLowerCase(); //이렇게도 사용 가능.

//void, never

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

function showError():never{ // 자료형을 붙이지 않아도 된다.
    throw new Error();
}

function infLoop():never{
    while (true){
        //do something..
    }
}

// enum

enum Os {
    Window = 'win' ,  //아무것도 입력하지 않으면 1, 2, 3으로 변수 값이 저장된다.
    Ios = 'ios',
    Android = 'and'
}


let myOs:Os;

myOs = Os.Window

// 위와 같이 특정 값만 넣고 싶을 때나 강제하고 싶을 때 enum을 사용하면 된다.

//null, undefined

let a3 = null;
let b3 = undefined