hansanghyeon / getting-started Goto Github PK

트리플-슬래시 지시자는 단인 XML 태그가 포함된 한 줄 주석입니다.
주석의 내용은 컴파일러 지시자로 사용됩니다.

트리플-슬래시 지시자는 포함된 파일의 상단에서만 유효합니다.
트리플-슬래시 지시자는 다른 트리플-슬래시 지시자를 포함하여 한 줄 또는 여러 줄 주석 앞에 붙을 수 있습니다.
문 또는 선언 뒤에 나오는 경우 보통의 한 줄 주석으로 간주하며 특별한 의미는 없습니다.

이번 섹션에서는 모듈에 대한 몇가지 기본 지식을 전제로합니다. 자세한 내용은 모듈을 참조하세요

모듈 resolution은 import가 무엇을 참조하는지 파악하기 위해 컴파일러가 사용하는 프로세스입니다.
import { a } from "moduleA" 와 같은 import 문을 고려하세요.

a 의 사용을 검사하기 위해서는 컴파일러는 그것이 무엇을 의미하는지 정확히 알아야 하며 그것의 정의인 moduleA 를 검사해야 할 필요가 있습니다.

이때 컴파일러가 "moduleA 의 형태가 무엇입니까?"라고 묻습니다.
이것은 간단하게 들릴지 모르지만 moduleA 는 자신의 .ts / .tsx 파일들 중 하나 또는 사용자의 코드가 의존하는 .d.ts 파일 중 하나에서 정의될 수 있습니다.

먼저 컴파일러는 가져온 모듈을 나타내는 파일을 찾습니다.
이렇게하기 위해 컴파일러는 다음 두 가지 전략 중 하나를 따릅니다. 클래식 또는 노드.
이 전략은 컴파일러에게 moduleA 를 찾을 위치를 알려줍니다.

그래도 작동하지 않고 모듈 이름이 관련이 없는 경우 ("moduleA" 의 경우에는) 컴파일러 ambient module declaration 을 찾으려고 시도할 것입니다.
다음에는 Non-relative imports에 대해 다룰 것입니다.

마지막으로 컴파일러가 모듈을 해석하지 못하면 오류를 기록합니다.
이 경우 오류는 오류 TS2307 : 모듈 'moduleA'을 찾을 수 없습니다.

소프트웨어 공학의 주요 부분은 명확하고 일관된 API 를 가질뿐만 아니라 재사용 가능한 컴포넌트를 구축하는 것입니다.
현재의 데이터 뿐만 아니라 미래의 데이터에 대해서도 처리할 수 있는 컴포넌트는 대형 소프트웨어 시스템 구축을 위한 가장 유연한 기능을 제공할 것입니다.

C# 및 Java 와 같은 언어에서 재사용 가능한 컴포넌트를 만들기 위한 주요 도구 중 하나는 제네릭 즉 단일 타입이 아닌 다양한 타입을 처리할 수 있는 컴포넌트를 만드는 것입니다.

• 함수
• 함수의 타입
  • 함수 작성하기
  • 함수 타입 작성하기
  • 타입 추론
• 선택적 매개변수와 기본 매개변수
• 나머지 매개변수
• this
  • this와 화살표 함수
• 오버로드

🔔계획

TypeScript의 타입 호환성은 구조적 하위 타입을 기반으로 합니다.
구조적 타이핑은 멤버에 따라 타입을 관계시키는 방법입니다.
이것은 이름뿐인 타이핑과 대조적입니다.

https://github.com/Hansanghyeon/study/blob/4270b51d70cb34f14b7e5a6f87593ee7ef2044c6/leetcode/2.add-two-numbers.js#L1-L49

출처 https://leetcode.com/problems/add-two-numbers/

ECMAScript2015에서 시작된 symbol은 number와 string같은 primitive 데이터 타입입니다.

symbol 값은 Symbol 생성자를 호출하여 생성됩니다.

let sym1 = Symbol();
let sym2 = Symbol("key");  // 선택적 문자열 키

심볼은 불변이며 고유합니다.

let sym2 = Symbol();

let obj = {
  [sym]: "value",
};

console.log(obj[sym]);  // "value"

심볼을 계산된 프로퍼티 선언과 결합하여 객체 프로퍼티와 클래스 멤버를 선언할 수도 있습니다.

const getClassNameSymbol = Symbol();

class C {
  [getClassNameSymbol]() {
    return "C";
  }
}

let c = new C();

let className = c[getClassNameSymbol]();  // "C"

• boolean
• number
• string
• array
• tuple
• enum
• any
• void
• null & undefined
• never
• type assertions
• let memo

TypeScript 의 고유한 개념 중 일부는 타입 레벨에서 JavaScript 객체의 형태를 설명합니다.
특히 TypeScript에서의 고유한 예로는 '선언 병합'이라는 개념이 있습니다.
이 개념을 이해하는 것은 기존 JavaScript 를 사용할 때 이점을 제공할 것입니다.
또한 고급 추상화 개념에 대한 문을 열어줍니다.

