전체 글32 타입 가드 타입 가드원하는 타입으로 타입을 좁히기 위한 작업type Age = 'string' | 'number'function getAge(age: Age) { .. }이 경우 함수 파라미터로 문자열이 와야할까 숫자가 와야할까? 둘 다 올수있지만, 그렇다고 함수 안에서 age.length 이런 식으로 접근하면 에러가 발생한다. 그 이유는 age의 type이 확정되지 않았기 때문. 따라서, 아래와 같이 예외 처리를 통해 타입을 좁히는 것을 타입가드라고 한다....if (typeof age === 'string') { age.length; ....}typeof, instanceof이 연산자들을 타입 가드 연산자라고 한다.이외에도 커스텀 타입 가드 함수를 만들 수도 있다.function isString(age: str.. 2025. 4. 17. 데이터 바인딩 화면 상의 데이터(View)와, 웹 브라우저 메모리 상의 데이터(Model)의 정보를 묶어서(Binding) 일치시키는 것.즉, 동기화. 양방향 데이터 바인딩https://adjh54.tistory.com/49]정의 : JavaScript(Model) 과 HTML(View) 사이에 ViewModel 이 존재해서 하나로 묶여서, 둘 중 하나만 바뀌어도 같이 바뀌는 것. 대표적으로 Vue.js, Angular 가 이 방식이다.장점코드량이 줄어든다.복잡한 프로젝트일수록 코드량은 줄고, 유지보수가 용이해진다.단점변화에 따라 DOM 객체 전체를 렌더링하거나 데이터를 바꿔주므로 성능이 저하될 수 있다. (프레임워크가 계속 감시하다가 한쪽이 변경되면 이를 바로 반영하므로 별도 체크가 불필요하다)단방향 데이터 바인딩[.. 2025. 4. 17. Type Assertion (as 사용법) Type Assertion타 언어의 타입 캐스팅이라고 봐도 되는데, 좀 더 포괄적이다.사용법const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;컴파일 단계에서 타입 검사를 할 때, 타입 스크립트가 감지하지 못하는 애매한 타입 요소들을 직접 명시해주는 키워드. (런타임 단계에서는 as가 삭제된다)만약 as 가 없다면, 타입스크립트는 myCanvas 가 여러개의 HTMLElement 중 어느 하나를 가진다고 대충만 알게 된다.이렇게만 보면 대체 왜 쓰는건지 감이 잘 안 온다.why?컴파일러보다 개발자가 해당 타입을 확신할 때.JS 기반 코드에다가 점진적으로 TS 를 적용할 때.interface Hero { name: st.. 2025. 4. 16. type vs interface Type Aliases타입 스크립트에서 타입 별칭 사용하기// string 타입을 사용할 때const name: string = 'capt';// 타입 별칭을 사용할 때type MyName = string;const name: MyName = 'capt';type Developer = { name: string; skill: string;}type User = { name: T}간단한 자료형부터 인터페이스, 제네릭에도 적용 가능하다.타입 별칭은 정의한 타입에 대해 나중에 참고하기 쉽도록 별명을 붙이는 작업이다.그냥 type을 앞에 붙이면 됨.type alias vs interfacetypeAliases 를 위해 앞서 본것 처럼 사용할 수 있다.나만의 type 을 생성한 뒤 alias 로 타입을 지정.. 2025. 4. 16. 타입 호환성 타입 호환타입스크립트 코드에서 특정 타입의 호환성을 의미한다. 아래코드는 타 언어였다면 바로 에러가 일어났을 것이다.interface Ironman { name: string; }class Avengers { name: string; }let m: Ironman;m = new Avengers();하지만 JS는 기본적으로 객체 리터럴, 익명함수 등을 사용하므로 명시적인 타입 지정보다 코드의 구조 관점에서 타입을 지정하는 것이 나은 편이다. 구조적 타이핑코드 구조 관점에서 서로 호환되는지를 판단하는 것.interface Avengers { name: string;}let hero: Avengers;// 타입스크립트가 추론한 타입은 { name: string; location: string; } 입니다.le.. 2025. 4. 15. 타입 추론 타입 추론타입스크립트가 코드를 해석해나가는 동작기본적으로 변수 선언 및 초기화 시 타입 추론이 일어난다.변수, 속성, 인자 기본 값, 함수 반환값 등 설정 시에도 일어난다.Best Common Type타입 추론 시, 몇 개의 코드를 바탕으로 추론하여 가장 근접한 타입으로 추론하게 된다.let x = [1, 2, null] 같은 경우 숫자형, 널 이렇게 구분되고, 이 때 Best common type 알고리즘에 의해 가장 호환성 높은 타입으로 추론된다.타입 체킹에 있어, 타입스크립트는 값의 형태에 기반하여 판단한다.Duck Typing객체 변수 및 메서드 집합이 객체의 타입을 결정한다. (동적 타이핑)Structural Subtyping객체의 실제 구조나 정의에 따라 타입을 결정한다.문백상의 타이핑타입스크.. 2025. 4. 15. 이전 1 2 3 4 ··· 6 다음
