본문 바로가기
반응형

타입스크립트5

구조적 타이핑(structural typing) 구조적 타이핑(structural typing) 자바스크립트는 덕 타이핑 기반이고 타입스크립트는 자바스크립트를 모델링하기 위해 구조적 타이핑을 사용한다. 타입스크립트의 구조적 타이핑을 이야기하려면 먼저 덕 타이핑을 알아야 한다. 덕 타이핑 덕 타이핑을 설명하기 위해 극단적인 예시를 들자면 어떤 새가 오리처럼 울고, 오리처럼 날면 오리라고 생각하는 것이다. 발이 3개더라도 구조적 타이핑 예시 구조적 타이핑은 구조와 정의에 따라 결정되는 타입 시스템인데, 요약하면 덕 타이핑으로 이해해도 된다. 어떤 새가 오리처럼 울고, 오리처럼 날면 오리라고 생각하는 것이다. 발이 3개더라도 위 문장을 생각한채로 아래 코드를 보자. interface NormalBirdType { sound: string; wings: st.. 2023. 9. 5.
타입스크립트로 TodoList 만들기, 교훈 : id는 고유할 뿐만 아니라 어디에도 의존되면 안된다. 레포지토리는 여기 기능 CRUD 완료된 항목과 미완료된 항목을 분리 추가해야하는 기능 항목의 id를 text로 했기 때문에 중복방지 기능을 추가해야한다. 겪었던 문제 : id가 배열에 의존되다보니, 항목을 수정,삭제했을때 엉뚱한 항목에 적용됨. 항목들을 CUD할 때, 항목들을 추적하는 방법으로 고유한 id를 이용했다. { id: 0, text: "강아지 산책", complete: true }, { id: 1, text: "코딩연습", complete: false }, { id: 2, text: "친구랑 놀러가기", complete: false }, 그리고 저 id는 항목이 추가될때마다 배열의 크기+1 로 설정하였다. const addNewTodo = (newTodo: string) => { const n.. 2022. 2. 6.
타입스크립트 Literal Type string, number 말고도 일반 글자도 타입이 될 수 있다. let name : "june"; let age : "28"; "june","28"이라는 타입을 만들었다. 그러면 name에는 "june", age에는 "28"만 할당할 수 있다. import React, { useState } from "react"; function App() { let name: "june" = "june"; let age: "28" = "28"; return ( {name} {age} {/* {내함수(자료.name)} */} ); } age에 문자열 28이 아닌, 숫자 28을 할당하면 타입에러가 나타난다. 코딩애플의 강의를 보고 있는데, const버전의 업그레이드라고 생각하면된다고 한다. const는 2개이상 저장.. 2022. 1. 14.
Typescript narrowing과 assertion 다음과 같이 union type으로 파라미터의 타입을 정해주었다. import React, { useState } from "react"; function App() { function plusFunc(x: number | string): void { return x + 1;//union type은 number가 아니기 때문에 type에러 발생 } return {plusFunc(3)}; } export default App; 타입이 숫자일땐 이거 문자일땐 저거 가 실행되도록 하려면 어떻게 할까?? 예상하겠지만 if문으로 해결할 수 있다. Narrowing 타입을 하나로 Narrowing해준다고 표현한다.(타입을 하나로 정해줌) import React, { useState } from "react"; fu.. 2022. 1. 14.
반응형

티스토리툴바