Frontend/Effective Typescript

Typescript - 의존성 관리 타입 선언과 @types

의존성 관리 : 타입 선언과 @types package.json의 세가지 종류 의존성 dependencies런타임에 필수적인 라이브러리들이며, npm을 통해 설치한다면 dependencies에 들어있는 라이브러리도 함께 설치됨 → 전이 의존성 현재 프로젝트를 실행하는데 필수적인 라이브러리 devDependencies사용자가 해당 프로젝트를 설치하면 해당 라이브러리들은 제외됨 ⇒ typescript 현재 프로젝트를 개발하고 테스트하는데 사용되지만, 런타임에는 필요없는 라이브러리 peerDependencies 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들 → 플러그인 프로젝트에서 공통적으로 고려해야 할 의존성 두가지 ts자체 의존성 ⇒ 팀원들이 모두 같은 버전을 사용해야함 → devDe..

Typescript - any 사용하기

any 사용하기 가능한 좁은 범위에서 any 사용하기 function f1(){ const x:any = express(); processBar(x); } // 보다는 function f1(){ const x= express(); processBar(x as any); 함수의 반환타입은 정의되어야 함수 내부의 any가 밖으로 빠져나가지 않게 할 수 있다. 객체 내부의 타입오류는 해당 부분에서만 as any를 사용하여 해결하자! @ts-ignore //@ts-ignore를 사용하면 any를 사용하지 않고 해결이 가능함 any를 구체적으로 변형해서 사용하기 any타입을 그대로 정규식이나 함수에 넣는 것은 권장되지 않는다. function getLength(array:any){} // ===refactor f..

Typescript - 타입 설계

타입설계 문서에 타입정보 쓰지 않기 ⇒ 타입은 ts로만 표기 생성은 엄격하게, 사용은 너그럽게 매개변수 타입은 반환타입에 비해 범위가 넓은 경향이 있음 ⇒ 선택속성과 유니온타입 매개변수와 반환타입의 재사용을 위해 기본형태(반환타입)와 느슨한 형태(매개변수타입)을 준비하는 것이 좋음 타입 주변에 null값 배치하기 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안됨 API작성시에는 반환타입을 큰 객체로 만들고 반환타입 자체가 null이거나 null이 아니도록 설계해야함 strictNullChecks → null오류를 정확하게 찾아냄 유니온의 인터페이스보다는 인터페이스의 유니온을 사용 interface Layer{ layout:FIllLayout|LineLayout|Poi..

Typescript - 타입 추론

타입추론 타입 추론이 된다면 명시적 타입 구문이 필요하지 않음 비구조화 할당문은 모든 지역변수의 타입이 추론되도록 함 interface Product={ id:string, name:string, price:number } function logProduct(product:Product){ const {id,name,price}=product; } ⇒ 따라서 타입 정보가 있는 라이브러리에서 콜백함수의 매개변수 타입은 자동으로 추론됨 잉여 속성 체크 타입에 선언된 속성 외에 속성이 있는지 체크함 객체 리터럴에서만 잉여속성 체크가 동작함 따라서 엄격한 객체 리터럴 체크라고도 한다. 함수의 반환에 타입 명시 ⇒ 함수의 반환에 타입을 명시하면, 오류가 정확하게 표기됨 linter의 no-inferrable-ty..

tsconfig.json

tsconfig.json 전반적인 ts설정을 하는 문서 생성 tsc --init 설정 noImplicitAny ⇒ 암시적 any를 허용하지 않음 comilerOption:{ "noImplicitAny" :true, } strictNullChecks ⇒ null이나 undefined를 허용하지 않음 → undefined는 객체가 아닙니다와 같은 문제 해결 가능 comilerOption:{ "strictNullCheck" :true, } noEmitOnError ⇒ 본래, ts는 타입체크와 컴파일이 독립적으로 시행되나, 타입에러가 발생할때 컴파일이 되지 않게 하려면 설정함 → 런타임에는 타입체크가 불가능함 comilerOption:{ "noEmitOnError" :true, } 💡 타입스크립트가 컴파일링되는..

TypeScript

왜 사용하는가? ⇒ 타입 안정성이 있는 MS에서 만든 프론트 엔드 언어 작성한 문서가 javascript로 변환됨 → 타입스크립트가 에러를 탐지하면 javascript로 컴파일되지 않음 let a="hello" a=1 오류 발생 Typescript 변수형 명시방식 let b : boolean = false let c : number[] = [] ⇒ 타입 추론이 작동하지 않으므로, 명시적 표현은 최소화 하는 것이 좋음 변수형 number string boolean 각 변수형의 array Object에 대한 Type 선언 const player { name : string; age: number; } = { name:"nico"; age : 23; } 만약 age가 없는 경우도 있다면? const playe..