목록개발 Web/TypeScript (9)
음악, 삶, 개발
typescript 는 switch 같은것을 조건 type 에 사용할수없어서 위와 같이 nest 해서 표현해야함.
일일히 짜증나게 setter 를 만들어내는것보다는, 하나의 setter 를 만들려고했다. 생각보다 매우 간단하게 만들수있었다. IFoo 가 필요하지않을 방법도 있을거같긴한데, 일단 이 방법도 좋아보인다.
나는 아래의 데이터를 가지고있었고 const data = [ { arr: [1, 2] }, { arr: [3, 4] }, { arr: [5, 6] }, { arr: [7, 8] } ] 결과적으로 1d 배열을 얻고싶었다. const arr1d = [1, 2, 3, 4, 5, 6, 7, 8] 이때 map 과 concat 을 섞어서 사용하게되는데, 반드시 concat 의 시작 배열에 as number[] 로 type 을 명시해줘야한다. /* https://github.com/microsoft/TypeScript/issues/36769 */ const arr1d = ([] as number[]).concat (...data.map (item => item.arr))
Class 를 만들다보면 constructor 의 인자로 어떠한 type 이 넘어올지 알수없다거나, 여러 type 들이 넘어올수있게끔 허용하고싶다. 물론 자바스크립트에서는 type 이 없으므로 어떠한 것이든 넘길수있지만, Typescript generic class 를 사용함으로써 넘겨진 인자의 type 을 추후 개발하면서 체크할수있게된다. 문법은 클래스명에 를 붙여주고, 인자명에 T 를 붙여줘야한다. class Foo { constructor (public content: T) {} } new Foo ("one").content // string new Foo (["one"]).content // string[] new Foo (1).content // number new Foo ([1]).conten..
https://velog.io/@vlwkaos/Structural-vs-Nominal-Subtyping-그리고-TypeScript https://michalzalecki.com/nominal-typing-in-typescript/ https://stackoverflow.com/questions/26810574/is-there-a-way-to-create-nominal-types-in-typescript-that-extend-primitive-types C++ 같은 경우 클래스 이름으로 타입을 결정하는 nominal typing 이다. 반면 Typescript 는 클래스의 내부 구조가 동일할시 동일한 타입으로 인식하는 strutual typing 을 사용한다. class A { name = "hello" ..
const enum 을 자주 사용하는데, 이 const enum type 에서 몇몇의 property 를 제외한 새로운 type 을 Exclude 를 통해 만들어낼수있다. const enum Foo { ONE, TWO, THREE } type Hoo = Exclude const hooA: Hoo = Foo.ONE // error const hooB: Hoo = Foo.THREE // ok 이 Exclude 를 실전에서 사용하게된 이유는, 디바이스의 파라미터들이 있었는데, parameter lock 기능을 제공하기위해 특정 parameter 들은 제외되어야했기때문이다. color 같은 경우는 굳이 lock 기능이 필요없는 파라미터였다. 따라서, 아래와 같이 작성이 되었다. const enum Paramet..
객체는 복사하지않는 이상, 대입할 경우 reference 임을 우리는 알고있다. 하지만 막상 개발을 하고 앱이 굉장히 커지면 reference 를 value 라고 착각하는 바보같은 실수를 하게된다. 방금 내가 한 실수로 인해, 3시간동안 디버깅한 결과 경우 실수를 찾아냈다. 아래와 같은 경우였다. const DEFAULT_VALUES = [1, 2, 3] class Foo { public values = DEFAULT_VALUES // 여기가 문제!!!!!!!!!!! public setValue(index: number, value: number): void { this.values[index] = value } } const f1 = new Fo..
poiemaweb.com/typescript-interface /* js */ const man = { name : 'lee' } const woman = { name : 'jeong' } 위의 코드가 JS 의 약점을 보여준다. 이 둘은 똑같이 Object 타입이다. 이 둘을 코드상에서 구분하는 방법은 아마도 변수명 + 코멘트일것이다. TS 에서는 Object 를 더 세부 타입으로 분류하게 해준다. 이때 사용하는 키워드가 interface 이다. /* ts */ interface Man { name : string } interface Woman { name : string } const man: Man = { name : 'lee'} const woman: Woman = { name :..
youtu.be/VJ8rvsw2j5w 나는 작년에 C++ 를 4개월간 공부했었다. C++ 는 극도로 type 에 예민한 언어인 반면, JS 는 type 을 완전히 무시할수있는 언어이다. 따라서 C++ 에서는 상상도 못할 아래와 같은 미친 대입이 가능하다. /* test.js */ let a a = 1 // a is now number a = 'one' // a is now string a = true // a is now boolean a = [] // a is now array a = {} // a is now object 따라서 JS 로 코딩할때는, "이 변수에 number 대신 array 를 대입할 일은 없을거야..." 라는 심약한 생각으로 코..