이안의 평일코딩

strict 옵션이란? 정의해놓은 코드에서 강하게 타입을 정의할 수 있고 추후에 일어날 수 있는 타입 정의에 대한 오류 대응할 수 있고 안전하게 코딩을 할 수있게 한다. tsconfig.json에서 strick 옵션은 default가 false이며 true로 고쳐주면 아래의 옵션들도 같이 true가 된다. { "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } 내장 타입의 위계 구조 타입 오류 // 타입스크립트 내장 타입의 위계..

axios 라이브러리 // 라이브러리 로딩 import 변수명 from '라이브러리 이름' // 변수, 함수 임포트 문법 import {} from '파일 상대 경로'; 터미널에 -D 또는 --dev--save없이 axios를 설치해주면 package.json의 dependencies(devDependencies가 아닌)에 생긴다. npm i axios // i는 install과 마찬가지 그리고 라이브러리를 import해오면 axios에 대한 타입 오류가 사라진다. import axios from 'axios'; 타입 선언 외부 라이브러리 axios는 타입정의가 잘 되어있는 라이브러리지만 그렇지 않은 외부 라이브러리같은 경우에는 어떻게 해야할까? chart.js로 알아보자. npm install char..

dependencies와 devDependencies dependencies에 있는 typescript 삭제 npm uninstall typescript devDependencies에 라이브러리 추가 (배포아닌 개발용 -D 또는 --save--dev) npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier npm 설정파일 package.json에는 라이브러리(패키지)가 들어가 있다. // package.json "devDependencies": { "@b..

명시적인 any 타입 선언 먼저, 명시적으로 any를 선언한다. tsconfig.json 파일에 'noImplicitAny' 값을 'true'로 추가한다. // tsconfig.json { "compilerOptions": { "allowJs": true, // 자바스크립트 검증 "target": "ES5", // 타입스크립트 컴파일 tsc "outDir": "./built", // 결과물 들어갈 곳 "moduleResolution": "Node", // Promise 인식 위해서 "lib": ["ES2015", "DOM", "DOM.Iterable"], // Promise 등 에러 안뜸 "noImplicitAny": true, // 외부라이브러리(axios 등) 오류에서 더 많은 타입에러가 뜸 }, "..

타입스크립트 기본 환경 구성 #1. NPM 초기화 (npm 설정파일 package.json 추가) npm init -y #2. 타입스크립트 라이브러리 설치 npm i typescript --save-dev #3. 타입스크립트 설정 파일(tsconfig.json) 생성 및 기본 값 추가 //tsconfig.json { "compilerOptions": { "allowJs": true, // 자바스크립트 검증 "target": "ES5", // 타입스크립트 컴파일 tsc "outDir": "./built", // 결과물 들어갈 곳 "moduleResolution": "Node" // Promise 인식 위해서 }, "include": ["./src/**/*"] //src폴더 모든 파일 대상 포함 } #4. ..

유틸리티 타입 기본 문법으로 충분히 타입을 변환할 수 있지만, 유틸리티 타입을 쓰면 이미 정의해 놓은 타입을 변환하거나 코드를 줄여 간결하게 정의할 수 있다. 제네릭타입이라고도 불리운다. Pick 타입을 불필요하게 정의하지 않아도 되며 간편하고 간결하게 만들어 준다. interface Product { id: number; name: string; price: number; brand: string; stock: number; } function fetchProducts(): Promise { // ... } Product의 일부(id, name, price)만 가지고 와야 하므로 Product를 쓰지 못함. 밑의 방법은 새로운 인터페이스를 만들기 때문에 권장되지 않는다. interface Product..

yarn이 설치되어 있다면 터미널에서 아래와 같이 입력하여 타입스크립트 프로젝트용 기초환경을 설정한다. $yarn create react-app 프로젝트폴더명 --template typescript 나는 TS-TodoList를 프로젝트명으로 하여 생성했다. 위와 같이 tsx파일로 타입스크립트 리액트 프로젝트 기본 셋팅 성공!

타입 추론 // 타입 추론 기본 1 (변수, 속성, 인자의 기본 값, 함수의 반환 값) var a = 'abc'; function getB(b = 10) { var c = 'hi'; return b + c; } 10 + '10' //1010 // 타입 추론 기본 2 (인터페이스, 제네릭 이용) interface Dropdown { value: T; title: string; } var shoppingItem: Dropdown = { value: 'abc', title: 'hello' } // 타입 추론 기본 3 (복잡한 구조) interface Dropdown { value: T; title: string; } interface DetailedDropdown extends Dropdown{ descrip..