타입스크립트 정복하기!

이상진·2023년 5월 27일

React

목록 보기

3/6

글을 작성하며

내가 타입스크립트 공부를 하는 이유는 파랑색 자바스크립트가 멋지기 때문이다!
사실 한참 전부터 공부를 해야겠다고 생각은 하고있었지만 공부의 필요성을 느끼지 못했다. (그냥 자바스크립트 쓰면 안됨? 이라는 생각을 했었다. )
그러던중 월요일에 학교를 가지 않아도 되는 연휴가 생기며 지금이라도 타입스크립트 공부를 해야겠다고 다짐했다.
지금부터 타입스크립트에 대한 공부를 시작하겠다!

타입스크립트를 왜 써야하나요?

내가 타입스크립트를 공부하지 않았던 이유중 가장 큰 이유중 하나가 바로 이것이였다.
타입스크립트는 도대체 왜 쓰이는걸까?

에러의 사전 방지
코드 가이드 및 자동 완성

// 에러 사전 방지의 예시 코드

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

sum(10, 20); // 30 출력
sum('10', '20'); // 1020 출력

// 에러 사전 방지의 예시 코드

function add(a: number, b: number): number{ // : number 는 return 값이 number 여야 한다는 뜻이다.
  return a + b;
}

sum(10, 20); // 30 출력
sum('10', '20'); // 에러 발생

위의 예시를 통해 알 수 있듯이 타입스크립트는 우리가 예상하지 못한 결과값이 나오는것을 사전에 방지할 수 있다.

위의 예시를 통해 볼 수 있듯이 ts 파일에서는 자동 완성을 지원해준다.

기본 타입 알아보기!

String
Number
Boolean
Object
Array

String
자바스크립트 변수의 타입이 문자열인 경우 사용한다.

const str: string = 'hi';

Number
자바스크립트 변수의 타입이 숫자인 경우 사용한다.

const num: number = 10;

Boolean
true, false 를 나타낼때 사용한다.

const toggle: boolean = false;

Object
객체타입 나타낼때 사용한다.

const obj: object = {
  name: '이상진',
  age: 18
};

const obj: {name: string, age: number} = {
  name: '이상진',
  age: 18
};

Array
배열 타입을 나타낼때 사용한다.

const arr: number[] = [1,2,3];

//제네릭 사용 예제
const arr: Array<number> = [1,2,3];

타입스크립트 함수

함수의 파라미터 타입
함수의 반환 타입

함수의 기본적인 타입 선언

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

함수의 인자

function sum(a: number, b?: number): number{ // 옵셔널 파라미터 사용
  return a + b;
}
sum(1,2);
sum(1); 
sum(1,2,3); //에러 발생

function sum(...numbers: Array<number>): number {
  return numbers.reduce((total, num) => total + num, 0);
}

const result = sum(1, 2, 3, 4, 5);
console.log(result); // 출력: 15

💡 ?. (옵셔널 체인징)
?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

💡 ... (전개 연산자)
기존 배열의 일부를 다른 배열로 빠르게 복사할 수 있다.

인터페이스

인터페이스는 상호 간에 정의한 약속을 의미한다.
타입스크립트에서의 사용 범주

속성과 타입
함수의 파라미터
배열, 객체 접근방식
클래스

interface User{
  age: number;
  name: string;
}

// 변수에 인터페이스 활용
const lsj: User{
  age: 18,
  name: '이상진'
}

// 함수에 인터페이스 활용
function getUser(user: User){
  console.log(user);
}
const profile = {
  name: '이상진',
  age: 18
}
getUser(profile);

// 함수의 규칙에 인터페이스를 활용
interface SumFunction {
  (a: number, b: number): number;
}

const sum: SumFunction= function(a: number, b: number): number{
  return a + b;
}

// 인덱싱
interface StringArray {
  [index: number]: string;
}

let arr: StringArray = ['a','b','c'];
arr[0] = '10';

//  딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: ReExp; //string, 정규식
}
let obj = {
  //sth: /abc/,
  cssFile: /\.css$/,
  jsFile: /\.js$/,
}

// 인터페이스 확장
interface Person {
  name: string;
  age: number;
}

interface Developer extends Person {
  language: string;
}

const lsj0202: Developrt = { // 상속된 모든 값이 포함되어야함
  language: 'TypeScript',
  age: 18,
  name: 'lsj'
}

타입 별칭

타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 쉽게 참고할 수 있게 이름을 부여하는 것이다.

interface Person {
  name: string;
  age: number;
}

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

// 인터페이스를 이용한 타입 정의
let lsj: Person = {
  name: '이상진',
  age: 18
}

// 타입 별칭을 이용한 타입 정의
type MyString = string;
let str: MyString = 'hello';

type todo = { id: string; title: string; done: boolean };
function getTodo(todo: Todo){
  
}

타입 병칭과 인터페이스

타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 여부이다.
인터페이스 (확장 가능), 타입 별칭 (확장 불가능)

연산자를 이용한 타입 정의

Union
Intersection

Union
타입 정의가 유연하다.

function logMessage(value: string | number) {
  if(typeof value === 'number'){
    value.toLocalString();
  } if(typeof value === 'string'){
    value.toString();
  }
}
logMessage('hello');
logMessage(10);

Intersection
정확한 타입의 요구가 가능하다.

interface Dev {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function Someone(someone: Dev & Person) {
  someone.name;
  someone.skill;
  someone.age;
}

Enum

숫자형 enum

enum Shoes {
  Nike = 10,
  Adidas // 11 으로 자동증가
}

const myShoes = Shoes.Adidas;
console.log(myShoes); // 11 출력

enum 사용 예제

enum Answer {
  Yes = 'Y',
  No = 'N',
}
  
function askQuestion(answer: Answer) {
  if(answer === Answer.Yes){
    console.log('정답입니다.');
  }
  if(answer === Answer.No){
    console.log('오답입니다.');
  }
}
  
askQuestion(Answer.Yes);

제네릭

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다.

function logText<T>(text: T): T {
  return text;
}

// 그냥 인퍼페이스
interface Dropdowned {
  value: string;
  selected: boolean;
}
const obj: Dropdowned = { value: 'abc', selected: false};

// 인터페이스에서 제네릭을 선언하는 방법
interface Dropdown<T> {
  value: T;
  selected: boolean;
}
const obj: Dropdown<number> = { value: 10, selected: false };