본문 바로가기

개발/typescript

typescript docs 번역본 #0

반응형

typescript 로드맵을 찾아보니 괜찮은 걸 찾지 못했습니다. 

그래서 node나 php와 다르게, 공식문서 위주로 스터디를 했습니다.

 

아래 링크 원본입니다. 해석이 부족해도 양해 부탁드립니다..ㅎㅎ

www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#types-by-inference

 

Documentation - TypeScript for JavaScript Programmers

Learn how TypeScript extends JavaScript

www.typescriptlang.org

 

```

타입 스크립트는 자바스크립트와 평범하지 않은 관계로 있습니다.

Ts는 자바스크립트의 모든 특징과 Ts의 타입 시스템과 같은 추가적인 단계를 제공합니다

예를 들어 Js string, number, object와 같은 기준요소를 제공하지만 Js는 당신이 지속적으로 이것들을 할당해왔는지 확인하지 않습니다. Ts는 합니다.

이는 당신의 작동하는 기존 Js 코드는 Ts code임을 의미합니다.

Ts의 주 강점은, 버그를 줄이기 위해 당신의 코드 속에서 예측하지 못한 행위를 강조하는 것입니다.

 

이 튜토리얼은 타입 시스템에 집중하는 Ts의 명확한 개요를 제공합니다.

 

 

인터페이스에 의한 type

TsJs를 알고 있고, 다양한 상황 속에서 타입을 만들 것 입니다. 예를 들면 특정한 값을 만들고 지정할 때, 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 부여된 상세내용과상관없이 그들은 맞다고 말할겁니다

```