"선언 병합"은 컴파일러가 동일한 이름으로 선언된 두개의 독립된 선언을 하나의 정의로 병합하는 것을 의미합니다.
이 병합된 정의에는 원래 선언의 두 가지 기능이 있습니다.
어떠한 수의 선언이든 병합할 수 있습니다. 단지 두 가지 선언에 제한되지 않습니다.

TypeScript 2.3 및 이후 버전에서는 --checkJs를 사용하여 .js 파일에서 타입 검사 및 오류 보고 모드를 지원합니다.

일부 파일에 // @ts-nocheck 주석을 추가하여 검사하는 것을 건너뛸 수 있습니다.
반대로 --checkJs를 설정하지 않고 // @ts-check 주석을 추가하여 몇개의 .js 파일 만 검사하도록 선택할 수 있습니다.
앞 줄에 // @ts-ignore를 추가하여 특정 라인의 오류를 무시할 수도 있습니다.

다음은 .ts 파일에서 .js 파일로 작업하는 방법에 주목할만한 차이점입니다.

🤔문제

function someFunction(n) {
  for(var i = 0; i<n*1000; i++) {
    for(var j = 0; j<n*20; j++) {
      console.log(i+j);
    }
  }
}

TypeScript 와 ES6의 클래스가 도입됨에 따라 클래스 및 클래스 멤버에 어노테이션 또는 변경을 지원하기 위해 추가적인 기능이 필요한 일부 상황이 있습니다.
데코레이터는 클래스 선언과 멤버에 대한 어노테이션과 메타-프로그래밍 구문을 모두 추가할 수 있는 방법을 제공합니다.
데코레이터는 JavaScript 의 stage 2 제안이며 TypeScript 의 실험적인 기능으로 사용할 수 있습니다.

주의사항 데코레이터는 향후 변경될 수 있는 실험적 기능입니다.

데코레이터에 대한 실험적인 지원을 사용하려면 커맨드 라인이나 tsconfig.json에서 experimentalDecorators 컴파일러 옵션을 사용하도록 활성화해야 합니다.

tsc --target ES5 --experimentalDecorators

