타입스크립트 기본 & 기본 타입

 

💡 Udemy 의 Typescript : 기초부터 실전형 프로젝트까지 강의 스터디에서 학습한 내용을 기반으로 작성합니다.
🗓 스터디 날짜 : 22.05.29

# 정적 타입 언어 VS 동적 타입 언어

1. 동적 타입 언어

• 실제 소스 코드가 실행되는 시점인 런타임 시 타입을 체크하고 결정한다.
• 코드를 작성 할 때 타입 선언이나 타입에 대한 규칙을 지킬 필요가 없어 상대적으로 코드가 짧으며 러닝 커브가 낮다.
• 타입을 명시 할 필요가 없어 정적 타입 언어에 비해 코드를 빠르게 작성할 수 있다.
• 코드 내에서 타입을 유동적으로 변경하며 사용 할 수 있다.
• 런타임 타입 오류를 발생시킬 가능성이 높다.
• 코드를 읽을때 타입을 추론하며 읽어야 하기 때문에 가독성이 상대적으로 좋지 않다.
• ex ) JavaScript

2. 정적 타입 언어

• 컴파일 시 코드의 타입을 검사하며 타입이 맞지 않는 경우 컴파일러가 에러를 발생시킨다.
• 컴파일 단계에서 타입을 체크함으로 불필요한 런타임 타입 에러를 사전에 방지할 수 있다.
• 컴파일 시에 미리 타입을 결정하기 때문에 동적 타입 언어보다 실행 속도가 빠르다.
• 타입이 명시적으로 지정되어 있기 때문에 동적 타입 언어에 비해 상대적으로 가독성이 좋다.
• 다수의 협업이나 프로젝트의 장기개발 및 유지보수에 유리하다.
• 매번 코드를 작성 할 때마다 타입을 지정해줘야 하는 번거로움과 그로 인해 코드가 길어지는 단점이 있다.
• ex ) TypeScript

 

# 타입을 선언하는 방법

TypeScript 에서는 타입을 지정하고자 하는 대상의 뒤에 콜론을 붙이고 타입을 명시하며 선언할 수 있다.

✨ 변수

const foo: string = 'hello';

✨ 함수의 매개변수, 반환값

function foo(param: string): void => {
	console.log(param);
}

 

# TypeScript 의 타입 종류

• TypeScript 는 ES5, ES6의 Superset이기 때문에 자바스크립트의 타입들과 TypeScript에서 추가된 고유 타입들을 사용할 수 있다.
• JavaScript Type : boolean, null, undefined, number, string, symbol, object
• TypeScript Type : array, tuple, enum, any, void, never

 

# 기본 타입

⚠️ TypeScript의 모든 타입은 소문자로 나타낸다. ex ) number(O) Number(X)

✨ boolean

let isSelected: boolean = false;

• true 와 false 값을 가지는 기본 타입

✨ number

const decimal: number = 5;
const hex: number = 0xf00d;
const binary: number = 0b111;
const octal: number = 0o124;

• JavaScript 와 같이 TypeScript 에서도 모든 숫자는 int, double 과 같은 정수, 실수 타입의 구분 없이 모두 number 타입이다.
• 모든 숫자는 부동 소수점 형태로 저장된다.
• TypeScript 3.2 버전에 또 다른 숫자 타입인 **bigInt 타입**이 추가됐다.

✨ string

const text1: string = "이건 문자열 타입";
const text2: string = '이것도 문자열 타입';

const num: number = 2022;
const text3: string = '올해는 ' + number + '년이다.'
const text4: string = `올해는 ${number}년이다.`

✨ array

const hobbies: string[] = ['sleeping', 'reading a book'];
const hobbies: Array<string> = ['sleeping', 'reading a book'];

• 배열 타입은 위와 같이 배열 요소들의 타입 뒤에 [] 를 쓰거나 제네릭 배열 타입을 사용해 타입을 지정할 수 있다.

✨ tuple

// 1. 튜플 타입으로 선언
let tupleData: [string, number, boolean];

// 2. 초기화
tupleData = ["hemudi", 96, false];

// 3. Error
tupleData = ["hemudi", 96];
tupleData = [false, 96];
tupleData = [];

• 튜플 타입은 요소마다 상이한 타입과 개수가 고정된 배열을 표현할 수 있다.
• push와 pop 등으로 인한 데이터 훼손은 방지할 수 없음.

✨ enum

// 0, 1, 2
enum Job {STUDENT, TEACHER, DEVELOPER}

// student, teacher, developer
enum Job {STUDENT = 'student', TEACHER = 'teacher', DEVELOPER = 'developer'} 

// student, 0, 1
enum Job {STUDENT = 'student', TEACHER, DEVELOPER} 

// student, 0.5, 1.5
enum Job {STUDENT = 'student', TEACHER = 0.5, DEVELOPER} 

// Error - DEVELOPER 초기화 필요!
enum Job {STUDENT = 'student', TEACHER = '0', DEVELOPER}

