TypeScript (13) 타입 좁히기 (타입가드, 커스텀 타입가드) 타입 좁히기 (타입가드)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는 사용하지 말 것을 추천⇒ 타입가드를 사용해야 함클래스클래스는 타입이 될 수 있지만.. 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 ( {.. [TS] Generic, 조건부 타입지정 아래와 같이 파라미터를 가변적으로 받고싶은 함수가 있을 경우, 파라미터를 unknown타입으로 받고 있기 때문에 return값인 파라미터[0]도 unknown타입이 되어 연산 시 에러가 발생한다. function 함수(x :unknown[]) { return x[0] } let a = 함수([4,2]) // 해결법은 narrowing !하지만, narrowing이 불편하고 귀찮다면? Generic함수 만들기(파라미터로 타입을 입력하는 함수)Generic함수선언시점이 아닌 __생성시점__에 __타입을 명시__하여 가변적으로 타입을 사용할 수 있게 한다.즉, 함수의 파라미터로 타입을 입력가능하게 함 funcion 함수명(){}한번의 선언으로 다양한 타입에 재사용 가능이때 타입 파라미.. [TS] Narrowing & Assertion 1. Narrowing타입스크립트에서 애매한 타입을 다룰 때 타입을 하나로 정해주는 것을 뜻한다.(일종의 코딩 방식 중 하나)typescript는 타입을 엄격히 다루기 때문에, 아래와 같은 함수는 에러를 발생시킨다.이유는 x라는 파라미터는 union타입이기 때문에 연산할 수 없기 때문. 👉🏻 union type 등 때문에 어떤 변수 타입이 아직 불확실하다면 if문 등으로 Narrowing(타입확정)해줘야 조작가능하다.if문은 끝까지 써야 안전하다. ⭐️ Narrowing으로 판정해주는 문법들typeof 변수, 속성명 in 오브젝트자료, 인스턴스 instanceof 부모 type Fish = {swim :string} type Bird = {fly :string} // ** 오브젝트 자료 배타속.. [TS] interface, index signature 1. interface 문법interface키워드로도 타입변수를 생성할 수 있다.interface 인터페이스명 { key :type }type alias와 용도와 기능이 같다.=interface Square { color :string, width :number }type Square = { color :string, width :number }2. interface의 장점⭐️ extends로 복사가능 interface Person { name :string } interface Student extends Person { age :number } let student :Student = {name:'kim', age:20}⭐️ implements 키워드 사용가능 (class 타입체크기능?)cla.. 이전 1 2 다음
