타입스크립트 part2 - 타입 알아보기!

 

 

🐣 타입스크립트와 자료형 - 1 (feat. ReactJS) 🐣

설정이 끝났다면 타입스크립트의 타입에 대해서 알아봅시다!🧐 

1. 원시 자료형 타입 Primitive Type
2. 배열, 객체 타입 Array, Object Type
3. 타입 추론 Type Inference
4. 유니온 유형 Union Type
5. 타입 별칭 Type Aliases
6. 함수 타입 Function
7. 제네릭 Generic

React, TypeScript, JavaScript

출처
1. TypeScript docs: https://www.typescriptlang.org/
2. TypeScript Cheat Sheet (CRA): https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
3. udemy 강의A: https://www.udemy.com/course/best-react/learn/lecture/28518369
4. udemy 강의B: https://www.udemy.com/course/best-typescript-21/

---

1. 원시 자료형 Primitive Type 📌

원시형이란 불변하는 값, 가장 저급 단계 low level의 유형입니다.
숫자형, 문자형, 논리형 등이 있습니다.

원시 값 7종류 전부 알아보기: https://developer.mozilla.org/ko/docs/Glossary/Primitive

---

type	정의	사용
number 숫자형	let 변수명: number;	let age: number; age = 20;
string 문자형	let 변수명: string;	let name: string; name = ‘이름’;
boolean 논리형	let 변수명: boolean;	let isLoaded: boolean; isLoaded = true;

 

기본 표기

lowerCase를 사용합니다.
(첫글자가 대문자일 경우, 자바스크립트의 Number, String, Boolean 객체를 가리키게 됩니다.) 

let 변수명: number;
let userName: string;
let isLoaded: boolean;

 

주요core 원시형 타입

number, string, boolean

 

특별한 자료형이 없어도 동작합니다.

💡  works without configuration

자료형을 지정하지 않고, 타입을 추론할 수 없다면, 기본 타입은 any입니다.

(타입 검증 없이 컴파일을 건너뜁니다. any 타입은 사용하지 않는 것이 좋습니다.
자료형을 모를 때에는 unknown이라는 타입이 있습니다.)

https://www.typescripttutorial.net/typescript-tutorial/typescript-any-type/

 

---

2. 배열, 객체 타입 Array, Object Type 📌

type	정의	사용
배열	let 배열: string[]	let hobbies: string[]; hobbie = ['Sports', 'Cooking']
객체	let 객체: {키: 타입, …}	let person: { name: string; age: number; }; person = { … }
객체 배열	let 객체: {키: 타입, …}[]	let person: { name: string; age: number; }[]; person = [ { … }, { … }, … ]

---

배열

let list: string[];

let hobbies: string[];
hobbie = ['Sports', 'Cooking']

---

객체

let object: {키: 타입, 키: 타입}

let person: {
	name: string;
	age: number;
};
person: {
	name: '이름',
	age: 20
}

---

객체 배열

let object: {키: 타입, 키: 타입}[]

객체 타입 뒤에 배열을 붙임

let people: {
	name: string;
	age: number;
}[];
people: [
	{
		name: '이름',
		age: 20
	},
	...
]

---

3. 타입 추론 Type Inference 📌

💡  모든 타입을 명시할 수 있지만, 불필요하게 타입을 명시할 필요가 없습니다.

타입스크립트는 타입을 유추합니다!

선언과 함께 같이 값을 할당한다면, 변수에 저장된 값의 타입을 유추할 수 있습니다.

let age = 20;

변수 age의 자료형은 number일 것입니다.(유추)

앞으로 다른 자료형을 입력한다면 에러가 발생합니다.

 

---

4. 유니온 유형 Union Type 📌

한 가지 이상의 타입을 정의합니다.

• 값과 타입을 좀 더 유연하게 정의할 수 있습니다.

타입을 명시합니다.

• 타입 추론을 사용하지 않고, 유니온 타입으로 정의하기 때문입니다.
• let 변수명: string | number = ‘문자형’;

---

5. 타입 별칭 Type Aliases 📌

type	정의	사용
Type Aliases	let 별칭명 = 타입;	type Person = { … } let person: Person; person = { … }

---

별칭은 type 별칭명 = 타입으로 표기합니다.

별칭명은 대문자로 시작합니다.

type Person = { … }

 

등호 오른쪽은 자바스크립트의 value가 아니라 type입니다.

자바스크립트 컴파일 시, type aliases는 코드에서 사라집니다.

---

별칭을 사용해 타입을 지정할 수 있습니다.

ex) mongoose schema

타입을 정의하는데 필요한 코드량을 줄일 수 있습니다.

type Person = {
	name: string;
	age: number;
}[];
let person: Person;

---

6. 함수 타입 Function Type 📌

매개변수에도 타입을 지정할 수 있습니다.

function add(a: number, b: number) {
	return a + b;
}

타입스크립트는 반환 값의 타입을 추론합니다.

function add (a: number, b: number): number { return a+b };

 

function add의 반환값은 number일 것으로 유추 가능합니다.

직접 타입을 정의할 수 있지만, 필요하지 않습니다.

---

void 타입을 반환하는 함수

어떤 값을 반환하도록 강요하지 않습니다.(반환값: undefined)

function printResult(): ()=> void { ... }

---

never 타입을 반환하는 함수

절대로 반환 값이 존재하지 않는 경우입니다. ex) throw error

function generateError(msg: string, code: number): never {
  throw new Error(msg, { cause: code });
}

generateError("에러 메시지", 500);

 

---

7. 제네릭 Generic 📌

// Utility Function
function insertAtBeginning<T>(array: T[], value: T) {
	const newArray = [value, ...array];
	return newArray;
}

---

함수와 매개변수 중간에 <T>를 사용하는 방법

(<>안에 어떤 단어든 상관 없으나, T를 사용합니다.)

function insertAtBeginning<T>(array: T[], value: T) { … }

return 타입값은 입력한 타입 값과 동일합니다.

---

다른 사용법

let numbers: Array<number> = [1, 2, 3];
const stringArray = insertAtBeginning<String>( [’a’, ‘b’, ‘c’], ‘d’ )

---

함수에 타입 안정성, 유연성을 주는 기능입니다.

매개변수의 타입을 고정하지 않고, 제네릭 타입을 통해 타입이 마치 inherit되듯이 사용합니다.

어떤 타입이든 사용할 수 있지만, 특정 타입을 사용해 함수를 실행하고 나면 해당 타입으로 고정하여 작동합니다.

 

---

 

그 외 튜플 타입, 열거형 타입, 조합 타입, 함수 콜백의 타입 등에 대해서
다음 게시물에 이어서 알아보겠습니다!🧙‍♂️