본문 바로가기
728x90
반응형

Frontend/TypeScript9

[TypeScript] TypeScript 유틸리티 타입 - 6 유틸리티 타입? - 지금까지의 타입 조작기능 (제너릭, 맵드, 조건부 타입 등)을 이용해 실무에서 자주 사용되는 유용한 타입을 모아놓은 기능 - https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 맵드 타입 기반 Partial - 특정 객체 타입의 모든 프로터티를 선택적 프로퍼티로 바꿔주는 타입 // Partial interface Post { title: string; tags: string[]; content: string; thumbnailURL?: strin.. 2024. 4. 19.
[TypeScript] TypeScript 타입 조작 기능 - 5 타입 조작이란? - 이미 할당 된 기본 타입, 별칭, 인터페이스 타입들을 새로운 타입으로 변환할 수 있는 타입스크립트 문법 타입 조작 기능 - 제너릭 - 인덱스드 엑세스 타입 - keyof 연산자 - Mapped(맵드) 타입 - 템플릿 리터럴 타입 - 조건부 타입 제너릭 - https://sillimmouse.tistory.com/75 인덱스드 엑세스 타입 - 객체, 배열, 튜플에서 특정 프로퍼티 혹은 요소의 타입을 추출하는 타입 - 대괄호 속에 들어가는 String Literal 타입인 “author” 를 인덱스라고 하며 인덱스를 이용해 특정 타입에 접근하다고 하여 인덱스드 엑세스 타입라고 한다. - 인덱스에는 값이 아니라 타입(기본타입, 리터럴 타입 등)만 가능하다. // 인덱스드 엑세스 타입 // .. 2024. 4. 17.
[TypeScript] TypeScript 인터페이스/클래스/제너릭 타입 이해 - 4 인터페이스란? - 자바스크립트에서는 사용하지 않는 타입스크립트 문법 - 변수 나 함수 , 그리고 클래스 가 만족해야하는 최소 규격을 지정할 수 있게 해주는 도구 인터페이스 기본 문법 - 타입 별칭과 동일한 타입을 지정하는 방법 중 하나로 c, java 의 인터페이스 처럼 작성하는 방법 - 선택적 프로퍼티, 읽기전용 프로퍼티가 가능하다. - 매개변수, 반환값을 포함한 메서드 오버로딩 타입 지정도 가능하다. - 대신, 별칭 처럼 | 연산자를 사용하여 인터페이스를 여러개 지정할 수는 없다. // 인터페이스 interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number): void; sayHi(a: number, b: .. 2024. 4. 14.
[TypeScript] TypeScript 함수 타입 이해 - 3 함수 타입 - 매개변수, 반환값 타입 지정이 필요하다. - 매개변수 필수 값이 아닌 경우 ? 를 사용하여 체크 할 수 있지만, 필수값 매게변수랑 값이 사용 시 필수값 뒤에 위치해야 한다. // 함수 타입 기본 정의 function func(a: number, b: number): number { return a + b; } const add = (a: number, b: number): number => a + b; // 함수의 매개변수 function introduce(name: string, age: number, tall?: number) { console.log(name); if (typeof tall === "number") { console.log(tall + 10); } } introduce.. 2024. 4. 14.
[TypeScript] TypeScript 타입 시스템 이해 - 2 타입 스크립트 원리 이해 타입 정의 기준 타입 관계 정의 기준 오류 검사 기준 타입 호환성 - 동일한 속성을 갖는 집합을 타입이라고 한다. - 어떤 타입을 다른 타른으로 변경해도 집합 안의 값인지 판단하는것을 타입 호환성이라고 한다. - 타입 호환성은 교집합 내에 판단한다. 예) 2, 0, -10, 0.123, Infenitiy 슈퍼 타입, 서브 타입 - 슈퍼 타입 : Down Cast(다운 캐스트)으로 변경될수 있는 타입 - 서브 타입 : Down Cast(다운 캐스트)으로 변경될수 없는 타입 *Down Cast(다운 캐스트) : 슈퍼 타입의 값을 서브타입으로 변경하는것, 변경여부가 상황따라 다르다. *Up Cast(업 캐스트): 서브타입의 값을 슈퍼타입으로 변경하는 것, 무조건 변경이 가능하다. //.. 2024. 4. 14.
[TypeScript] TypeScript 기본 문법 - 1 원시타입, 리터럴타입 원시 타입 - 하나의 값만 저장하는 타입 - 예) number, string, boolean, null, undefined // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = "hello"; let str2: string = "hello"; let str3: string = `hello`; let str4: string = `hello ${.. 2024. 4. 14.
React+TypeScript와 브라우저 실행 원리 개요React 프로젝트에서 TypeScript를 사용하면 컴포넌트 단위로 정적 타입 검사를 수행할 수 있어 코드 안정성과 가독성이 높아집니다. 그러나 브라우저는 TypeScript를 직접 실행할 수 없기 때문에, 개발자는 TypeScript 코드를 먼저 JavaScript로 컴파일해야 합니다.이 문서에서는 브라우저의 JavaScript 엔진이 해석 가능한 ECMAScript 형식으로 변환되는 과정을 알아봅니다. TypeScript 동작 원리typescript는 브라우저에서 읽을 수 있는 코드가 아니다. typescript는 타입체크 역할만 하고, 실제 트랜스파일러가 동작할때 typescript코드를 javascript로 변환하여 사용한다.Typescript → AST(추상 문법 트리) → 타입 검사 → .. 2024. 4. 12.
TypeScript 생태계: 프레임워크, 라이브러리, IDE 한눈에 보기 개요IDE, 프레임워크, 라이브러리들이 typescript를 지원하며 타입스크립트 생태계를 가지고 있습니다. TypeScript를 지원하는 프론트엔드 프레임워크React, Vue, Angular 등 프레임워크에서 개발 환경 지원한다.예) 타입스크립트와 리액트를 접목하여 jsx 문법에 타입 시스템 지원const App: React.FC = ({}) => {} TypeScript 지원하는 라이브러리Webpack, Babel, jest, eslint 등 다양한 라이브러리에서 typescript를 지원합니다."@types/react": "^17.0.16","@types/react-dom": "^17.0.9","@types/react-router-dom": "^5.1.8","@types/styled-compon.. 2024. 4. 12.
TypeScript 기본 개념 | tsconfig.json 타입스크립트(TypeScript)란?2012년 마이크로소프트가 발표한 JavaScript를 기반으로 타입 관련 기능을 추가한 프로그래밍 언어입니다. JavaScript언어 + 타입 시스템, 컴파일러 등 기능 제공합니다. 목표 : 자바스크립트 언어를 그대로 사용하되, 더 안전하게 사용할 수 있게 안정성을 높히다. // javascriptlet a = 1;let b = 2;console.log(a+b);// typescriptlet a:number = 1;let b:number = 2;console.log(a+b);TypeScript 탄생 배경1. 자바스크립트 한계점동적 타입 시스템은 유연하고, 빠르고, 간결하게 코드를 작성한다는 장점이 있지만, 런타임 시에 예상치 못한 문제를 발생하게 될 수 있다.타입 시.. 2024. 3. 29.
728x90
반응형

티스토리툴바