타입스크립트 타입 3 [패스트캠퍼스 챌린지 16일차]

Array

object의 일종

주의. 같은 타입의 요소들을 모아 놓은 자료형

만약 하나의 타입으로 묶을 수 없는 요소들이라면 array가 아님

원래 JS에서 array는 객체

사용방법

타입[ ]
Array<타입>

// 넘버로 이루어진 배열
let list: number[] = [1, 2, 3]; // 이 방식 선호
let list: Array<number> = [1, 2, 3]; // 충돌이 생길 수 있어 사용 자제

다른 타입의 요소가 섞였을 때 해결 방법

let list: number[] = [1, 2, 3, "4"]; // Error
//유니온 타입
//괄호로 묶는 거 잊지 말기
//'넘버이거나 스트링'
let list: (number | string)[] = [1, 2, 3, "4"];

Tuple

array와 비슷한 모양인데 인덱스별로 타입이 다를 때 이용
고정된 요소 수만큼의 타입을 미리 선언 후 배열을 표현

좀 더 정확한 타이핑이 가능하게 함

array

array같은 경우에는 항상 공통 요소일 수밖에 없는 아이들의 모임

tuple

tuple은 길이가 정해져 있고, 인덱스 별로 타입이 다르고 명확한 자료형

let x:[string, number];
// 배열의 첫번째 요소는 스트링이고, 두번째 요소는 넘버

인덱스 별로 타입 순서가 명확해야 함

let x: [string, number];

x = ["hello", 39]; //Ok

x = [10, "mark"]; //error

// 문자를 소문자로 바꿔주는 toLowerCase()

x[0].toLowerCase();
x[1].toLowerCase(); // Error

x[3] = "world"; // error
// 에러 내용. Type "world" is not assignable to type 'undefined'
//'x의 세번째 자리는 world라는 문자열'

const person: [string, number] = ["Mark", 39];

const [] = person;
//빈 배열에 넣어보기
//person에 있는 요소를 가지고 나와서 변수 안에 넣는 거
//순서가 중요
//destructuring 분해할당

const [first, second] = person;
// 배열이었으면 '스트링이너가 넘버거나, 스트링이거나 넘버거나'
// tuple이라서 정확하게 '첫번째는 스트링 두번째는 넘버' 일케 나옴

//여기서 세번째를 넣어볼까
const [first, second, third] = person; //Error
//길이가 '2'인 튜플 형식 '[string, number]'의 인덱스 '2'에 요소가 없습니다.ts(2493)
//const third: undefined

any

타입 체크가 필요 없는 변수에 사용.
어떤 타입의 값이라도 할당할 수 있다.

어떤 타입이어도 상관없음

이걸 최대한 쓰지 않는 게 핵심

→ 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문

그래서 컴파일 옵션 중에는 any를 써야하는데 쓰지 않으면 오류를 뱉도록 하는 옵션도 있음

→ nolmplicitAny

function returnAny(message): any {
    console.log(message);
}
returnVoid('리턴은 아무거나');

The any will continue to propagate through your objects.(개체를 통해 전파)

After all, remember that all the convenience of any comes at the cost of losing type safety.

Type safety is one of the main motivations for using TypeScript and you should try to avoid using 'any' when not necessary

let looselyTyped: any= {};

const d = looselyTyped.a.b.c.d; //에러 안 남

누수를 막아......아 뇌가 굳었

function leakingAny(obj: any) {
  const a = obj.number;
  const b = a + 1;
  return b;
}

const c = leakingAny({ num: 0 });
c.indexOf("0");
//에러 하나 없음
//누수...?

여기서

function leakingAny(obj: any) {
  const a: number = obj.number;
  const b = a + 1;
  return b;
}

const c = leakingAny({ num: 0 });
c.indexOf("0"); // 에러!!!
/*
변수 a를 number로 타입 지정하니까
b도 c도 타입이 넘버가 됨
*/

---

어려워
어려워어
어려워서 군것질을 너무 많이 하게 된다
음?

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online