타입스크립트 기본 : TypeScript

타입스크립트 TypeScript

: 기본 자바스크립트 문법에 타입을 가미한 것

뭔가 파란색을 써야할 것 같ㅇ ㅏ 

자바스크립트	타입스크립트
동적 타입 언어	정적 타입 언어
인터프리터 언어	컴파일 언어(자바스크립트로 컴파일됨)
런타임 단계에서 오류 발견	컴파일 단계에서 오류 발견

 

자바스크립트 => 동적 타입 언어로 코드를 실행했을 때인 런타임 단계에서야 오류를 발견할 수 있다

타입스크립트 => 정적 타입 언어, 컴파일 단계에서 타입을 검사하기 때문에 실행 전 오류를 발견할 수 있다

인터프리터 언어가 아닌 컴파일 언어이다

 

동적 타입 : 변수의 타입이 런타임 시점에 결정되는 것

인터프리터 언어 : 코드를 한줄한줄 읽어가며 바로 명령을 처리하며 컴파일 변환 없이 바로 사용되는 언어

 

타입스크립트는 결국 자바스크립트로 컴파일해서 사용하는 것이다.

 

타입스크립트는 자바스크립트의 슈퍼셋

=> 자바스크립트의 모든 기능을 사용 가능하며, 타입스크립트의 추가적인 기능을 사용 가능하다

 

 

타입 추론

변수를 생성하면서 동시에 특정 값에 할당하는 경우, Typescript는 그 값을 해당 변수의 타입으로 사용한다.

인터페이스를 통해 객체의 형태를 명시적으로 나타낼 수 있다

 

해당 인터페이스에 맞지 않는 객체를 생성하면 에러가 발생한다

 

 

유니언 

스트링이거나 스트링 배열이라는 유니언을 적용해 골라낼 수 있다

 

 

제네릭

타입 자체에 변수를 제공한다

example이라는 함수는 arr이라는 변수의 타입을 NumberArray로 받는데 123이라는 number가 들어갔으므로 에러가 발생한다

 

구조적 타입 시스템 : 덕 타이핑

두 객체가 같은 형태를 가지면 같은 것으로 간주된다

TypeScript is a Structural Type System.
A structural type system means that when comparing types, TypeScript only takes into account the members on the type.

TypeScript의 타입 호환성은 구조적 서브 타이핑(subtyping)을 기반으로 합니다. 구조적 타이핑이란 오직 멤버만으로 타입을 관계시키는 방식입니다. 명목적 타이핑(nominal typing) 과는 대조적입니다. 다음 코드를 살펴보겠습니다:

 

그러니까

TypeScript의 구조적 타입 시스템의 기본 규칙은 y가 최소한 x와 동일한 멤버를 가지고 있다면 x와 y는 호환된다

그러니까 봐봐

여기서

sphere는 ball이 될 수 있고 ball은 sphere가 될 수 있다

둘 다 number 타입의 diameter를 갖고 있으니까 구조적 타입 시스템에서는 둘을 같은 것으로 인지하는 것

 

그런데 만약

tube에 length를 추가하면

tube는 length를 갖고 있어야 하는데 ball 이라는 놈은 length가 없고 diameter만 있으니까 tube에 ball을 할당할 수 없어

있어야 하는게 없우니까!

근데 반대는 돼 없어도 되는게 있는건 된대

 

호환성을 검사할 때는 오직 대상 타입의 멤버(이 경우는 Named)만 고려된다.

 

형태 일치에는 일치시킬 객체의 필드의 하위 집합만 필요하다!

 

타입 시스템이 객체의 프로퍼티를 체크하는 과정을 수행해줌으로써, 명목적 서브타이핑과 동일한 효과를 내면서도 개발자가 상속 관계를 명시해주어야 하는 수고를 덜어준다. 타입 간에 상속 관계를 명시할 필요가 없다

만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.

 

 

 

 

 

참고자료

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

https://www.typescriptlang.org/ko/docs/handbook/type-compatibility.html

https://toss.tech/article/typescript-type-compatibility