반응형 Language/TypeScript12 [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. [TypeScript] 함수에서의 타입 사용 (ft. optional, default, rest) 이번에 정리할 글은 특정 타입이라기보다는 함수에서 타입을 지정해 사용하는 방법에 대해 정리하고자 한다. ▷ 일반적인 사용방법 const plus = (a: number, b: number): number => a + b; function minus(a: number, b: number): number { return a - b; } plus(1, 2); // 3: number type plus("1", 2); // error 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다. minus(3, 1); // 2: number type 보통 타입스크립트에서의 함수는 이런식으로 매개변수의 타입들과 반환 타입 이렇게 둘을 선언해주어야한다. 그리고 당연히 반환값과 동일한 타입의 .. 2022. 6. 1. [TypeScript] 객체타입 - object, array, tupple 타입 스크립트에서 사용하는 타입 중에 object, array, tupple 객체 타입에 대해 알아보자. Object object타입은 javascript에서라면 정말 흔하게 자주 사용하던 타입이나, typescript에서 사용하려면 조금 까다롭다. 그 이유는 객체 안에 사용되는 모든 값들의 타입을 정해줘야 하기 때문이다. object를 사용하는 몇몇 방법에 대해 알아보자. ▷ 일반 객체 타입 정의 let obj: object; obj = { name: "mine", age: 3 }; obj = { obj: {}, arr: [], boal: true }; 그냥 javascript처럼 사용하고자 한다면 object 타입을 그대로 명시해 줘도 좋으나 이럴 경우 typescript를 사용하는 이유가 없기 때문.. 2022. 6. 1. 이전 1 2 다음 반응형
