[Day 07] JS(4), TS(1)

forEach()

-> 개별 처리, 각개 전투!

index의 개수만큼 호출이 된다.

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

 

처리한 결과에 대한 return이 없다.

 

map()

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

forEach의 경우 numbers2가 없는데 map의 경우 const numbers가 있다. 

처리한 결과에 대한 return이 있다. 

원본은 그대로 두고 사본으로 처리한다. 

 

key와 value의 형태이다. 

map은 index가 없고 key의 형태이다. 

 

map.size

[].legnth는 메서드가 아니라 프로퍼티이다. 뒤에 ()가 없기에

[].size역시 프로퍼티이다. map은 size이다. 

 

https://recordoftheday.tistory.com/entry/JS-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9

[JS] 구조 분해 할당

 

filter()

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

원본 배열은 그대로 두고 사본 배열을 처리한다.

 

redcue()

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

누적 연산의 값을 return 받을 수 있다. 

single value로 return한다. 

---

타입 스크립트

정적 타이핑을 추가한 js의 구문적 상위 집합

왜 사용하는가? 자바스크립트는 느슨한 언어이다. 

 

TS 유형

명시적 선언: 유형 작성=> 할당은 읽기 쉽고 더 의도적이다. 

let firstName: string = "Dylan";

 

묵시적 선언: TS는 할당된 값을 기반으로 유형을 "추측"한다. 즉, 값을 보고 타입을 인식한다.

let firstName = "Dylan";

 

TS가 값의 유형을 "추측"하는 것을 infer라고 한다.

 

데이터 유형이 일치하지 않으면 TS에서 오류가 발생한다.

let firstName: string = "Dylan"; // type string
firstName = 33; // attempts to re-assign the value to a different type

 

🤔JS는 일치하지 않는 유형은 오류가 날까? X

 

타입스크립트 특수 유형

any

유형 검사를 비활성화하고 모든 유형이 사용될 수 있도록 하는 유형

 

let u = true;
u = "string";

Math.round(u);

 

잘못된 값에 대한 출력이 나온다. 

출력할때는 npx tsc를 입력한다. 

 

이 코드에서 추론이 가능한 상태였지만!

 

let u : any=true;
u = "string";

Math.round(u);

 

any를 작성하니 오류가  안났다. 왠만해서.. 특수한 상황아니면 any를 쓰지말자!

any로 했을때는 아무런 추론도 하지 않는다 . 

그반면에 unknown을 작성하면 Math.round(u)에 추론을 한다. 

let u : unknown=true;
u = "string";

Math.round(u);

 

 

let u : never=true;
u = "string";

Math.round(u);

 

할당할 수 없기에 에러가 났다.

그래서 Math.round(u)를 검사를 안한그..

 

never는 거의 사용하지 않지만 주로 고급 제네릭에 사용

let u : undefined=true;
u = "string";

Math.round(u);

 

 

 

 

 

 

 

 

 

 

 

💭 난 안졸려.. 😃

💭 쉬는시간에 틈틈이 자자

 

readonly

const names: readonly string[]  =[];
names.push("Dylan");
names.push(3);
console.log(names);

 

 

 

 

 

 

 

const numbers = [1, 2, 3];
numbers.push(4);
numbers.push("2");
let head:number=numbers[0];

 

 

 

 

 

타입화된 배열

let ourTuple:[number, boolean, string];
ourTuple=[5, false,'ysh'];
console.log(ourTuple);

 

3개의 값을 지정했으니까 3개만 넣는게 가능하다. 4개를 넣으면 오류난다

 

💭 망고 먹고 싶다. 🥭

let ourTuple:readonly [number, boolean, string]=[5, false,'ysh'];
ourTuple.push('aa');
console.log(ourTuple);

 

readonly는 읽는 것만 가능하다!

 

 

 

 

튜플이란? 각 인덱스에 대해 길이와 유형이 미리 정의된 형식화된 배열

 

명명된 튜플

각 인덱스의 값에 대한 컨텍스트를 제공할 수 있다.

const graph: [x: number, y: number] = [55.2, 41.3];

 

 

 

const graph: [x: number, y: number] = [55.2, 41.3];
console.log(graph.x);

이거는 안된다. 

 

