본문 바로가기

TS

 (16)
TS - 유틸리티 타입 Partial: 타입의 필수 값들을 모두 옵셔널 값으로 변경해준다. ⇒ 전부 옵셔널이 되기 때문에 비추=> type P = { [Key in keyof T]?: T[Key]}interface Profile { name: string age: number married: boolean}const ha0: Profile = { name: 'ha0', age: 30, married: false}// 개인정보보호 등으로 일부만 사용할 경우const protectedHa0: Partial = { name: 'ha0', age: 30}Pick, Omit: 특정 타입에서 사용할 옵션들만 가지고 옴=> type P = { [Key in S]: T[Key]}=> type O = Pick>interface Profile ..
String(value) vs value.toString() String(value) 와 value.toString() 은 둘다 문자열로 변환하지만 차이점이 있다. String(value)String()은 값을 문자열로 변환하는 전역함수로, 모든 값에 대해 동작한다. console.log(String(123)); // "123"console.log(String(true)); // "true"console.log(String(null)); // "null"console.log(String(undefined)); // "undefined" value.toString()toString()은 객체나 값에서 호출할 수 있는 메서드로, 해당 값을 문자열로 반환하며, 객체가 가지고 있는 메서드이므로, 객체나 기본 데이터 타입에 대해 호출 할..
타입 좁히기 (타입가드, 커스텀 타입가드) 타입 좁히기 (타입가드)function numberOrStr(a: number | string) { if (typeof a === 'string') { a.split(',') } else { // 여기 타입이 string인 것 정도는 자동으로 파악해 줌 a.toFixed(1) }}function numberOrStr(a: number | string) { (a as number).toFixed(1); // 이렇게 형변환하면 타입에러가 안난다. // 하지만 타입스크립트만 안심시켰을 뿐, 자바스크립트에서는 사라지기 때문에 에러가 발생할 수 있다.}⇒ unknown이나 남이 만들어 놓은 타입이 틀렸을 경우를 제외하고는 as는 사용하지 말 것을 추천⇒ 타입가드를 사용해야 함클래스클래스는 타입이 될 수 있지만..
타입스크립트의 enum, const enum ⭐️⭐️⭐️ enum변수들을 하나의 그룹으로 묶고 싶을 때 사용 (주로 문자열 상수를 생성하는 데 사용됨) 위에서부터 순서대로 0, 1, 2, 3 … 이라는 값이 부여된다. 값을 사용할 수도 있고, 직접 타입으로도 쓸 수 있다.const enum EDirection { Up, Down, Left, Right,}const a = EDirection.Up; // 0const a = EDirection.Left; // 2const a = EDirection[3]; // Rightconst enum EDirection { Up = 3, Down, Left, Right,}const a = EDirection.Up; // 3const a = EDirection.Left; // 5enum vs object// js의..
Javascript VS Typescript 🧐 Typescript 란?자바스크립트 대용품 같은 언어로, 자바스크립트 문법을 그대로 이용하지만 타입을 지정하여 쓸 수 있는 일종의 자바스크립트 업그레이드 버전이라 할 수 있다.JavascriptTypescript.js 확장자.ts 확장자동적타입 언어정적타입 언어인터프리터 언어컴파일 언어독립적으로 사용 가능자바스크립트에 의존적임좀 더 유연함좀 더 엄격함작고 간단한 프로젝트에 적합함복잡한 프로젝트, 협업에 적합함🫨 동적타입 언어👉🏽 예측불가능, 직관적이지 않음, 너무 관대함1 + true;function multiply( a, b ) { return a * b;}multiply();muliply(’hi’, true);👉🏽  즉, 개발자의 실수로부터 보호하지 못한다!👉🏽  너무 관대하고 자유..
[TS] keyof 키워드, 타입변환기(mapping) 1. keyof 연산자keyof Object object타입이 가지고 있는 모든 key값을 union type으로 합쳐서 내보내준다.interface Person { age: number; name: string;}type PersonKeys = keyof Person; //"age" | "name" (리터럴)타입이 됨let a :PersonKeys = 'age'; //가능let b :PersonKeys = 'ageeee'; //불가능2. Mapped Typesobject내의 속성들을 다른 타입으로 한번에 변환하고 싶을 때 유용한 방법type Car = { color: boolean, model : boolean, price : boolean | number,}; 👇🏻 전부 string 타입..
declare & d.ts 파일 1. declare 키워드 : 변수 재정의일반 js파일 등에 있던 변수를 사용 시 에러나지 않도록 재정의할 때 사용declare let 변수 :타입;declare가 붙은 코드들은 js로 변환되지 않는다.👉🏻 컴파일러에게 힌트를 주는 역할의 코드이기 때문📌 tsconfig.json에서 allowJS: true로 설정하면 js파일도 타입지정이 알아서 implicit 하게된다.2. ambient modulets파일끼리 변수를 가져다 쓰고 싶을 경우, import/export해서 쓰면 되지만,ts파일은 __ambient module(글로벌 모듈)__이므로 ⭐️ import/export없이도 모든 ts파일에서 그냥 가져다 쓸 수 있다.📌 다른 파일에 영향을 끼치지 않기 위해 로컬모듈로 만들려면? __imp..
React(+Redux) + TypeScript 1. 설치신규설치: npx create-react-app 프로젝트명 --template typescript기존프로젝트에 설치: npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. tsx파일JSX문법이 있는 파일일 경우 tsx파일로!⭐️ JSX 타입지정let box :JSX.Element = ⭐️ component 타입지정 function Profile() :JSX.Element{ return ( 프로필입니다. ) }⭐️ props 타입지정function Profile(props :{name: string, age :string}) :JSX.Element{ return ( {..

티스토리툴바