# tsconfig.json
{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

정규표현식은 정교한 문자열 매칭 기능을 제공합니다. 이메일 주소나 URL, 전화번호처럼 보이는 문자열을 찾고 싶다면 정규표현식에 익숙해져야 합니다. 문자열 매칭을 하다보면 자연스레 문자열 교체도 자주 하게 되는데, 정규표현식에는 문자열 교체에 필요한 기능도 들어 있습니다. 예를 들어 이메일 주소처럼 보이는 문자열을 찾아 그 주소를 가리키는 하이퍼링크로 바꿀 수 있습니다.

정규표현식은 정규식이라고 부르기도 합니다.

용어에 대한 참고 사항: TypeScript 1.5에서는 명칭이 변경되었습니다.
"내부(internal) 모듈"은 이제 "네임스페이스"입니다.
"외부(External) 모듈"은 이제 ECMAScript 2015의 용어에 맞게 간단히 "모듈"입니다.
(즉 모듈 X { 는 현재 선회되는 네임스페이스 X { 와 동일합니다)

TypeScript 의 네임스페이스와 모듈을 사용하여 구성하는 다양한 방법을 설명합니다.
또한 네임스페이스와 모듈을 사용하는 방법에 대한 몇 가지 고급 주제를 살펴보고 TypeScript 에서 사용할 때 일반적인 몇 가지 함정을 다룰 예저입니다.

모듈에 대한 자세한 내용은 모듈의 문서를 참조하세요.
네임스페이스에 대한 자세한 내용은 네임스페이스 문서를 참조하세요.

🤔문제

function someFunction(n) {
  for (var i = 0; i < n * 10; i++) {
    console.log(n);
  }
}

전통적인 OO 계층 구조와 함께 재사용 가능한 컴포넌트로 클래스를 구축하는 또 다른 보편적인 방법은 더 간단한 부분의 클래스를 결합하여 클래스를 구축하는 것입니다.
여러분은 스칼라와 같은 언어에서의 믹스인이나 특성에 대한 사상에 익숙할 수 있으며 이 패턴은 JavaScript 커뮤니티에서도 인기를 얻고 있습니다.

열거형을 사용하면 이름이 있는 상수들을 정의할 수 있습니다.
열거형의 사용은 문서의 의도나 명확한 사례들을 쉽게 만들 수 있습니다.
TypeScript 는 숫자 및 문자열 기반 열거형을모두 제공합니다.

• 첫번째 인터페이스 (Our First Interface)
• 선택적 프로퍼티 (Optional Properties)
• 읽기 전용 프로퍼티 (Readonly properties)
  • readonly vs. const
• 프로퍼티 초과 검사 (Express Property Checks)
• 함수 타입 (Function Types)
• 인덱싱 가능 타입 (Indexable Types)
• 클래스 타입 (Class Types)
  • 인터페이스 구현 (Implementing an interface)
  • 클래스의 스태틱과 인스턴스의 차이점 (Difference between the static and instances sides of classes)
• 인터페이스의 확장 (Extending Interfaces)
• 하이브리드 타입 (Hybrid Types)
• 인터페이스 확장 클래스 (Interfaces Extending Classes)

🔔계획

🤔문제

function someFunction(n) {
  for (var i = 0; i < 1000; i++) {
    console.log("hi");
  }
}

• var 선언
  • README
  • 스코프 규칙
  • 변수 캡처링의 단점
• 'let 선언
  • README
  • 블록 스코프
  • 재선언과 Shadowing
  • 블록-스코프 변수 캡쳐
• const 선언
  • README
• let vs const
  • README
• 비구조화
  • README
  • 배열 비구조화
  • 객체 비구조화
    • 프로퍼티 이름 변경
    • 기본값
  • 함수 선언
  • 전개 연산자

🔔계획

전통적인 JavaScript는 재사용 가능한 컴포넌트를 만들기 위해 함수와 프로토 타입 기반의 상속을 사용하지만 클래스가 함수를 상속하고 객체가 이러한 클래스에서 구축되는 객체 지향 접근 방식에 익숙하지 않은 개발자들에게 다소 어색함을 느낄 수 있습니다.
TypeScript 에서는 개발자가 이 기술을 사용하고 다음 JavaScript 버전을 기다리지 않고도 모든 메이저 브라우저와 플랫폼에서 작동하는 JavaScript 로 컴파일 할 수 있습니다.

이 장에서는 TypeScript 의 타입 추론(Type Inference)에 대해 설명합니다.
즉 타입이 어디서 어떻게 추론되는지 논의할 것입니다.

용어에 대한 참고 사항: TypeScript 1.5에서는 명칭이 변경되었습니다.
"내부(internal) 모듈"은 이제 "네임스페이스"입니다.
"외부(External) 모듈"은 이제 ECMAScript 2015의 용어에 맞게 간단히 "모듈"입니다.
(즉 모듈 X { 는 현재 선회되는 네임스페이스 X { 와 동일합니다)

ECMAScript 2015부터 JavaScript에는 모듈 개념이 있습니다. TypeScript 는 이 개념을 공유합니다.

모듈은 전역 스코프가 아닌 자체 스코프 내에서 실행됩니다.
이는 export 형식 중 하나를 사용하여 명시적으로 내보내지 않는 한 모듈에 선언된 변수, 함수, 클래스 등이 모듈 외부에 보이지 않는다는 것을 의미합니다.
반대로 다른 모듈에서 내보낸 변수, 함수, 클래스, 인터페이스 등을 사용하려면 import 형식 중 하나를 사용하여 가져와야 합니다.

모듈은 선언적입니다. 모듈 간의 관계는 파일 수준에서 imports 및 exports 측면에서 지정됩니다.

모듈은 모듈 로더를 사용하여 또 다른 모듈을 import 합니다.
런타임시 모듈 로더는 모듈을 실행하기 전에 모듈의 모든 의존성을 찾고 실행합니다.
JavaScript 에서 사용되는 잘 알려진 모듈 로더는 Node.js의 CommonJS 모듈 로더이며 웹 애플리케이션의 경우 require.js 입니다.

TypeScript 에서는 ECMAScript 2015와 마찬가지로 최상위 import 또는 export 가 포함된 파일을 모듈로 간주합니다.

JSX는 XML 같은 구문이 포함 가능합니다.
의미는 구현에 따라 다르지만 유효한 JavaScript 로 변형되어야 합니다.
JSX는 React에서 인기를 얻었으나 이후 다른 애플리케이션도 볼 수 있습니다.
TypeScript 는 JSX를 직접 JavaScript 에 포함, 타입 검사 및 컴파일할 수 있도록 지원합니다.

용어에 대한 참고 사항: TypeScript 1.5에서는 명칭이 변경되었습니다.
"내부(internal) 모듈"은 이제 "네임스페이스"입니다.
"외부(External) 모듈"은 이제 ECMAScript 2015의 용어에 맞게 간단히 "모듈"입니다.
(즉 모듈 X { 는 현재 선회되는 네임스페이스 X { 와 동일합니다)

TypeScript 의 네임스페이스(이전의 "내부 모듈")를 사용하여 코드를 구성하는 다양한 방법을 간략하게 설명합니다.
용어에 대해 언급할 때 "내부(internal) 모듈"은 이제 "네임스페이스"로 언급됩니다.
또 내부 모듈을 선언할 때 module 키워드가 사용된 곳이라면 어디에서나 namespace 키워드를 대신 사용할 수 있습니다.
비슷한 이름의 용어로 오버로드함으로써 새로운 사용자에게 주는 혼동을 방지합니다.