웹/TypeScript
-
[이펙티브 타입스크립트] 3장 타입 추론 (2)웹/TypeScript 2023. 6. 14. 14:25
3장 타입 추론 타입 스크립트는 타입 추론을 적극적으로 수행한다. 아이템 24 일관성 있는 별칭 사용하기 별칭은 타입 스크립트가 타입을 좁히는 것을 방해하기 때문에 일관성 있는 별칭을 사용해야 한다. 별칭을 남발해서 사용하면 제어 흐름을 분석하기 어렵다. 타입 스크립트는 함수가 타입 정제를 무효화하지 않는다고 가정한다. 비구조화 문법을 사용해서 일관된 이름을 사용하는 것이 좋다. // 객체 비구조화 예시 const person = { name: 'John', age: 30, address: 'Seoul' }; const { name, age, address } = person; console.log(name); // 'John' console.log(age); // 30 console.log(addres..
-
[이펙티브 타입스크립트] 1장 타입 스크립트 알아보기 심화 (Feat. ZOD)웹/TypeScript 2023. 6. 7. 15:55
타입스크립트는 런타임에서의 에러를 잡아줄 수 없음 타입스크립트는 런타임에서의 에러를 잡아줄 수 없음 EXAMPLE const test = (value: string) => { console.log(value); }; // test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다 test(1); test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다. 하지만, 위와 같은 코드가 자바스크립트로 변환되면 const test = (value) => { console.log(value); }; test(1); 이렇게 되기 때문에 코드는 정상적으로 동작한다. 그래서 타입 체커는 에러를 화면에 띄워주지만 트랜스파일된 자바스크립트 파일은 아무런 문제가 없기 때문에 정상적으로..
-
[이펙티브 타입스크립트] 2장. 타입스크립트의 타입 시스템 (2)웹/TypeScript 2023. 6. 1. 09:48
12. 함수 표현식에 타입 적용하기 타입 스크립트에서는 함수 표현식을 사용하는 것이 좋다. 반복되는 함수 시그니처를 하나의 함수 타입으로 통합할 수 있다. ex) type ArithmeticFunction = (num1: number, num2: number) => number; const add: ArithmeticFunction = (num1, num2) => { return num1 + num2; }; const subtract: ArithmeticFunction = (num1, num2) => { return num1 - num2; }; const multiply: ArithmeticFunction = (num1, num2) => { return num1 * num2; }; const divide..
-
[이펙티브 타입스크립트] 2장. 타입스크립트의 타입 시스템웹/TypeScript 2023. 5. 30. 10:02
6. 편집기를 사용하여 타입 시스템 탐색하기 TS 설치시 실행 되는 것 1. 타입 스크립트 컴파일러 (tsc) 2. 타입 스크립트 서버 (tsserver) 편집기를 통해 타입 추론을 확인 할 수 있는데, 아래와 같이 적혀 있다. item 19 (108p)를 보면 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 오히려 모든 변수에 타입을 지정하는 것은 비생산적이고 방해가 된다. 조건문의 분기, 객체 개별 속성을 확인 할 것 ex ) bannerType은 WebView 와 Screen 둘 중 하나이지만, if 문 안의 bannerType은 WebView이다 . ex) 탐색기에서 오류 1 // 오류를 일으키는 타입스크립트 코드 예제 type User = { name: string; age: number..
-
[이펙티브 타입스크립트] 1장. 타입 스크립트 알아보기웹/TypeScript 2023. 5. 12. 15:56
Typescrit 타입스크립트란? 성숙하고 효율적으로 변모한 자바스크립트의 완성도를 채워줄 마지막 퍼즐 아이템 1 . 타입 스크립트와 자바스크립트의 관계 이해하기 타입 스크립트는 자바스크립트의 상위집합(superset)이다 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있다. 즉, 타입 검사는 런타임에서 발생하는 동적인 문제들을 모두 해결해주지는 않습니다. 예시) const name = ['aaaa', 'bbbb']; // 런타임에러 console.log(name[1].toUppercase()); // 메소드 오타 console.log(name[2].toUpperCase()); // name[2] undefined // 정상작동 console.log(name[1].toUppe..
-
[TypeScript] useStrict을 사용해야 하나요? + readonly, 추론 가능한 타입, as const 단언문웹/TypeScript 2023. 3. 22. 12:34
TypeScript useStrict을 사용해야 하나요? 결론을 먼저 말씀드리면 "아니요" 입니다. 그 이유는 Ts의 안전성 검사가 usestrict 보다 훨씬 엄격한 체크를 하기 때문입니다. useStrict "엄격한 사용" 또는 "엄격한 모드"는 ECMAScript 5(ES5)의 JavaScript에 도입된 기능으로 개발자가 더 엄격하고 안전한 언어 버전을 선택할 수 있습니다. JavaScript 파일 또는 함수의 맨 위에 "use strict"가 추가되면 이전 버전의 JavaScript에서 허용되었던 특정 작업을 제한하는 일련의 규칙이 활성화됩니다. 이러한 제한 사항은 다음과 같습니다. 철자 오류를 포착하고 글로벌 네임스페이스 오염을 방지하는 데 도움이 되는 선언되지 않은 변수의 사용을 허용하지 않..
-
[TypeScript] type과 interface 차이,타입 집합웹/TypeScript 2023. 3. 22. 12:21
TypeScript type과 interface 차이 하나의 프로젝트에서 type과 interface 중 한가지 일관된 스타일을 확립하는 것이 좋다. interface type 재선언 O (선언적 확장) 재선언 X 객체만 가능 모든 타입 가능 computedValue 가능 ex) [ k in list ] : string interface의 경우 extends를 이용해서 타입을 확장한다. type의 경우 & 연산자를 이용해서 타입을 확장한다. type 집합 - & interface Person { name : string } interface Lifespan { birth : Date, death : Date, } type personSpan = Person & Lifespan // type의 경우 & 연..
-
[TypeScript] Js와의 관계, 타입 구문, 타입 작성 방법웹/TypeScript 2023. 3. 22. 12:04
What is TypeScript? JavaScript and More TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다 . 편집기에서 초기에 오류를 포착하십시오. A Result You Can Trust TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your..