반응형 typescript14 [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17. [VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14. [TypeScript] Type VS Interface TypeScript에서 Type Alias와 Interface의 각각의 특징을 통해 공통점과 차이점에 대해 알아보자. 1. 선언 type PositionType = { x: number; y: number; }; interface PositionInterface { x: number; y: number; } // object const obj1: PositionType = { x: 10, y: 1, }; const obj2: PositionInterface = { x: 20, y: 2, }; 일반적으로 객체 타입을 선언하는 거에 있어서 둘이 동일한 방법으로 사용할 수 있다. 선언 부분에서의 둘의 차이점은 인터페이스는 당연하겠지만 객체에서만 사용이 가능하다는 점과, Index Signature의 사용 유무.. 2022. 6. 8. [TypeScript] 인터페이스(interface) (ft. Intersection) javascript에는 지원하지 않던 인터페이스에 대해 알아보자. Typescript에서 인터페이스는 타입 체크를 한다거나, 클래스에 사용한다거나 등의 역할을 가지고 있다. 몇 가지 특징과 사용법에 대해 알아보자. 1. 타입 체크용 인터페이스 여기서의 인터페이스는 typescipt에서 제공하는 type 이랑 동일한 역할을 한다. interface Point { x: number; y: number; } function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 100, y: .. 2022. 6. 8. [TypeScript] 클래스(Class) 기존에 모던 javascript에서도 클래스가 있다는 것을 알고 있을 것이다. (모른다면 아래 게시글을 보고 어느 정도 익혀 오자) [ES6+] 클래스(Class)문법에 대하여 [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래 mine-it-record.tistory.com 이번 게시글에서는 Typescript가 지원하는 클래스는 역시 기반이 Javascript이기 때문에 Typescript에서 만의 고유한 확장 기능에 대해서만 정리하고자 한다. 1. 클래스 정의와 접근제한자 우선 접근 제한자.. 2022. 6. 8. [TypeScript] 타입추론(Type Inference)과 타입표명(Type Assertion) 타입 추론과 타입 표명에 대해 알아보자. (영어의 뜻을 해석하다보니 타입 표명, 타입 단언 등 뭐 어쨌든 다 동일한 뜻이다.) Type Inference 타입 추론이란 TypeScript에서 명시적인 타입 표기가 없을 때 타입 정보를 제공하기 위해 사용되는 것이다. 그냥 쉽게 말하면 자동으로 타입을 결정해주는 것이라고 보면 된다. let x = 3; // let x: number let y = "4"; // let y: string 이런 식으로 javascript처럼 사용하면 typescript는 자동적으로 타입을 추론하여 알맞은 타입을 결정한다. 그리고 여러 타입을 동시에 사용할 경우 최적 공통 타입을 알아서 계산해준다. let x = [0, 1, null]; // let x: (number | nul.. 2022. 6. 2. [TypeScript] 열거형(Enums)이란? 열거형 Enum은 TypeScript가 제공하는 기능 중 하나이다. Java 같은 곳에서는 이미 제공이 되어있는 상태며 JavaScript에서는 없었는데 TypeScript에서는 제공을 해준다. 그럼 Enum에 대해 알아보자. Enum Enum은 그 안에 무슨 값들을 열거했냐에 따라서 Numeric enums, String enums 등으로 불리기도 하는데, 보통 상수들의 집합을 정의하고자 할 때 주로 사용되고는 한다. 몇가지 특징에 대해서 알아보자. ▷ 숫자 열거형 (Numeric enums) enum Weekdays { Monday, Tuesday, Wednesday, Thursday = 10, Friday, Saturday, Sunday, } let day: Weekdays = Weekdays.Th.. 2022. 6. 2. [TypeScript] 유니언 타입 (Union Type) 과 교차 타입 (Intersection Type) TypeScript의 유니언 타입과 교차 타입에 대해 알아보자. Union Type 아마 타입 스크립트를 사용하다 보면 가장 흔하게 볼 수 있는 게 유니언 타입이 아닐까 생각이 든다. 타입명 그대로 유추해볼 수 있는데, 여러 타입들을 조합하여 사용하는 방법이다. type Direction = 'left' | 'right' | 'up' | 'down'; const move = (direction: Direction) => { console.log(direction); } move('left'); move('right'); // error: '"leftRight"' 형식의 인수는 'Direction' 형식의 매개 변수에 할당될 수 없습니다. move('leftRight'); 이전 게시글에서 정리한 문자열 리.. 2022. 6. 2. [TypeScript] 타입 별칭과 문자열 리터럴 (Type Alias, String Literal) Type Alias와 String Literal에 대해 알아보자. Type Aliases 기본적으로 타입스크립트는 변수나, 객체, 함수 반환 값 등에 타입을 지정하게 되는데, 특히 객체 타입과 유니언 타입을 사용할 때 Type Alias가 필요하다. 이는 똑같은 타입을 재사용하거나, 또 다른 이름으로 부르고 싶은 경우에 아주 유용하게 사용된다. type Point = { x: number; y: number; }; function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 1.. 2022. 6. 2. 이전 1 2 다음 반응형
