Typescript 정리 - 1

• 노마드 코더의 TypeScript로 블록체인 만들기 강의에 나오는 TS 강의를 듣고 정리한 내용 백업.
• 범위는 처음 ~ OVERVIEW OF TYPESCRIPT(Types of TS part Three)까지.

---

TypeScript?

• MS에서 만든 JS 기반 언어.
• 기존의 JS와는 달리 Strongly Typed 언어. 즉 JS에 타입을 추가했다고 볼 수 있음
  (이 정도가 내 의식이였는데, 이거 이상의 의미를 지님).

※ TS Playground

TypeScript Playground에서 TS 코드를 작성해본 모습.

• TS 코드를 작성해볼 수 있음.
• 작성한 TS 코드가 JS코드로 어떻게 변환되는지 보여줌.

 

TS를 사용하는 이유 → Type Safety(타입 안정성)

• 기존의 JS는 타입에 유연한 언어.
• 논리와 이치에 맞지 않는 코드가 있더라도 이를 그대로 실행하기 때문에 예상치 못한 실수가 일어날 수 있음. ⇒ 안정성 하락.
  ※ 참고 : JS의 문맥에 맞춘 암묵적 타입 변환

// ex)
10 * '10' // '10'을 숫자 타입으로 변환 하여 100의 결과를 냄.

• 이러한 방식으로, 문제가 있는 코드라도 어떻게든 실행하기 때문에 코드 실행 시 발생하는 런타임 에러 문제 발생. 이런 경우 코드를 실행하기 전까지 문제를 인식하고 고칠 수 없음.
• 위의 경우들로 발생할 수 있는 실수나 여러 에러를 줄이는 데에 큰 기여를 함 ⇒ 안정성 확보.

 

TS의 흐름

• TS로 작성된 코드는 JS로의 변환을 거침.
• JS로의 변환이 일어나기 전 TS가 코드를 검사(타입 추론), 문제가 있을 경우 JS로 변환을 하지 않음.
  ⇒ 문제가 되는 코드를 실행하지 않음으로써 런타임 에러가 발생하지 않음.

 

TypeScript 타입 시스템

• TS는 타입을 추론할 수 있음.

let a = 1; // 변수 a가 숫자 타입임을 추론.

• 명시적으로 타입을 선언하는 것도 가능.
  ⇒ 명시적 타입을 사용하면 코드가 길어지기 때문에, TS가 타입을 추론하게 하는 암시적 타입을 추천한다고.

let b: boolean = 'hello'; // 변수 b가 boolean타입임을 명시적으로 선언.

• number, string, object, tuple 등의 다양한 타입을 제공함.

 

선택적 Property

• 필수적인 값이 아닌 property(함수에선 parameter)의 경우에 설정할 수 있음.
  → Object 내에서 선택적으로 사용할 age에 ?를 붙여 선택적 Property로 설정.

const person : {
  name: string, // 필수 Property
  age?: number // 선택적 Property
} = {
  name: 'Piva' // age는 필수 property가 아니기 때문에 문제 없는 코드
};

생략한 property가 선택 property가 아닐 경우 에러 발생.

 

타입 Alias

• 새로운 타입을 정의함.

type Person = {
  name: string
  age?: number
}

 

함수 타입

• 함수의 return 타입과 함수가 받을 parameter의 타입을 지정하는 것이 가능.
  → Parameter와 return타입 모두 콜론(:)을 사용하여 타입 표기.

type Person = {
  name: string
  age?: number
}

function foo (a: number): Person {
  /* ... */
}

 

readonly

• property를 ‘읽기 전용’으로 설정함.
  ⇒ readonly로 설정되면 수정이 불가능해짐(불변성).

type Person = {
  readonly name: string // Person타입의 속성을 바꾸려 할 경우 에러 발생
  age?: number
}

 

 

타입

Tuple

• TS에서는 튜플을 지원함.
• 가끔 API 응답으로 객체가 아닌 튜플로 올 때가 있다고…
  → : [’타입이름’1, ‘타입이름2’] 의 형식으로 튜플 타입을 정의.

const foo : [string, number, boolean] = ['food', 1, false];

 

any

• 변수 선언 시 초기값을 넣어주지 않으면 TS는 이를 any 타입으로 생각함.
• 아무 타입이나 쓸 수 있음(=== 모든 타입과 호환이 됨).
  
  • 즉 TS의 타입 안정성이 사라진다는 의미.

 

unknown

• 할당될 값이 어떤 타입일지 잘 모를 때 사용.
• any랑 비슷해보이지만 any와 달리 TS의 보호를 받음.
  ⇒ 코드 내에서 unknown 타입의 type checking 과정이 필요.

// unknown타입인 a, b에 대한 타입 체킹이 없어서 에러가 뜸.
const foo = (a: unknown, b: unknown) => {
  return a + b;
};

// 타입 체킹이 있으므로 에러가 뜨지 않음.
const bar = (a: unknown, b: unknown) => {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }

  return ;
};

 

void

• 아무것도 return 하지 않는 함수의 반환 타입을 정의할 때 사용.
• C 쪽이랑 비슷하다고 생각하면 되는듯.

// ex) console.log 문
const foo = (): void => {
  console.log('Hello World!');
};

 

 

never

• 함수의 반환 타입으로 사용됨.
  • 함수가 절대로 return하지 않을 때.
    ex) 함수에서 예외가 발생할 때.
  • 타입이 여러 개일 때.
    ex) (foo 함수는 string 혹은 number 타입의 패러미터만 받기에 마지막 else 문의 a는 never 타입이 됨)

 

---

• 아직 강의를 다 보진 않았는데 일하면서 얼레벌레 익힌 것들이 이런 의미였구나 싶었다.
• 블록체인 구현까지 볼진 모르겠는데 최대한 TS 이론 부분은 빠르게 볼 예정...