typescript 로드맵을 찾아보니 괜찮은 걸 찾지 못했습니다.
그래서 node나 php와 다르게, 공식문서 위주로 스터디를 했습니다.
아래 링크 원본입니다. 해석이 부족해도 양해 부탁드립니다..ㅎㅎ
www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#types-by-inference
```
타입 스크립트는 자바스크립트와 평범하지 않은 관계로 있습니다.
Ts는 자바스크립트의 모든 특징과 Ts의 타입 시스템과 같은 추가적인 단계를 제공합니다
예를 들어 Js는 string, number, object와 같은 기준요소를 제공하지만 Js는 당신이 지속적으로 이것들을 할당해왔는지 확인하지 않습니다. Ts는 합니다.
이는 당신의 작동하는 기존 Js 코드는 Ts code임을 의미합니다.
Ts의 주 강점은, 버그를 줄이기 위해 당신의 코드 속에서 예측하지 못한 행위를 강조하는 것입니다.
이 튜토리얼은 타입 시스템에 집중하는 Ts의 명확한 개요를 제공합니다.
인터페이스에 의한 type
Ts는 Js를 알고 있고, 다양한 상황 속에서 타입을 만들 것 입니다. 예를 들면 특정한 값을 만들고 지정할 때, Ts는 type값을 사용합니다
Js가 어떻게 돌아가는지 이해함으로써, TS는 type을 가진 Js시스템을 빌드할 수 있습니다. 이것은 type을 만들기 위해 추가적인 문자를 더하지 않고 type-system을 제공합니다. 그것은 위의 예에서 Ts가 hellow word가 string인지 인식하는 방식입니다
당신은 Vs code에서 Js를 써왔을 것이고, 자동 완성 에디터를 써왔을 것입니다. Vs code는 Js로 더 쉽게 작업할 수 있도록, 내부적으로 typescript를 사용합니다.
type 정의
당신은 Js에서 다양한 디자인 패턴을 사용할 수 있습니다. 그러나 몇몇 디자인 패턴은 타입 추론을 어렵게 만듭니다(예를 들면 동적 프로그래밍). 이 경우를 극복하기 위해, Ts는 type이 무엇이어야 하는지 정하는 공간을 제공하는 확장된 Js를 제공합니다.
예를 들어, name: string, id: number로 타입이 추론된 객체를 만들기 위해서, 당신은 아래와 같이쓸 수 있습니다.
당신은 interface 선언을 통해 명시적으로 이 객체를 묘사할 수 있습니다.
당신은 변수 이후에 :TypeName과 같은 문법을 사용함으로써 interface를 준수하는 Js 객체를 선언할 수 있습니다.
만약 당신이 제공되지 않은 interface로 객체를 사용할경우, typescript는 경고를 줄것입니다.
Js가 클래스와 객체지향 프로그래밍을 지원하기 때문에, Ts도 그렇습니다. 당신은 클래스 선언에도 interface를 사용할 수 있습니다
당신은 함수의 결과나 parameter에도 interface를 사용할 수 있습니다
이미 Js에도 interface에서 사용 가능한 Boolean, bigint, null, number, string, symbol, object, undefined과 같은 원초적인 type 세트가 있습니다.
Ts는 이 목록을 any(무엇이든 허용), unknown(이 type을 사용하는 사람이 type을 선언하는지 확인), never(이 type은 발생 불가), void(함수가 undefined나 없는 값을 리턴)들로 더 확장했습니다
당신은 interface와 type 구축을 위한 두 문법을 볼 것입니다. 당신은 interface를 선호해야 합니다. 당신이 특정 특징을 원하면, Type을 사용하세요.
Type 구성
Ts에서 당신은 간단한 결합을 통해 복잡한 type들을 생성할 수 있습니다. 주로 사용되는 두 가지 방식(Union, Generics)이 있습니다.
-Unions
Union을 사용하면, 당신은 여러 type이 될 수 있는 type을 선언할 수 있습니다. 예를 들면, 당신은 boolean type을 true나 false로 묘사할 수 있습니다.
Note: 만약 당신이 위 MyBool에 마우스를 갖다 대면, boolean으로 클래스화된 것을 볼 수 있습니다.
Union type이 주로 사용되는 경우는 값이 허용되는 string이나 number 세트로 묘사하는 것입니다.
union은 다른 type을 다루는 방식도 제공합니다. 예를 들면 array나 string을 다루는 function이 있을 수 있습니다.
변수의 유형을 배우기 위해서, typeof을 사용하세요.
Type |
Predicate |
string |
typeof s === "string" |
number |
typeof n === "number" |
boolean |
typeof b === "boolean" |
undefined |
typeof undefined === "undefined" |
function |
typeof f === "function" |
array |
Array.isArray(a) |
예를 들면 , 당신은 문자열이 통과되느냐 배열이 통과되느냐에 따라 다른 결과를 리턴하는 함수를 만들 수도 있습니다
-Generics
Generic은 type에 변수를 제공합니다. 공통된 예시는 배열입니다. Generics이 없는 배열은 무엇이든 담을 수 있습니다. Genercis이 있는 배열은 배열을 포함한 값들을 묘사할 수 있습니다
당신은 generics을 사용해 당신만의 type을 선언할 수 있습니다.
구조적인 type 시스템
Ts의 핵심 원리는 type확인은 값이 가진 모양에 집중하는데 있는 것입니다. 이것은 종종 duck typing이라 불리거나 structural typing이라 불립니다. Structural type 시스템에서, 만약 두 객체가 동일한 모양을 가지고 있으면, 그들은 동일한 type으로 간주됩니다.
point 값은 Point type을 선언하지 않았습니다. 그러나 Ts는 point와 Point의 모양을 비교합니다. 그들의 모양은 동일하기에, 코드는 통과됩니다.
모양 매칭은 객체 필드들의 하위 집합이 맞는지만 요구합니다
객체나 클래스가 모양을 준수하는 방식은 차이가 없습니다
만약 객체나 클래스가 요구된 속성을 모두 가지고 있으면, Ts는 부여된 상세내용과상관없이 그들은 맞다고 말할겁니다
```
'개발 > typescript' 카테고리의 다른 글
typescript docs 번역본 #4 (Literal types) (0) | 2021.01.25 |
---|---|
typescript docs 번역본 #3 (functions) (0) | 2021.01.20 |
typescript docs 번역본 #2 (interfaces) (0) | 2021.01.19 |
typescript docs 번역본 #1 (basic types) (0) | 2021.01.13 |
typescript를 시작하며 (0) | 2021.01.11 |