맨동이

Property 'nav' does not exist on type 'DefaultRootState' React + TS + redux 사용중 DefaultRootState 값에 찾는 값이 없다는 에러를 발견했다. 해결방법은rootReducer가 있는 곳에 RootState 타입을 선언하고 state에게 알려주면 해결완료! export type RootState = ReturnType

Generic 이란? Generic 은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다 any VS generic 제네릭과 함께 any도 유연한 타입에 속합니다. 하지만 any로 타입을 정의하면 어떤 값이든 올 수 있어 안정성이 떨어집니다. (들어오는 값에 따라 타입 추론을 하기 때문입니다.) any처럼 유연하게 여러 타입을 받으면서 안정성을 지키고 싶을 때 제네릭을 사용합니다. 사용법 // 1. 어떤 타입을 받을 건지 먼저 정의 (check) // 2. params 타입으로 정의 (text: T) function logText(text: T): T { console.log(text); return text; } // 3. 함수를 호출할..

readonly properties readonly가 선언된 클래스 프로퍼티는 선언 시 또는 생성자 내부에서만 값을 할당할 수 있습니다. 그 외의 경우에는 값을 할당할 수 없고 오직 읽기만 가능한 상태가 됩니다. //TS class Person { public readonly name: string = 'Dongit'; private readonly country: string = 'Korea'; hello() { this.country = 'China'; // Cannot assign to 'country' because it is a constant or a read-only property. } } const p2 = new Person(); p2.name = "H.D" // Cannot assig..

Class 란? object를 만드는 설계도 클래스 이전에 object를 만드는 기본적인 방법은 function javascript 에도 class는 es6 부터 사용 가능 Typescript 에서는 클래스도 사용자가 만드는 타입의 하나 ES5 //TS class Person { } const p1 = new Person(); console.log(p1); //ES5 "use strict"; var Person = /** @class */ (function () { function Person() { } return Person; }()); var p1 = new Person(); console.log(p1); ES6 //ES6 "use strict"; class Person { } const p1 = ..

TypeScript interface 기존에 자바스크립트에는 인터페이스라는 개념이 없었습니다. 하지만 타입스크립트를 이용해 인터페이스를 사용할 수 있게 됐습니다. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다. 컴파일 타임에만 사용되고 js 파일에는 나타나지 않는다! //TS function hello1(person: {name:string; age:number}):void { console.log(`hi im ${person.name}, ${person.age}years`); } const p1 : {name:string; age:number}={ name:"Dongit", age:25 }; hello1(p1); 기존 타입스크립트의 코드가 위와 ..

tsconfig 최상위 프로퍼티 compileOnSave: true/false (default false) 파일 변경 후 저장하면 자동 컴파일을 해주는 옵션입니다. 에디터마다 안될 수도 있습니다. VS2015 with TypeScript 1.8.4 이상 // tsconfig.json { "compileOnSave": true } extends : "경로" 특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성입니다. TypeScipt 2.1 이상 // config/base.json { "compilerOptions": { "noImplicitAny": true } } // tsconfig.json { "extends": "./config/base" } files, i..

타입 시스템 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 컴파일러가 자동으로 타입을 추론하는 시스템 TypeScript는 structural type system(구조적 타이핑)을 기반으로 타입 시스템을 갖추고 있습니다. structural type system:구조가 같으면, 같은 타입이다. function func(a) { return a * 38; } console.log(func(10)); //380 console.log(func('HEY')+5); // NaN a 의 타입을 명시적으로 지정하지 않아 a가 any 로 추론되고 함수의 리턴 타입은 number로 추론되는 경우입니다. 이럴경우 nolmplicitAny 옵션을 켜주어야 합니다. nolmplicitAny 옵션 타입을 명시적으로 ..

object 타입 "primitive type이 아닌 것"을 나타내고 싶을 때 사용하는 타입 array let list: number[] = [1,2,3]; let list2: (number | string)[] = [1,2,3,"4"]; // let list: Array = [1,2,3]; tuple length 를 벗어나거나 순서가 맞지 않아도 오류가 납니다. let x: [string,number]; x = ["hello", 39]; //x = [10, "Hi"]; //순서가 맞지 않음 const person : [string, number] = ["Dongit", 25]; //const [first, second, third] = person; //length를 벗어남 any 어떤타입이어도 상관없..

Type Script C#과 Java 같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가독성과 코드 품질 등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아낼 수 있습니다. 반면 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있습니다. 이를 약한 타입 언어라고 표현할 수 있으며 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가집니다. 그리고 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다. npm 프로젝트로 ..