항해 99 50일차 11/07일

어제 티스토리 접속이 안되어서 예비군 갔다와서 지금 씁니당.

이번 프로젝트에서 타입스크립트를 쓰고 싶어서 공부하는 내용을 적었습니다.

 

 

직접 타입을 지정할 때 
let car :String = "123" //문자열만 가능
let a :Number = 1 //숫자만 가능
let a :boolean  = true 

위의 방법 처럼 지정 해주는거 보다 타입스크립트가 타입추론을 통해서 사용하는게 가장 좋다
let  a = 1
let  b = "1"
let c = [true]
1 . 객체에서 타입을 지정 해줄 cosnt player : {name : string, age : number} = {키:벨류} 로 사용 가능 하다
                  //타입지정
const player : {name : string , age: number} = {
name : "ni", age : 12
}
2.  1의 방법대로 같은 플레이어가 엄청 많다면 코드가 길고 가독성일 떨어진다 그래서 type Player라는 인터페이스를 만든다
 -cosnt player : Player = {키:벨류}  -> 즉 type Player{} 값 안에
옵션
타입을 지정해야하는 변수 옆에 ?을 붙혀서 있을수도 있고 없을수도 있다는것을 알려줌
age? : number  => 숫자이거나 없읗수도있다.

함수

type Player ={
   name : string,
    age? : number,
}

//playerMaker () : Player <-플레이어메이커 함수 옆에도 타입을 지정해줄 수가 있음(리턴값)
function playerMaker(name: string,): Player{ 
    return {
        name
    }
    
}
const nico = playerMaker("nico")
//playerMaker 안에는 age가 없지만 Player라는 타입을 지정해 줬으므로 age를 사용할 수 있음 
nico.age = 12

읽기전용으로 만들때 
readonly name:Name //읽기 전용으로 만든다 수정할 수 없음 map이나 filter는 사용 가능하다.

Tuple
Tuple은 array를 생성하는데 최소한의 길이가 있어야하고 특정 위치에 특정 타입이 있어야함
["name", 12, true] string number boolean

const player : [string,number,boolean] = ["nuco",1,true] 최소한 string, number, boolean의 값을 가지고 있어야함
즉 항상 정해진 갯수의 요소를 가져와야할떄 사용하면 좋음

//자바 스크립트 언어
let a : undefined = undefined
let b : null = null

any 타입스크립트에서 빠져나올때  아무타입이나 가능
any 많은 타입을 허용하지만 쓰게 된다면 타입스크립트의 보호장치를 사용할 수 없음

타입스크립트의 언어
unknown  :  타입을 모를떄 api에게 응답을 받는데 어떤 타입인지 모를떄 사용

let a:unknown
 //사용 불가능 a는 unknown으로 나온다
 let b = a + 1

//사용가능 if문 안에서는 a가 숫자이기 때문에
if(typeof a === 'number'){
 let b = a + 1
}

if(typeof a === 'string'){
    let b = a.toUpperCase()
}

void  :  아무것도 return하지 않는 함수를 대상으로 사용한다.(보통 void를 안적어줘두됨)

function hell(){
    console.log("x")
}

never  :  절대 return 하지않는거 

//리턴 하지 않고 오류 발생 시키는 코드

function hello(): naver {
throw new Error("xx")
}

function hello(name: string | number) {
 if(typeof name === "string"){
    name //string
 }else if (typeof name === "number"){
    name //number
 }else {
    name //never 작동안한다 위에서 name은 문자열 아니면 숫자로 타입을 지정해줬기 때문에
 }
}

call signature는 함수가 어떻게 구현 되는지가 아닌 인자의 타입이랑 함수의 반환 타입을 알려주는것

//즉 add함수는 Add의 타입을 알고 있다
type Add = (a:number,b:number) => number

type Add = {
 (a:number,b:number) : number
}
const add:Add = (a,b) => a+b

a가 타입이 number고 b도 타입이 number면 add는 number를 반환 하는 함수이다 라는것을 유추함
const add = (a:number,b:number) => a+b


덮어쓰기
오버로딩  :  함수가 여러개의 call signatures를 가지고 있을 때 발생 한다.
type Add = {
    (a:number,b:number) : number
    (a:number,b:string) : number
}
Add는 두개의 타입을 가지는데 a는 숫자 b는 숫자와 문자를 가지고 있고 a + b를 하게 되면 오류가 발생한다 
문자열과 숫자를 더 할려고 하기 때문에
const add:Add = (a,b) => a + b X
좋은 예시
type Config = {
    path: string,
    state: object
}
type Push = {
    (path:string):void
    (config: Config):void
}
const push:Push = (config) =>{
    if(typeof config === "string"){console.log(config)} 
    else {
        console.log(config.path)
    }
}

 polymorphism(다형성)
poly란?
- many, serveral, much, multi 등과 같은 뜻
morphos란?
- form, structure 등과 같은 뜻
polymorphos = poly + morphos = 여러 다른 구조
다형성은 무엇이지? 여러가지 모양을 가지고 형태를 가짐

제네릭  : 큰타입이 있을때 그중 하나가 달라질수 있을때 제네릭을 사용