정도영 Tech-Blog 정도영 Tech-Blog

리액트나 뷰같은 프레임워크를 쓰지않고 순수 자바스크립트(타입스크립트)로 dom 조작을 하려면 셀렉터로 element를 찾아야하는데, 이 때 셀렉터에 인자로 넣은 id나 class 이름 또는 태그 이름이 없다면 해당 셀렉터가 null를 반환하는것은 모두 알고 있을것이다. 타입스크립트에서는 이 셀렉터가 null를 반환할 가능성이 있다면 이를 체크하게할 수 있다. 바로 패키지 내 tsconfig.json을 수정해준다. 저 strictNullChecks를 true로 설정해주면 앞으로 셀렉터로 요소들을 찾을 때 꼭 narrowing이나 assertion을 거쳐야만 경고가 없어지도록 강제할 수 있다. 저렇게 설정하고 셀렉터로 요소를 찾아서 변수에 할당해보자. 일반적으로 저렇게 에러가나는데, 그 이유는 narrowi..

지금까지 정리를 하자면, 이렇게 세가지 방법으로 함수에 파라미터와 return값의 타입을 지정해줄 수 있었다. 이제 함수 자체에 타입을 붙이는 법을 알아보자. 함수에 타입을 부착하려면 이렇게 alias를 만들고 함수 표현식으로 만들어진 함수에 타입을 붙여야한다. 또는 이렇게 화살표 함수에다 타입 alias을 붙일 수 있다. 그러나, 이렇게 함수 선언식으로 만들어진 함수에는 타입 alias를 붙일 수 없다. 즉, 함수를 외부에서 직접적으로 호출할 수 있는 식별자가 명시적으로 존재해야 함수에 타입 alias를 붙일 수 있다. 그러면 메소드(객체 안에 들은 함수)에 타입 alias를 붙이는 법을 알아보자. 일단 메소드는 이렇게 세 가지의 만드는 방법이 있다. 대충 각각 함수 선언문, 표현식, 화살표 함수와 비..

이렇게 변수를 만들 때 아예 타입 지정을 number나 string이 아닌 고유한 값으로 직접 지정해줄 수 있다. 이것을 literal types라고 한다. 이렇게 literal types로 타입을 정해주면 저 변수는 타입으로 정해진 저 값밖에 할당받지못한다. 이렇게 타입으로 지정받지않은 값이 할당되면 에러가 난다. 이 방법을 더 확장해서 이렇게 union 타입으로 특정 값의 범위 안에서만 받도록 지정도 가능하다. 여기서 이상한 점이 있는데, 이 방법은 에러가 난다. 왜냐면 함수 파라미터에는 'kim'이라는 타입의 변수를 요구하는데, 자료.name은 값만 'kim'일뿐 실질적인 타입은 'string'이기때문이다. 근데, 이건 또 작동한다. 여기서 알 수 있는 점은 const로 생성한 변수가 원시 타입을 ..

1) 객체의 타입을 지정할 때 이렇게 객체 선언과 할당 시 타입을 함께 써서 해당 객체의 타입을 지정해줄 수 있지만 이렇게도 가능하다. 즉, Animal이라는 타입을 먼저 리터럴로 지정하는것인데, 이것을 타입 alias라고한다. 그리고 이 타입 alias를 변수 선언 시 식별자 오른쪽에 지정해줄 수 있다. 또한 alias 작성 시 이름의 첫 글자는 대문자로 하는것이 일반적이다. 2) alias를 만들어줄 때 수정을 허용해주기싫은 프로퍼티에 readonly라는 속성을 넣어줄 수 있는데, 이러면 ts파일 안에서는 readonly 속성이 들어간 프로퍼티를 수정할 때 에러를 감지해줄 수 있다. 다만 실제 구동되는 js파일에서는 막지못한다. 3) 함수의 파라미터가 옵션의 속성을 가질 경우 ?를 쓸 수 있다고 했는..

1) 파라미터로 union 타입이 지정됐을 경우, 이렇게 typeof 함수로 각 타입이 들어올 경우 별로 로직을 만들어주는것을 narrowing이라고한다. 그 외, 이런 방법들이있는데, 특히 instanceof 함수는 뒤 포스트에 기술하겠지만, html 요소를 셀렉터로 찾아 dom을 조작하는 로직을 작성할 때 유용하다. 2) assertion은 역시 union 타입 파라미터를 가진 함수에서 받은 인자의 타입을 하나로 확정지어서 쓸 수 있게해준다. 핵심은 as 타입으로 타입을 확정해주는 assertion 방식은 그냥 타입을 하나로 확정해서 타입 쉴드의 작동을 막는것뿐이지, 실제로 타입을 as 뒤 타입으로 바꾸지않는다. 즉, 그냥 타입이 number라고 치고 넘어가게한 다음 뒤의 로직은 실제 타입대로 연산된..

1) typescript에서는 함수의 타입 지정을 아래와 같이 시행한다. typescript의 함수는 저렇게 파라미터 괄호에 파라미터의 타입을 지정해줄 수 있고, 그 옆에 return되는 변수의 타입을 또 지정해줄 수 있다. 여기서 중요한건 자바처럼 void 로 return 타입 지정이 가능하다는것이다. 물론 이렇게 화살표 함수로도 typescript 함수를 만들 수 있고, 함수 표현식으로도 가능하다. 중요한 점은 화살표 함수로는 return의 타입을 지정할 수 없다는 것.. 물론 그러한 문제는 밑 사진 처럼 함수 타입을 만들어서 함수 자체에 타입을 지정해주면된다. 참고로 사진에서 f1이라는 함수 타입은 소괄호 안에 들어가는 파라미터들의 타입과 화살표 오른편에 return의 타입을 써준다. 2) 파라미터..

1) 일단 두 타입은 모두 어떤 자료형이 할당될지 모를 때 임의로 사용하는 타입이다. unknown 타입과 any 타입은 모두 모든 자료형을 담을 수 있다. 하지만 any로 선언된 변수는 다른 자료형 타입을 가진 모든 변수에 할당되어질 수 있지만, unknown은 그럴 수 없다. 왜냐면 unknown은 어떤 자료형이 할당되든, 그 자체의 타입은 계속 unknown이기때문이다. 즉, any는 타입 실드를 무효화하지만 unknown은 모든 타입에대한 할당을 허용하되, 계속 unknown타입을 유지해 다른 타입 변수으로의 할당을 방지할 수 있다. 조금 더 까다롭기때문에 any보다 버그를 방지하기쉽다. 따라서 어떤 자료형이 할당될지 몰라 꼭 타입 미지정이라고 해줘야될 때 unknown이 any보다 좀 더 많이 ..