typescript9 type, interface 차이 type 키워드와 interface 키워드는 용도와 기능이 거의 똑같은데 , extends 문법과 적용되는 방식이 약간 다름. 주목할 만한 차이는 1. 속성의 타입이 중복 될 때 interface 는 "상속한다" 라는 의미이고 type 은 "앞의 타입도 만족하고 뒤의 타입도 만족한다." 라는 뜻. 속성의 타입이 중복될 때 이 차이가 명확히 드러나는데 , interface 는 코드 작성시에 에러를 내주지만 type 은 코드 작성시에 에러를 내주지 않고 name이 never 타입이 된다 . (string 이면서 number 여야 하므로.) 2. 타입 이름을 중복 선언 할 때 interface 는 타입 이름 중복선언을 허용하며, 중복시에 extends 한 것과 동일하게 동작함. 위의 경우 Animal 은 {n.. 2022. 6. 13. class 문법 타입 지정 필드값 타입 지정 클래스를 만들때 constructor 밖에서 변수처럼 만들어주는 애들을 필드값이라고 하는데 let, var, const 이런거 필요없음. 이렇게 해두면 Person 클래스의 인스턴스들이 모두 data=0; 을 갖다 쓸수 있음. 타입지정은 다음과 같이, constructor 타입 지정 자바스크립트에서는 constructor 를 쓸 때 이렇게 해도 에러가 안나지만 타입스크립트에선 이렇게 쓰면 에러남. this.name 에 마우스를 올려보면 다음과 같은 에러를 띄워준다. Property 'name' does not exist on type 'Person'.ts(2339) 타입스크립트에선 필드값에 name, age 가 미리 정의 되어 있어야 사용가능. constructor는 함수이기 때문에 c.. 2022. 6. 13. HTML Dom narrowing tsconfig.json 에서 "strictNullChecks" : true 나 "strict": true 옵션을 설정하면 이런 널 값을 잡아주는데, 특히 html 조작할때 셀렉터로 찾으면 null 값이 많이 발생함. 이거 잡을때 특히 유용. 쨋든 여기서 에러가 나는 이유는 셀렉터로 html 을 찾으면 타입이 Element | null 이라서 그럼. 왜냐면 html 못찾아내면 null 이 되기 때문. 이걸 해결하려면 여러 방법이 있는데 1. 그냥 narrowing 을 해준다. 2. instanceof 를 사용해서 narrowing을 해준다. 3. assertion 을 쓴다. 4. optional chaining( 옵셔널 체이닝 )을 쓴다. 5. 그냥 strict 옵션을 끈다. 5가지 방법중 2번의 방법이.. 2022. 6. 10. 함수, 메서드에 타입달기 1.함수에 직접 타입달기 입력값(파라미터), 출력값 (리턴값) 에 함수에서 직접 타입 달기. 2.함수 타입을 따로 작성해서 달기 - type 키워드 type 키워드를 이용해서 따로 함수타입을 지정할때는 함수선언문을 쓸수 없음. 함수선언문에는 type 키워드 이용 불가. 함수표현식에다가 함수타입을 할당해주면 되는데 함수타입을 작성할때는 화살표함수를 써야함. 3.메서드에 타입달기 예제에 plusOne 과 sayHello 라는 메서드가 있는데 리턴할게 없는 메서드나 함수는 void 2022. 6. 10. as const 문법 "kim" 이라는 리터럴 타입만 파라미터로 들어올 수 있는 함수를 만들었습니다. object 의 프로퍼티를 넣고싶습니다. 근데 타입스크립트가 에러를 냅니다. 왜냐면 함수는 파라미터 a 에 "kim" 타입을 입력할수 있다고 해놨는데 varObject.name 은 string 타입이지 "kim" 타입이 아니기 때문입니다. 이걸 해결하려면 1. object 만들때 타입을 미리 잘 정한다. 2. type assertion 을 쓴다. ( as "kim") 3. as const 를 객체에 붙인다. 객체에 as const 붙이면 에러 없어짐. as const 는 효과가 2개인데, 1. 타입을 object 의 value 로 바꿔준다. (name 의 타입을 "kim" 으로 바꿔준다.) 2. object 안에 있는 모든 .. 2022. 6. 10. type 키워드 파헤치기 Type Alias (타입 별칭) 코드를 짜다보면 매우 길고 복잡하게 타입을 나열하게 될때가 있음. 예를들면, 이렇게 길고 복잡하게 쓰게되면 나중에 내가 다시 보거나 다른 사람이 보기에 가독성이 떨어질수 있음. 이거대신 , 이렇게 타입을 변수 생성하듯이 생성해서 부여해주면 , 1. 가독성이 높아짐, 2. 만들어둔 타입을 재사용 할 수 있음. 일반 자바스크립트 변수랑 헷갈리지 않기 위해 보통 관습적으로 1. 대문자로 시작한다. 2. Type 을 붙인다. - readonly 키워드 object 자료형은 const 키워드로 만들어도 프로퍼티 변경이 가능한데 이유는 const 는 재할당을 막아줄 뿐이지(참조주소 변경 방지) 그 안에 있는 프로퍼티 변경에 대해선 관여하지 않기 때문. object 속성을 변경할때 .. 2022. 6. 10. 이전 1 2 다음
