[한 입 크기로 잘라먹는 Next.js] TypeScript란?

About this offer

학습 목표 타입스크립트와 자바스크립트의 차이를 말로 설명할 수 있다. 타입스크립트 코드를 작성할 수 있다. 타입스크립트란 어떤 언어일까? 타입스크립트는 자바스크립트를 보다 안전하게 사용할 수 있도록 타입 관련 기능을 자바스크립트에 추가한 언어 즉 타입스크립트는 자바스크립트의 상위 개념(확장판)이라고 이해할 수 있다. 타입스크립트는 타입 안정성을 보장하고, 유지보수성을 높이며 런타임 에러를 줄이는 데 중요한 역할을 한다. 이로 인해 대다수 FE 개발에선 타입스크립트가 주축을 이루고 있다. TS(TypeScript) 기본 문법 우선 자바스크립트는 보통 변수를 선언할 때 let , const , var 를 사용한다. 타입스크립트도 이와 같이 선언을 하지만 변수의 타입(number, string ...)을 직접 선언할 수 있다. let num: number = 1; // number 타입 변수 생성 이처럼 TS는 타입을 지정할 수 있는데 정의한 타입 이외의 타입(string, array...)으로 지정하게 된다면 오류가 발생한다. let num: number = 1; num = "hello"; // 에러 발생!! 매개변수의 경우에도 동일한 문법을 사용한다. function addNumber(num1: number, num2: number):number /* <= 함수의 반환값도 지정 가능*/ { return num1 + num2; } 그렇다면 타입을 지정하지 않으면 에러가 발생할까? 타입스크립트는 변수를 선언할 때 타입을 정의하지 않아도 초깃값 을 기준으로 타입을 자동으로 추론한다. 이를 타입 추론(Type Inference)이라고 한다. 그러나 예외적으로 초깃값이 없는 매개변수의 타입은 추론되지 않는다. 따라서 매개변수처럼 초깃값이 없는 변수는 타입을 지정하지 않는다면 에러가 발생한다. function concating(str1, str2) { // 에러 발생 return str1 + str2; } 식별자 정의 타입스크립트는 자주 사용하는 타입 구조(ex 객체)를 별도의 이름(식별자)으로 정의해 재사용할 수 있다. 이를 타입 별칭(Type Alias)이라 한다. 예제를 보며 알아보자. type User = { // 식별자 정의 name: string; age: number; } const user: User = { name: "Gijin", age: 25, } Interface 타입 별칭은 복잡한 타입 구조를 간단하게 표현할 수 있어 이를 사용하면 유지보수성이 올라간다. 타입 별칭 말고 인터페이스(Interface)로도 객체의 타입을 정의할 수 있다. interface Book { title: string; author: string; }; const book: Book = { title: "한 입 크기로 잘라먹는 Next.js" author: "이정환" } 타입스크립트의 특징 정적 타입 검사(Static Type Checking) 코드를 실행하기 전 타입을 검사 자바스크립트는 코드를 실행하면서 오류를 발견하지만, 타입스크립트는 실행하기 전에 미리 코드 타입에 문제가 존재하는지 확인한다. 그 덕에 실수로 타입을 잘못 입력해도 코드를 실행하기 전에 알려주기 때문에 더 안전한 코드를 작성할 수 있다.

Offer details

Provider

velog

Source

velog-rss

Score

54.4

Confidence

49%