JavaScript/TypeScript 검색 결과

해당 글 9건

d.ts // its corresponding type declarations.

타입스크립트가 적용된 CRA 프로젝트를 생성해서 사용하지 않는 파일들을 없애던 도중 갑자기 App.tsx에서 다음과 같은 에러가 발생했다 결론부터 말하면 react-app-env.d.ts 파일을 삭제해서 생긴 문제였고 다시 복구해주면 된다 그렇다면 이 파일은 무슨 역할을 하고 있었길래 삭제했을 때 이런 에러를 발생시키는 걸까? d.ts d.ts 파일은 전역에서 사용할 수 타입 유형만 선언할 수 있는 파일이다 이 파일은 출력에서 JavaScript 코드를 생성하지 않는 TypeScript 코드만 포함할 수 있으며 이 때문에 d.ts 파일은 컴파일 이후 js코드로는 생성되지 않는다 또한 이 때문에 타입 유형이 아닌 const나 let 를 파일 내부에 선언하면 에러가 발생되고 함수의 타입은 선언할 수 있지만 ..
JavaScript/TypeScript 2021. 11. 3. 00:45

# vs private in Class

타입스크립트 핸드북을 읽다보면 클래스 파트에서 프라이빗 필드에 대해서 이렇게 설명하는 부분이 있다 이 문단 이후 # 에 대한 언급 없이 private문법에 대해서 소개를 이어나간다 그렇다면 이 둘의 차이점은 무엇일까..? 그것이 궁금해서 한 번 테스트 해보았다 하지만 # 구문에서 에러가 났는데 찾아보니 # 구문은 ECMAScript 2015 이상에서만 사용이 가능하다고 한다 지원 한다면서.. 타입스크립트에서 이 문법을 사용할 수 있는 방법은 두 가지가 있는데 tsconfig.json을 이용해서 프로젝트 전체에 적용해야하는 경우이렇게 해주면 별 문제 없이 js로 빌드되어 브라우저에서 돌릴 수 있다 "compilerOptions": { "target": "ES6" }, 단일 파일을 대상으로 트랜스파일링할 때..
JavaScript/TypeScript 2021. 10. 27. 09:22

Mapped Type

Mapped Type? 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미한다 기존의 자바스크립트에서 배열에 내장되어있는 map과 동일한 일을 해준다고 생각하면 이해하기 쉽다 const arr = [1, 2, 3, 4, 5]; arr.map(v => v * 2); // 2, 4, 6, 8, 10 Mapped Type은 이처럼 기존의 타입을 반환하면서 각각의 속성에 반복적으로 접근해 새로운 타입을 반환한다 이전 시간에 다루었던 유틸리티 타입 중 Partial, Omit, Pick 도 이러한 성질의 문법이다 실제로 타입스크립트 내부 코드를 살펴보면 위의 3가지 유틸리티 타입은 Mapped Type을 이용해서 구현되어 있다 형태는 대부분 아래와 같다 { [p in K]: T }..
JavaScript/TypeScript 2021. 10. 25. 22:51

유틸리티 타입

유틸리티 타입이란 이미 정의해놓은 타입을 재사용할 때 유용한 타입 문법이다 굳이 사용하지 않아도 기존의 인터페이스, 제네릭으로 충분히 타입 변환이 가능하지만 손이 덜 가고 간결하게 변환할 수 있다 Partial Partial 타입은 이미 정의한 타입에서 일정 부분만 만족하는 타입을 새로 정의할 수 있다 왜 필요할까 만약 회원가입시 사용자 정보를 객체에 저장한다고 할 때 이름, 나이, 성별, 주소, 이메일, 유저네임, 비밀번호가 필요하다고 생각했고 따라서 아래처럼 정의했다 interface UserInfo { name: String; age: number; sex: String; address: String; email: String; username: String; password: String; } 이..
JavaScript/TypeScript 2021. 10. 24. 01:57

Generics

제네릭은 자바나 C에서 재사용이 가능한 함수에 다양한 타입의 파라미터를 받을 수 있게끔 하는 특징이다 제네릭 함수 제네릭 함수의 Hello World라는 identity함수를 만들어보자 function identity (arg: number) :number{ return arg; } identity 함수는 받은 파라미터를 그대로 반환하는 아주 간단한 함수이다 하지만 타입스크립트 처럼 들어오는 파라미터의 타입과 반환 타입이 미리 명시되어있다면 어떻게 해야 유동적으로 타입을 받을 수 있을까? function identity (arg: any) : any{ return arg; } any를 사용하면 간단할 것 같다 어떤 타입이 들어오든 들어온 타입으로 반환할 수 있다 하지만 문제가 있는데 제네릭을 사용하는 i..
JavaScript/TypeScript 2021. 3. 12. 12:08

Function

자바스크립트와 같이 기명 함수와 익명 함수 그대로 사용할 수 있다 함수 타입 함수에 타입 붙이기 // 기명 함수 function add(x: number, y: number): number { return x + y; } // 익명 함수 let myAdd = function(x: number, y: number): number { return x + y }; 파라미터의 타입을 보고 리턴값의 타입을 파악할 수 있으므로 생략이 가능 함수 타입 작성하기 위는 그저 함수에 타입을 붙인 것이고 함수 전체의 타입을 설정하는 법도 존재한다 let myAdd: (value: number, increase: number) => number /* 여기까지 함수 타입 */ = function(x: number, y: num..
JavaScript/TypeScript 2021. 3. 11. 17:42

클래스

프로퍼티 타입스크립트는 자바스크립트와 다르게 클래스 내에서 선언한 프로퍼티들만 사용할 수 있다 class Animal { constructor(name, age) { this.name = name; this.age = age; } } 이런 코드는 자바스크립트에선 아무런 문제 없이 돌아가지만 타입스크립트에서는 에러를 발생시킨다 class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } 이렇게 클래스 내에서 선언해주어야 그 이후에 사용이 가능하다 상속 이미 존재하는 클래스를 이용해 상속 받아서 새로운 클래스를 만들 수 있다 class Vehicle { ..
JavaScript/TypeScript 2021. 3. 3. 13:23

인터페이스

인터페이스 이해 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } printLabel의 타입 검사를 보면 객체를 파라미터로 받은 뒤 객체 내부에 존재하는 label값이 string인지 검사하고 있다 function printLabel (labelObj: {label:string}){ console.log(labelObj.label); } let myObj = {label: "string in labelObj"}; printLabel(myObj); // "string in labelObj" myObj안에 string타입의 label 프로퍼티가 들어가 있기 때문에 정상적으로 출력되는 것을 볼 수 있다 만약 객체의 내부..
JavaScript/TypeScript 2021. 3. 2. 10:43

기본 타입

왜 타입스크립트를 사용해야할까? 자바스크립트는 동적 언어이다 ⇒ 컴파일 시점에 에러를 잡지 않고 런타임 환경에서 에러가 쉽게 발생할 수 있는 단점을 가진다 객체 지향 프로그래밍이 가능하다 ⇒ 인터페이스, 제네릭타입 등 으로 강력한 객체 지향 프로그래밍이 가능하다 자바스크립트의 기능들을 그대로 제공한다 기본 타입 기존 타입 원래 자바스크립트에서 자주 사용되는 원시 타입의 변수와 객체 // boolean let bool : boolean = false; // Number let num : number = 1; // String let str : string = 'string'; let template : string = `this is ${str}`; // Array let arr : number[] = [..
JavaScript/TypeScript 2021. 3. 1. 12:55