타입스크립트 핸드북 훑어보기 [1.

쉬운 목차

입력하다

타이프 스크립트 매뉴얼를 보면 자바스크립트는 원래 디자인에 비해 현재 다양한 용도로 사용되고 있어 자바스크립트 개발을 대규모로 관리하기 어렵다고 한다.

매뉴얼 – TypeScript 매뉴얼

TypeScript 학습의 첫 단계

www.typescriptlang.org

오타는 사용자가 가장 흔히 저지르는 실수이기 때문에 단순한 오타이거나 API에 대한 이해가 부족한 경우에도 TypeScript를 사용하여 코드를 실행하기 전에 JavaScript 프로그램의 유형이 올바른지 확인할 수 있습니다.

또한 다른 프로그래밍 언어에 대한 경험이 있는 경우 가이드를 사용하여 JavaScript 구문 및 TypeScript 사용에 빠르게 익숙해질 수 있습니다.

기본 사항

JavaScript의 모든 값에는 다른 작업이 포함되어 있으며 다른 작업으로 확인할 수 있습니다.

message.toLowerCase();

message()

위의 코드는 메시지의 속성인 LowerCase에 접근하여 호출하고 메시지를 직접 호출하도록 작성되었습니다.

message의 값을 모른다면 어떤 값을 가지고 있느냐에 따라 위 코드의 동작이 완전히 달라집니다.

메시지를 검색할 수 있습니까?
toLowerCase라는 속성이 있습니까?
그렇다면 toLowerCase도 호출할 수 있습니까?
두 값을 모두 호출할 수 있는 경우 각 값은 무엇을 반환합니까?

위의 질문들은 자바스크립트 코드를 작성할 때 자주 묻는 질문으로 자바스크립트를 사용하면서 놓치는 부분이 없기를 바랍니다.

메시지가 “Hello World!”라고 가정해 보겠습니다.

그런 다음 위 코드의 첫 번째 부분인 message.toLowerCase()를 실행하면 원하는 결과를 얻습니다. 그러나 두 번째 부분인 message()는 문자열을 함수로 호출하는 작업이므로 오류가 발생합니다. 이러한 오류를 런타임에 감지하는 대신 방지할 수 있다면 더 큰 프로젝트에서 프로그램을 보다 효과적으로 작성할 수 있습니다.

이와 관련하여 JavaScript는 동적 유형만 제공하므로 진행 상황을 확인하려면 코드를 실행해야 합니다. 대안으로 TypeScript는 정적 유형 시스템을 사용하여 코드가 실행되기 전에 예측합니다.

정적 유형 검사

TypeScript는 정적 유형 검사를 통해 프로그램에서 사용되는 값의 형식과 동작을 설명합니다. 또한 이 정보는 프로그램이 제대로 작동하지 않을 때 컴파일 타임에 알리는 데 사용됩니다.

따라서 이전 message()의 경우 메시지가 문자열이므로 코드를 실행하기 전에 먼저 오류가 있는지 확인할 수 있습니다.

예외없이 실행 실패

지금까지 JavaScript 런타임이 무언가 잘못되었음을 직접적으로 알려주는 경우인 런타임 오류에 대해 이야기했습니다. 이러한 문제 외에도 예기치 않은 문제에 직면했을 때 JavaScript의 동작은 다른 프로그래밍 언어와 약간 다릅니다.

JavaScript에는 “정의되지 않음”이라는 유형이 있습니다. 이러한 특성 때문에 다른 프로그래밍 언어에서 오류가 발생해야 하는 부분이 자바스크립트에서는 꽤 정상적으로 동작하는 경우가 많다.

const user = {
    name : "Daniel",
    age : 26,
};

user.location;

위 코드의 경우 객체 내에 name 및 age라는 속성이 존재하고 존재하지 않는 location이라는 속성에 액세스합니다. C++인 경우 클래스에 존재하지 않는 멤버 변수에 액세스하려고 하면 오류가 발생합니다. 그러나 JavaScript는 “정의되지 않음”을 반환하고 이 코드를 일반 코드로 받아들입니다.

결국 위의 코드가 JavaScript에서 “유효”하더라도 정적 유형 시스템에서 오류로 간주되면 알려줍니다. TypeScript는 이를 지원합니다.

이 시스템은 JavaScript의 기본 언어의 표현력과 유연성을 희생하지만 그 목적은 버그로 간주되는 것을 잡는 것입니다. 사용자가 저지르는 가장 일반적인 실수는 오타와 기본적인 논리적 실수이기 때문입니다.

tsc

function greet(person, date) {
    console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript는 컴파일을 통해 유형 검사를 수행합니다. “tsc”에 의해 컴파일되며 정상 작동 중에 JavaScript 구문으로 변환된 js 파일이 생성됩니다.

JavaScript 코드를 TypeScript로 변환하려는 경우 변환 프로세스 중 유형 검사로 인해 오류가 발생할 수 있습니다. 다만 자바스크립트에서 정상적으로 동작하는 코드이지만 검수 과정에서 오류가 발생할 이유는 없다. 이 경우 컴파일 시간 –noEmitOnError 옵션을 사용하여 js 파일 변경을 제한할 수도 있습니다.

명시적 유형

위의 인사말 함수에 대한 유형 정보를 TypeScript에 알려주지 않았습니다. 사람의 유형과 날짜를 나타내기 위해 다음과 같이 코드를 변경할 수 있습니다.

function greet(person: string, date: Date) {
    console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Brendan");

종류를 지정하면 인사말 함수에 문자열 종류와 날짜 종류만 입력되며, 다른 종류를 입력하면 오류가 발생한다.

유형이 명시적으로 표시되지 않은 경우에도 TypeScript는 생략된 유형 정보를 유추할 수 있습니다. 따라서 모든 요소에 대해 타입을 적어두는 것보다 TypeScript가 스스로 올바른 타입을 알아낼 수 있는 부분이라면 타입을 지정하지 않는 것이 좋다.

무거움

TypeScript의 유형 검사를 사용하는 목적은 사용자마다 다르기 때문에 유형 검사는 선택 사항이며 가장 가벼운 기준을 사용하여 수행됩니다. 그러나 대부분의 TypeScript 사용자는 최대 검사 수를 수행하기 위해 TypeScript를 선호합니다. 따라서 가능할 때마다 새 코드에서 엄격성을 활성화하는 것이 좋습니다.

TypeScript에는 컴파일 시간에 켜고 끌 수 있는 몇 가지 검사 엄격성 플래그가 있습니다. CLI에서 strict 플래그를 설정하거나 tsconfig.json에서 “strict”: true를 설정하여 모든 플래그를 한 번에 활성화할 수 있습니다. 알아야 할 가장 중요한 두 가지 옵션은 다음과 같습니다. noImplicitAny그리고 StrictNullChecks오전.

noImplicitAny

경우에 따라 TypeScript는 값의 유형을 유추하지 않고 가장 관대한 유형을 가정합니다. 임의 유형을 고려하는 것은 아마도 JavaScript에서 자명할 것입니다. 그러나 많이 사용하면 애초에 TypeScript를 사용하는 이유가 모호해질 수 있습니다. 프로그램에서 유형을 보다 구체적으로 사용할수록 더 많은 유효성 검사와 도구를 접할 수 있으므로 코드의 버그가 줄어듭니다. noImplicitAny 플래그를 활성화하면 유형이 임의로 추론되는 변수에 대해 오류가 발생합니다.

StrictNullChecks

기본 동작은 null 및 undefined와 같은 값을 다른 유형의 값에 할당할 수 있다는 것입니다. 이렇게 하면 코드 작성이 더 쉬워지지만 많은 버그가 발생합니다. strictNullChecks 플래그는 null 및 undefined를 보다 명시적으로 처리하고 null 및 undefined를 처리하는 것을 잊어버릴 염려를 없애줍니다.