holajjm

본 포스팅은 Inflearn(인프런) 이정환님의 한 입 크기로 잘라먹는 Typescript 강의를 참고하여 작성되었습니다.[Utility Type]Utility TypeUtility Type이란 Generic, Mapped Type, 조건부 Type 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것을 의미한다. 기본적으로 TS에서 자체적으로 지원해주며 가장 많이 사용되는 Utility Type에 대해서 알아보자.[Mapped Type 기반 Partial, Required, Readonly]Partial- 특정 객체 타입의 모든 속성을 Optional Property로 전환해주는 Type이다. 정의되어 있는 타입이 존재하지만 사용자의 활동에 따라서 사용이 될 수도 있고 사용..

본 포스팅은 Inflearn(인프런) 이정환님의 한 입 크기로 잘라먹는 Typescript 강의를 참고하여 작성되었습니다.[조건부 타입]조건부 타입이란 JS의 삼항 연산자를 사용해서 타입을 정의하는 방법을 말한다. Extends 키워드와 삼항 연산자를 함께 사용하여 해당 타입이 특정 타입의 확장을 받아 참, 거짓을 판별한 후 타입을 지정해주는 방식이다. 원시 타입으로 예시를 들면 다음과 같다.type A = number extends string ? string : number; //typeof A === numbertype ObjA = { a:number}type ObjB = { a:number, b:number}type B = ObjB extends ObjA ? number : string //..

[Indexed Access Type]- Indexed를 이용해서 다른 타입의 특정 Property 값을 추출하는 방식으로 객체,배열,튜플에서 사용이 가능하다. 특정 변수의 타입을 정의할 때 기존에 정의 되어있던 객체,배열,튜플의 특정 타입만 별도로 사용하고 싶을 때 유용하게 사용된다. Object이해하기 쉽도록 객체부터 코드로 예시를 들어보겠다.//Objectinterface User { name: string, age: number, info: { id: number, gender: string }}// 일반적인 방법function printInfo(info: {id: number, gender: string}){ console.log(`${info.id}, ${info.gende..

[Generic(제네릭)]Generic(제네릭)- Generic이란 일반적인이라는 뜻을 가진 단어로 넓게 해석하면 통용적인, 종합적인 의미로 볼 수도 있다. 따라서 Generic이란 어느 한 타입에 국한되지 않고 다양한 형태의 타입을 수용하여 표현할 수 있는 문법이다.(*다양한 형태의 타입을 유연하게 받아들인다는 특징 때문에 Polymorphism(다형성)에 사용되는 문법이라고도 칭한다.)Generic의 사용법은 간단하다. 문법 자체를 완벽히 이해하는데에는 살짝 어렵기도 하고 복잡한 느낌이 들 수도 있지만 가시적으로는 코드가 한결 간결해지는 효과를 볼 수 있다.function func(value:string){ return value;}let a = func(10);//Genericfunction fu..

[TypeScript Class]Typescript Class(타입스크립트 클래스)TS에서 Class를 생성하는 것은 JS에서와 큰 차이가 없다. 동일하게 Pascal Case로 Class 작명을 해준 후, Field를 작성하고, Constructor 키워드를 통해 생성자를 작성해주면 된다. 하지만 TS는 타입이 정의된 정적 타입 언어인만큼 Field와 Constructor의 arguments에도 타입을 정의해주어야 한다. 아래 코드로 JS와 TS로 각각 Class를 정의하는 방법을 확인해 보자.//JavaScriptclass Student { //field name; grade; age; //생성자 constructor(name,grade,age){ this.name = name; ..

[Interface(인터페이스)]Interface(인터페이스)- 타입에 이름을 지어주는 또 다른 작명 문법이자 상호간에 약속된 문법이며 객체의 구조를 정의하는데 특화된 문법이다. Type Alias에는 없는 상속, 합침 등의 Type Alias에는 없는 특수 기능을 제공한다. 작성 방식은 Type Alias와 비슷한 형태로 작성한다. 하지만 정의하며 "="를 사용하지 않는다.interface Person { name: string, age?: number, sayHi(): void, sayHi(a:number, b:number): void}const person:Person = { name: "Tom", age: 10, sayHi:() => { console.log("Hi") }}pe..

[함수 타입]함수의 타입일반적으로 함수를 설명할 때 JS에서는 매개변수가 무엇이고 결과값이 무엇인지에 대한 정보가 중요하다.하지만 TS에서는 매개변수와 결과값도 중요하지만 각 값들의 타입이 무엇인지에 대한 정보도 중요하다.//함수 선언문function func(a:number,b:number) : number { return a + b;}//화살표 함수const add = (a:number, b:number) : number => a + b;위의 코드와 같은 방식으로 매개변수와 결과값의 타입을 지정해주는데, return문이나 "=>"가  있는 경우 매개변수의 타입을 보고 TS 자체적으로 결과값의 타입을 추론하기도 한다. 함수의 매개변수매개변수의 타입을 정의해줄 경우 기본값을 설정해둘 수 있다. 하지만 ..

[타입스크립트의 이해]타입을 정의하는 기준, 타입간의 관계를 정의하는 기준, 타입의 오류를 검사하는 기준 등 타입스크립트의 구체적인 원리와 동작 방식을 이해한다.[타입은 집합이다]타입은 집합으로 이해를 하면 쉽다. 타입은 값들을 포함하고 있는 집합이며 계층도로 표현이 가능하다. 타입 계층도슈퍼타입(부모 타입) : 상대적으로 더 큰 범주의 타입 및 집합서브타입(자식 타입) : 상대적으로 더 작은 범주의 타입 및 집합//number type은 number literal type의 슈퍼 타입이다.const a:number = 1; //number typeconst b:10 = 10; // number literal type  타입 호환성타입 호환성 : 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것...

본 포스팅은 Inflearn(인프런) 이정환님의 TypeScript 강의를 기반으로 작성되었습니다. [원시 Type과 리터럴 Type]String Typeconst a:string = "Hello";Number Typeconst a:number = 10;Boolean Typeconst a:boolean = false;Null Typeconst a:null = null;Undefined Typeconst a:undefined = undefined;Literal Type- "literal == 값"이기 때문에 특정 값으로만 지정된 타입을 의미한다.- 이 타입은 많이 사용되지는 않는다.let num2: 10 = 10;let str2: "hi" = "hi";let bool: true = true;tsconfig..

본 포스팅은 Inflearn(인프런) 이정환님의 TypeScript 강의를 기반으로 작성되었습니다.[타입스크립트?]타입스크립트는 2012년에 MS 개발자이자 C# 언어의 창시자인 덴마크인 앤더스 하일스버그(Anders Hejlsberg)가 만든 언어로 JS에 타입관련 기능들을 추가하여 JS의 확장판으로 안정성을 갖고 더 안전하게 사용할 수 있도록 언어이다.자바스크립트는 브라우저 내에서 간단한 기능만을 위해서 발명된 언어이며 nodeJS라는 JS 런타임 환경이 생기면서 어디서든 JS를 구동 가능하고 다양한 웹앱을 만들 수 있게 되었지만 유연한 문법에 자유롭고 버그 발생 가능성이 높았기에 안정성이 부족하고 안전하지 못한 언어라는 단점이 있다.그래서 나오게 된 언어가 TS이며 간단히 말해 JS에서 변수의 타입..