본문 바로가기

개발공부/TypeScript

 (11)
[타입스크립트 입문] 타입스크립트를 왜 써야하는가? 우선 타입스크립트에 대해서 알아보도록 하자. 타입스크립트란? 타입스크립트는 자바스크립트에 '타입(type)'을 부여한 언어이다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다. 이 변환 과정을 우리는 컴파일(compile)이라고 부른다. 왜 타입스크립트를 써야하는가? 타입스크립트는 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다. 에러의 사전 방지 코드 가이드 및 자동 완성(개발 생산성 향상) 각각의 관점에 대해서 하나씩 살펴보도록 하자. 에러의 사전 방지 타입스크립트는 에러를 사전에 미리 예방할 수 있다. // math.js function sum(a, b) { return a + b; } //..
TypeScript 타입 추론, 타입 단언 타입 추론이란? 타입 추론이 가능한 상황들 타입추론에서 주의해야할 상황들 최적 공통 타입(Best Common Type) ✏️타입추론 중간 정리 타입단언이란? ✏️타입단언 중간 정리 ✏️ 총정리 🖥️ 타입 추론이란? 타입 스크립트는 점진적 타입 시스템을 채택하고 있기 때문에 타입을 별도로 지정해주지 않는다면 자동으로 타입을 추론한다. 이런 기능을 "타입추론"이라고 한다. 위 이미지는 변수 a에 number타입이라고 정의하지 않았음에도 불구하고 number타입으로 추론되는것을 확인할 수 있다. 이처럼 타입스크립트는 프로그래머에게 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공한다. 그러나 모든 상황에 타입을 잘 추론하는 것은 아니다. 위 이미지처럼 함수의 매개변수 타입은 자동으로 추론할 수 ..
TypeScript 열거형(Enum)타입 🖥️ 열거형(Enum)타입 열거형 타입은 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입이다. 열거형은 여러개의 값을 나열하는 용도로 사용한다. 예제 코드를 살펴보며 열거형타입을 만들어보도록하자. const user1 = { name: "김감자", role: 0, // 관리자 }; const user2 = { name: "홍김지", role: 1, // 일반유저 } const user3 = { name: "박포테이토", role: 2, // 게스트 } 세명의 유저를 만들고 role이 0번이면 관리자, 1번이면 일반유저, 2번이면 게스트라고 해보자. 하지만 해당 코드의 주석부분을 제거하면 어떤 번호가 관리자를 뜻하는지 일반유저를 뜻하는지 게스트를 뜻하는지 알기 어렵다. 이..
TypeScript 타입별칭(Type Alias)과 인덱스 시그니쳐(Index Signature) 타입별칭(Type Alias) 타입 별칭을 이용하면 변수를 선언하듯 타입을 별도로 정의할 수 있다. // 타입별칭 type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string; }; let user: User = { id: 1, name: "김감자", nickname: "kim potato", birth: "2001.01.01", bio: "하이요", location: "부산시" } type 타입이름 = 타입 형태로 타입을 정의한다. 위 코드는 타입 이름으로는 User, 타입으로는 여러개의 프로퍼티가 있는 객체 타입이 정의되어 있다. 참고로 동일한 스코프에서 동일한 이름의 타입별칭을..
TypeScript 객체 객체 객체 타입을 정의하는 방법 타입스크립트에서는 두가지 방법으로 객체의 타입을 정의할 수 잇다. Object로 정의하기 먼저 간단한 객체를 하나 만들어보자 let user = { id: 1, name: "김감자", }; 이제 타입을 정의해보자 let user: object = { id: 1, name: "김감자", }; 하지만 타입을 이렇게 정의하면 한가지 문제가 발생한다. 위 이미지처럼 점 표기법으로 객체의 특정 프로퍼티에 접근하려고 하면 오류('object' 형식에 'id' 속성이 없습니다.)가 발생한다. 위와 같은 에러메세지가 발생하는 이유는 우리가 정의한 object타입은 단순 값이 객체임을 표현하는것 이외에는 아무런 정보도 제공하지 않는 타입이기 때문이다. 따라서 이 타입은 객체의 프로퍼티에 ..
TypeScript 배열과 튜플 배열 배열 타입 정의 방법 배열타입 정의 방법 첫번째 let numArr: number[] = [1, 2, 3]; 배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의한다. 만약 문자열을 담는 배열의 타입을 정의한다면 let strArr: string[] = ["hello", "kim", "potato"]; 위와 같이 정의하면 된다. 배열타입 정의 방법 두번째 다른 방법으로도 배열의 타입을 정의할 수 있다. let boolArr: Array = [true false, true]; Array 형태로도 배열의 타입을 정의할 수 있다. 이렇게 꺽쇠()와 함께 타입을 작성하는 문법을 타입스크립트에서는 '제네릭'이라고 한다. 배열의 타입..
TypeScript의 기본타입(원시타입, 리터럴타입) TypeScript의 기본타입 타입스크립트의 기본타입에 대해서 알아보자. 타입스크립트의 기본타입의 종류는 타입스크립트 Every Types에서 자세하게 확인할 수 있다. 기본타입(Basic Types)란 타입스크립트가 자체적으로 제공하는 타입들을 말한다. 기본 타입을 다른말로는 내장타입이라고도 한다. 기본타입에서 null이나 undefined, number, string처럼 우리가 흔히 자바스크립트에서 배웠던 타입들도 존재하고, 그 외 any, void, never 같은 처음 보는 타입들도 존재한다. 이렇게 타입스크립트에는 꽤 많은 기본타입들이 제공된다. 그리고 이런 각각의 기본 타입들은 서로 부모자식 관계를 이루며 계층을 형성한다. 지금은 계층에 대한 이야기보다는 타입스크립트에 다양한 기본타입들이 있는..
타입스크립트 컴파일러 옵션 설정하기 컴파일러 옵션이란? 타입스크립트의 컴파일은 프로그래머가 작성한 코드에 타입 오류가 있는지 없는지를 검사하고 오류가 없다면 자바스크립트 코드로 변환한다. 이러한 컴파일 과정에서 아주 세부적인 사항들 예를들어 얼마나 엄격하게 타입 오류를 검사할건지 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할것인지 등의 컴파일의 아주 세부적인 사항들을 컴파일러 옵션이라고 한다. 컴파일러 옵션을 프로그래머가 직접 설정한다는 건 이런 사항들을 프로그래머가 자신의 입맛에 맞게 자유롭게 변경하는 행위를 말한다. 타입스크립트는 다른 언어에 비해 컴파일러 옵션을 아주 자유롭고 쉽게 설정할 수 있는데, 이렇게 자유로운 환경 설정을 제공하는 덕분에 프로그래머는 프로젝트의 성격에 따라 프로젝트에 최적화된 맞춤 설정을 만들어 사..
타입스크립트의 동작 원리 대다수의 프로그래밍 언어의 동작 원리 타입스크립트의 동작 방식을 이해하기 이전에 대다수의 프로그래밍 언어들의 동작원리에 대해서 살펴볼 필요가 있다. 먼저 대부분의 프포그래밍 언어는 사실 컴퓨터보다는 인간에게 더 친화적이다. 컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은 아주 단순한 형태의 언어를 기반으로 동작하기때문에 영어의 문법과 비슷한 프로그래밍 언어를 컴퓨터가 바로 이해하고 실행할 수는 없다. 그래서 컴퓨터는 우리가 작성한 코드를 실행하기 위해서 코드를 컴퓨터가 해석하기 쉬운 형태로 변환하는데 이 과정을 '변환한다'라고 해서 '컴파일(Compile)'이라고 한다. 그래서 우리가 프로그래밍 언어로 작성한 코드를 컴파일하면 코드가 컴퓨터가이해할 수 있는 기계어 같은 형태로 변환이 되고, 컴퓨..
VSCode로 TypeScript 설치환경준비 및 실행하기 typescript를 실행할 폴더를 만들어주고 난 후 먼저 Node.js패키지를 초기화 해줍니다. 1. Node.js초기화하기 터미널창에 npm init을 입력하여 초기화를 시켜줍시다 2. @types/node 설치하기 새로운 타입스크립트 프로젝트(패키지)를 시작할때 패키지 초기화 이후 가장 먼저 해줘야 하는 작업이 하나 있다. 바로 Node.js 내장 기능들의 타입 정보를 담고있는 @types/node 라는 패키지를 설치해줘야 한다. 터미널창에 npm i @types/node를 입력하여 패키지를 설치해줍시다. @types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 정보를 가지고 있다. 만약 이 라이브러리를 설치하지 않으면 Node.js가 제공하는 conso..

티스토리툴바