typescript 기초

bang·2022년 12월 21일
0

Typescript

목록 보기
1/1

Intro

오늘부터 미루고 미루던 typescript 공부를 시작했다. 마음 먹은지는 한참 됐지만 미루고 미루다 이제는 typescript가 필수가 되어버려서 더 이상 미뤘다가는 큰일날 거 같아 시작한다.

코딩애플님의 typescript강의를 참고하였다.

많은 강의를 봤지만 개발을 쉽고 재밌게 알려주는 건 코딩애플님이 짱인거같다.

타입지정

타입스크립트에서는 변수들의 자료형을 미리 지정해 오류를 줄일 수 있다.
1. String
2. Number
3. Boolean
4. Array
5. Tuple
... 많은 타입들을 지원한다.

let 숫자: number = 1;
let 숫자에문자할당: number = "123"; // ❌ 에러가 발생한다. 
let 문자: string = "string";
let 참불: boolean = true;
let arr: string[] = ["bang", "kim"];
let obj: { name?: string } = { name: "bang" };

union type

  • 우리가 변수를 선언할 때 한개의 타입이 아닌 2개 이상의 타입이 필요한 경우가 있다. 이럴 때 사용하는 것이 union type 이다.
let 이름: string | number = 123; // 이름은 string이 올수도 있고 number가 올 수도 있다.

함수

  • 함수에서도 반환값매개변수에 타입을 지정할 수 있다.
function temp(x: number): number {
  return x * 2;
}

temp(123);
temp("123");// ❌ 매개변수를 string으로 지정했기 때문에 에러가 발생한다.

배열

  • 배열의 원소들에도 타입을 지정할 수 있다.

    주의할 점이 타입스크립트는 매우 엄격하기 때문에 배열의 원소들의 타입들의 순서까지 잘 지켜야한다.

type

  • 배열과 오브젝트같은 경우에는 하나하나 지정해야할 변수와 타입들이 많기 때문에 이러한 지정을 변수 옆에서 하게되면 코드가 길어질 수 가 있다.
    type을 통해 미리 어떠한 타입들이 원소로 있을 지 정할 수 있다.
type Member = [number, boolean];
let john: Member = [123, true];//순서와 type을 지키지 않으면 에러가 발생한다. 

배열에 여러가지 타입들

  • 배열에는 하나의 타입의 원소들이 들어갈 때도 있지만 보통 여러가지 타입들이 들어갈 때가 많다. 하지만 일일이 지정하기 힘들다. 이때 union type으로 배열의 타입을 지정해줄 수 있다.
let 어레이: (number | string)[] = [1, "2", 3];

배열을 union type으로 지정할 때 꼭 ()으로 감싸줘야한다.
number | string[] <- number 또는 string으로 된 배열을 의미하게 된다.

Object

type temp = {
  name: string,
  age: string
};

let kim: temp = { name: "kim", age: "2" };
  • 오브젝트의 값이 몇개 없으면 위와 같은 식으로 하나하나 지정할 수 있다.
    하지만 값이 여러개가 되면 하나하나 지정하는 방식은 비효울적이다.
    그래서 타입스크립트는 아래와 같이 한번에 오브젝트의 타입을 지정할 수 있는 방법이 존재한다.
type temp = {
  [key: string]: string // key와 value가 모두 string 타입이여야한다. 
};

any

  • 말 그래도 아무타입이나 다 올 수 있다. 하지만 any를 사용하면 타입스크립트를 사용하는 의미가 없어서 최대한 사용을 지양해야한다.

    type 관련 에러가 발생해도 추적할 수가 없다.

let 아무거나: any = 1; //number형으로 아무거나를 할당했지만
아무거나 = "문자형" // string형을 할당해도 에러가 발생하지 않는다.

아무거나 = 123;
let temp: string = 아무거나 // string으로 선언된 변수에 number형 변수를 넣어도 에러가 발생하지 않는다. 

unknown

  • any와 성격이 비슷하지만 보다 더 안전하다.
let 언노운: unknown;
언노운 = 123;
let temp2: string = 언노운; //위에서 이미 언노운에 number형으로 할당했기 때문에 string형인 temp2에 대입하면 에러가 발생한다.

엄격한 규칙들

  • 타입스크립트는 매우 엄격한 규칙들을 가지고 있다.
    에러를 방지하기 위하여 간단한 수학연산도 number형만 가능하다.
let 언노운: unknown;
언노운 = 123;
언노운 - 1; // ❌ number형으로 할당했더라도 언노운으로 타입 지정 된 변수는 수학연산이 불가능하다.
let unionType: string | number;
uniontype + 1; // ❌ number형이 될 수 있더라도 수학연산이 불가능하다.

tips

  • 사실 타입스크립트는 똑똑하기 때문에 간단한 변수같은 경우 type을 지정해주지 않아도 할당된 변수의 형태를 파악해 자동으로 type을 지정해준다.

0개의 댓글