// use
const myJob: Job = Job.STUDENT;

const yourJob: Job = Job[3];
console.log(yourJob); // DEVELOPER

• 열거형으로 이름이 있는 상수들의 집합을 정의할 수 있다.

✨ Any

let foo: any = 10;
foo = 'string type';
foo = false;

foo.charAt(1); // error 가 안남

• 모두 가능하다!
• 알지 못하는 타입을 표현할 때 사용한다.
• 컴파일 시간에 타입을 검사하지 않는다.
• 일부만 알고 전체는 알지 못할 때 유용하다.
  • 예를 들어 여러 다른 타입이 섞인 배열을 다루는 경우
  • const list: any[] = [1, true, “string data”];

✨ Void

function foo(): void {
	console.log('void type');
}

let data: void = undefined;
data = null; // --strictNullChecks 를 사용하지 않을때 성공

• void는 어떤 타입도 존재하지 않음을 나타내며 any 반대 타입과도 같다.
• void는 보통 함수에서 반환 값이 없을 때 주로 쓰인다.
• void로 타입의 변수에는 null 과 undefined 만 할당이 가능하다.

✨ unknown

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = 'Max';

userName = userInput; // error

if(typeof userInput === 'string'){
    userName = userInput;
}

• 알 수 없다!
• any 와 같이 알지 못하는 타입을 표현할 때 사용한다.
• any 와 다른 점은 typeof 와 같은 방식으로 타입을 특정하지 않으면 컴파일 시 에러가 발생한다.

✨ Never

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

• never 타입은 절대 발생할 수 없는 타입을 나타냄.
• 예를 들어 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 사용됨.
• 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 됨.

 

# 유니언 타입과 리터럴 타입

✨ 유니언 타입

let input: number | string = 'test';
input = 10;

• 서로 다른 두 종류의 값을 사용해야 하는 경우 파이프를 사용해 가능한 타입들을 나열하여 명시할 수 있다.

✨ 리터럴 타입

type Easing = "ease-in" | "ease-out" | "ease-in-out";
const easeIn : Easing = 'ease-in';

type Dice = 1 | 2 | 3 | 4 | 5 | 6;
const one : Dice = 1;

• 상수와 같이 변하지 않는 값들을 할당하는 타입

 

# Type Alias 와 Object Type

✨ Type Alias

type Person = {
    name: string;
    age: number | bigint;
    job: Job;
    hobbies: string[];
}

const hemudi: Person = {};
const hemudi = {} as Person;

• 인터페이스와 비슷하게 새로운 타입을 정의할 수 있다.
• 주로 객체의 타입을 지정할 때 자주 쓰이는 거 같다.

✨ Object Type

const person : object = {
	name: 'hemudi',
	age: 27
}

console.log(person.name); // Error

• 객체의 타입을 Object로 지정할 수 있지만 위와 같이 새로 정의한 객체의 프로퍼티에 접근하려고 하면 에러가 난다.
• object 타입으로 지정하면 타입 스크립트는 해당 객체에 object 속성 외 어떤 속성이 존재하는지 알 수 없어서 에러가 발생한다.
• 이를 해결하기 위해 Type Alias를 사용해 객체의 사용자 정의 타입을 지정하거나 따로 타입을 지정하지 않고 타입 스크립트가 알아서 추론하도록 내버려 둬야 한다.

 

# 함수의 반환 값에서 void 와 undefined 의 차이

function test : void {
	console.log('성공!');
}

function test : undefined{
	console.log('실패!');
} 

function test: undefined{
	console.log('성공!');
	return;
}

• 함수가 아무런 값도 반환하지 않는다고 할 때 void와 undefined를 타입으로 지정할 수 있다.
• 차이점으로는 void는 정말 아무것도 리턴하지 않는다는 뜻이기 때문에 return 문을 명시할 필요 없지만 undefined는 undefined라는 타입을 반환한다는 뜻이므로 명시적으로 return을 해줘야 한다.

 

# Union 매개변수 Error

function combine(input1: number | string, input2: number | string){
	let result = input1 + input2;  // Error!!
    return result;
 }

• 위와 같이 두 매개변수를 number와 string의 유니언 타입으로 지정하고 + 연산을 하려고 하면 Error 가 발생한다.
• 타입 스크립트가 Union 타입이라는 건 알아도 명확히 해당 값이 Union의 어떤 타입인지 알 수 없기 때문에 발생하는 Error 라고 하는 듯?
• 아래와 같이 타입을 특정 지어줘야 한다.

 
 function combine(input1: number | string, input2: number | string){
 	let result;
    
 	if (typeof input1 === "number" && typeof input2 === "number") {
    		result = input1 + input2;
  	} else {
    		result = input1.toString() + input2.toString();
  	}
    
  	return result;
 }

 

---

# 참고

• [Basic] 정적타입 언어와 동적타입 언어
• 정적타입 언어 vs. 동적 타입 언어 특징 비교하기
• 12.3 TypeScript - Typing 정적 타이핑
• TypeScript 핸드북