타입스크립트 기초

 

타입스크입트는 자바스크립트의 슈퍼셋

 

node와 웹은 JS를 실행 할수있기 때문에 타입스크립트를 자바스크립트로 변환해주어야함(트랜스파일)

⇒ 이 과정을 도와주는 것 : TSC 타입스크립트 컴파일러

 

TSC

타입검사 → 트랜스파일

⇒ 웹 노드에서 자바스크립트에 실행

 

컴파일러 : 기계어로 바꾸는 과정

트랜스파일 : 웹이 읽을수 있도록 언어를 바꾸는 과정

 

타입스크립트에서 정의한 타입은 타입검사에만 사용되며 실행될 때는 사용되지 않는다.

 

“use strict”

자바스크립트를 엄격한 규칙에서 사용하고 싶을 때 사용함

---

타입스크립트 타입

기본적인 타입스크립트 타입

종류 타입

문자열	string
숫자형	number
불린형	boolean
undefined	undefined
null	null

객체 타입

기본적으로 typeof 연산자가 object로 변환하는 모든 타입을 나타냄

 

💡 typeof 연산자 : 변수의 타입을 조사할때 사용 (결과는 문자열)

 

 

그렇기에 별로 유용하지 않다. 싹다 뭉뚱그려 보내는 느낌

const obj : object = {};
const arr : object = [];
const func : object = function() {};
const date : object = new Date{};

 

그렇기에 타입을 객체 속성들에 개별적으로 지정한다

const user : {name : sting; age : number} ={
	name : 'a',
	age : 20
};

 

💡 옵셔널프로퍼티 (?:) : 프로퍼티 값이 필수가 아닐 때 옵셔널프로퍼티 문법을 사용하여 값을 생략할 수있다.

 

프로퍼티 이름에 변수를 쓰고 싶다면?

아래와 같이 [ ]를 이용하여 프로퍼티에 변수를 활용할 수있다.

let stock: { [id: string]: number } = {
  c001: 3,
  c002: 0,
  c003: 2,
};

배열 타입

작성법이 기본적으로 두가지이다

const arr: Array<string> = ['a', 'b', 'c'];

const arr: string[] = ['a', 'b', 'c'];

튜플 타입

배열 값의 갯수와 순서를 고정시킬 때 사용한다.

const arr: [string,string] = ['a', 'b'];

const arr: [string,string,number] = ['a', 'b', 4];

any 타입

마치 자바스크립트를 쓰는것 처럼 타입오류에서 벗어나게 만드는 타입

어쩔수 없이 타입을 모르게 되는 경우가 생긴다.

그렇다면 “:”을 써서 변수의 타입을 지정해주거나 as를 활용하여 변수의 타입을 지정해주자

const parsedProduct = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }') as { name: string; price: number };

const parsedProduct: { name: string; price: number } = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }');

---

함수 타입

Rest 파라미터는 배열 타입으로 쓴다. 또한 리턴값이 없는 경우 void 로 작성한다.

(...ids: string[]) => void;

Enum(열거형)

그냥 배열타입은 너무나 광범위 하기 때문에 값들이 정해져있다면 enum 타입을 사용하자

값을 정해주지 않는 다면 정수 0부터 차례대로 들어온다 실수할 수있으므로 “=”을 써서 값을 꼭 정해놓고 쓰자

enum Size {
	S,
	M,
	L,
	XL,
}

console.log(Size.S); // 0
console.log(Size.M); // 1
console.log(Size.L); // 2

enum Size {
	S = 'S',
	M = 'M',
	L = 'L',
	XL = 'XL',
}

interface

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

리터럴 타입

타입스크립트는 let이냐 const냐에 따라 타입이 다르게 추론된다.

- let으로 쓰면 그 변수에 맞는 타입이 들어오지만 const를 쓰면 그 변수 그대로가 타입이 된다.

- const는 변수를 바꿀일이 없기 때문에 변수 자체를 타입이 된다.

 

함수 호출시 파라미터로 넘겨주는 경우 타입을 지정하게 될텐데 리터럴 타입은 다른 타입에 포함되지만 number나 string등의 타입은 리터럴 타입에 포함되지않는다.

타입 별칭

타입에도 별칭을 설정할수있다. 그렇기에 반복 적으로 사용되는 타입들은 따로 타입변수에 저장해서 사용하자

Union 타입

유니온, 즉 합집합은 합쳤을 때 자기 자신만 들어있는 타입을 포함한 모든 타입이 사용 가능해진다.

intersaction 타입

인터섹션 타입 즉, 교집합은 자기 자신은 안되지만 공유하는 공통 부분을 가지는 타입 사용이 가능해진다.

keyof 타입

keyof는 key를 그대로 가져와서 타입으로 사용할 수있다.

interface Product {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean;
}

type ProductProperty = keyof Product; // 'id' | 'name' | 'price' | 'membersOnly';

typeof 타입

typeof는 해당 타입을 추론해서 그 타입으로 지정할 수있다.

const product: Product = {
  id: 'c001',
  name: '코드잇 블랙 후드 집업',
  price: 129000,
  salePrice: 98000,
  membersOnly: true,
};

console.log(typeof product); // 문자열 'object'

const product2: typeof product = { // 타입스크립트의 Product 타입
  id: 'g001',
  name: '코드잇 텀블러',
  price: 25000,
  salePrice: 19000,
  membersOnly: false,
};

---

enum과 union 타입별칭

둘다 같은 역할을 하지만 자바스크립트로 트랜스파일 할때 달라진다.

• enum은 자바스크립트에서 새로운 객체를 만들어주지만
• union으로 만든 타입 별칭은 별도의 객체를 만들지 않고 단순히 값만 사용하는 코드가 만들어진다. → 타입검사에만 이용된다.

제네릭

참고 :📘 타입스크립트 Generic 타입 정복하기

📘 타입스크립트 Generic 타입 정복하기

타입의 변수화!

⇒ 선언할때 그냥 변수 문자만 적어주고, 생성하는 시점에 사용하는 타입을 결정함으로써 변수나 함수 인터페이스를 다양한 타입으로 재사용할 수 있는 원리이다.

제네릭의 특징

• 타입이 고정되는 것을 방지하고 재사용 가능한 요소를 선언할 수 있다.
• 타입 검사를 컴파일 시간에 진행함으로써 타입 안정성을 보장.
• 캐스팅 관련 코드를 제거할 수 있다.
• 제네릭 로직을 이용해 타입을 다르게 받을 수 있는 재사용 코드를 만들 수 있다.