[React][TypeScript] 타입스크립트에 대해 알아보자

목차

 

타입스크립트가 무엇이고 왜 써야하는지 그리고 활용 방법에 대해 알아보자

 

 타입스크립트란?

타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.

자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다.

 

 

타입스크립트는 왜 써야 하는거지?

1. 에러의 방지

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

 

number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할 수 있게 된다.

 

 

2. 코드 가이드 및 자동 완성(개발 생산성 향상)

 

개발을 할 때 가장 많이 사용되는 Visual Studio Code의 툴 내부가 타입스크립트로 작성되어 있어 코드 가이드 및 자동 완성 기능을 활용하여 생산성을 향상 시킬 수 있다.

 

이런식으로 string 관련 메소드만 표시된다..

 

typescript의 타입

타입스크립의 핵심인 타입의 종류는 크게 12가지가 있고 :를 이용하여

자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

아래는 대표적인 예시들이다.

//Primitives: number, string, boolean
//More complex types: arrays, objects
//Function types, parameters

//Primitive types
let age: number;
//Number는 자바스크립트 객체
age = 12;

let userName: string;
userName = "Max";

let isInstructor: boolean;

isInstructor = false;


//complex types
let hobbies: string[];

hobbies = ["sfsf", "apple"];


let person: {
  name: string;
  age: number;
};

person = {
  name: "Max",
  age: 32,
};

let people: {
  name: string;
  age: number;
}[];

//Type inference

let course = "React - The Complete Guide";

//course = 1234 -> error

//union type
let course2: string | number = 13;

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

//Functions & types

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

function print(value: any): void {
  console.log(value);
}

//Generics
//이렇게 하면 알아서 타입 추정이 가능해 진다.
function insertAtBeginning<T>(array: T[], value: T) {
  const newArray = [value, ...array];
  return newArray;
}

const demoArray = [1, 2, 3];

const updateArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
const stringArray = insertAtBeginning(["a", "b", "c"], "d");

 

 

2부에서 더 자세히 들어가보자

https://be-senior-developer.tistory.com/185

[React][Typescript] 타입스크립트 개념 심화