튜플은 배열이기에 구조 분해 쌉가능~

const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;

const graph: [x: number, y: number] = [55.2, 41.3];
const [y]=graph
console.log(y);

앞에 값을 꺼내는 방법, 그러면 뒤에 방법을 꺼내려면 const [,y] = graph로 수정!

 

타입스크립트 객체 유형

이름: 값

 

const car = {
    type:"Toyota",
    model:"Corolla",
    year:2009
}

 

평소 우리가 쓰는 타입 유형

 

근데 year: "ysh"로 적으면 잘못된 여부를 확인하지 못하기에 밑에 처럼 타입을 설정한다음하면된다.

const car: { type: string, model: string, year: number } = {
  type: "Toyota",
  model: "Corolla",
  year: 2009
};

 

선택 속성

개체 정의에서 정의할 필요가 없는 속성

const car: { type: string, mileage: number } = { // Error: Property 'mileage' is missing in type '{ type: string; }' but required in type '{ type: string; mileage: number; }'.
  type: "Toyota",
};
car.mileage = 2000;

표현할때 2개의 타입으로 명시했기에 오류 메시지가 나는것이다. 

그러나 출력은 정상적으로 된다. 

 

 

 

 

 

 

인덱스 서명

const nameAgeMap=[prop:type]={};

원래 이런식으로 적지만 인덱스 서명에서는 이렇게 적는다 .

 

const nameAgeMap: { [index: string]: number } = {};

nameAgeMap.Jack = 25;

 

인덱스 서명은 이런식으로 적는다. 동적으로 작성이 되는 것!

값이 숫자이기만 하면 들어간다. 

 

타입스크립트 열거형

상수의 이름을 쓰는 이유는 직관적으로 이해하고 싶어서

enum을 사용하는 이유는 관련되 ㄴ값들의 집합을 의미있는 이름으로 표현한다.

즉! 가독성 향상, 코드의 안정성 증가, 유지보수 용이

 

💭 정신줄 놓치말기! 그러면 어느 순간 놓친다!

enum CardinalDirections {
    North = 'North',
    East = "East",
    South = "South",
    West = "West"
  }

  let currentDirection = // 서버에서 리턴받은 데이터
  CardinalDirections.North;
  console.log(currentDirection==='North');

 

타입은 비교하지 않고 값만 비교한다. 

 

Extending Interfaces

타입보다 더 명확하게 사용할 수 있는게 인터페이스이다.

😃 인터페이스는 무엇입니까?

객체의 type이 되는것

 

interface Rectangle {
  height:number,
  width: number
}

// 상수 뒤에는 소문자, :뒤에 이렇게 적는 이유는 타스의 타입 지정을 위해
const rectangle:Rectangle = {
  height: 20,
  width:10
}

 

 

interface Rectangle {
  height: number;
  width: number;
}

interface ColoredRectangle extends Rectangle {
  color: string;
}

const rectangle: ColoredRectangle = { 
  height: 20,
  width: 10,
  color: 'red'
};

console.log(rectangle);

rectangle 자기도 타입인데 extnend 렉텡글을 붙인건 슈퍼타입이라고 한다.

 

TS Union 유형

function printStatusCode(code:string|number) {
  console.log(`My status code is ${code}`)
}

printStatusCode(404);
printStatusCode('404');

 

 

 ts 기능

function getTime() : void {
  reurn

}
console.log(getTime())

 

return만 하면 빈손으로 들고가겠다는 표시가 void이다. 

 

function add(a: number, b: number, ...rest: number[]) {
  return a + b + rest.reduce((p, c) => p + c, 0);
}

console.log(add(1,2,3,4,5));

 

type Negate =(value:number)=>number;

const negateFunction:Negate=(vlaue) =>
  vlaue*-1;

console.log(negateFunction(10));

 

타입을 바꾸는 것을 캐스팅이라고 한다. 

변수를 캐스팅하는 간단한 방법은 as 키워드를 사용하는 것이다. 

 

TS class

// class: 타입 복합 data 프로그램 단위
class Person {
  name: string;
}

const person = new Person();
person.name = "Jane";

 

💭 많이 짜봐야겠다..

 

public-완전히 공개하는

private-나만

protected-내 자식에게 상속