TypeScript 기초 - 파트 2

TypeScript는 강력한 유형의 JavaScript 상위 집합입니다. 즉, 원하는 경우 일반 JavaScript를 작성할 수 있으면서도 언어에 구문상의 이점을 추가합니다. 다음과 같은 기능을 활용하여 보다 선언적인 프로그래밍 스타일을 권장합니다.

정적 타이핑

인터페이스

모듈

클래스

변수

let name = "Sam"

let age = 40

let enjoysCoding = true

let name: string = "Sam"

let age: number = 40

let enjoysCoding: boolean = true

여기에는 큰 차이가 없습니다. 차이점은 프로그램에 각 변수의 유형을 명시적으로 알려주는 것입니다. 프로그램에 이러한 특정 정보를 알려주면 시스템에서 앞으로 발생할 수 있는 오류를 포착할 수 있는 기회가 제공됩니다.

연령 변수를 다른 유형에 재할당하는 경우:

let age = 40

age = 'forty-five'

TypeScript는 재할당된 변수에 오류를 나타내는 빨간색 밑줄이 표시됩니다.

상호 작용

interface Person {
    firstname: string;
    lastname: string;
}

인터페이스는 객체의 구조를 정의하는 데 사용됩니다. 위의 예에서 우리는 Person 유형의 모든 변수가 문자열 유형인 firstname 및 lastname 속성으로 구성된 객체임을 명시하고 있습니다. 개체에 대한 사용자 정의 유형을 생성할 때 이것을 생각할 수 있습니다.

이것이 유용한 이유는 무엇입니까? 미래의 자신과 다른 개발자뿐만 아니라 컴파일러에 어떤 유형의 데이터가 예상되는지 명시합니다. 개체 속성을 디버깅해야 하는 경우 참조할 수 있도록 개체 속성을 모델링하고 있습니다. 인터페이스를 TS 파일의 맨 위에 두는 것이 일반적입니다. 이를 통해 개발자는 각 속성에 사용되는 데이터 유형에 대한 아이디어를 얻을 수 있습니다.

기능

function greeter(person: Person):string {
    return "Hello, " + person.firstname + " " + person.lastname;
}

우리의 greetinger 함수는 인터페이스에서 Person 유형일 것으로 예상되는 person 매개변수를 전달합니다. 이렇게 하면 인터페이스 Person의 이름과 성을 사용하고 잘못된 인터페이스를 전달하면 바로 오류가 발생하므로 골칫거리를 방지할 수 있습니다. 또한 함수 매개변수 뒤의 :string은 이 함수를 호출할 때 반환할 것으로 예상되는 데이터 유형을 나타냅니다.

설치:

1) 타이프스크립트 놀이터:

https://www.typescriptlang.org/play/

2) 로컬 설정

npm install -g typescript

# greeter.ts

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Will User";

document.body.innerHTML = greeter(user);

명령줄에서 TypeScript 컴파일러를 실행합니다.

tsc greeter.ts

산출:

function greeter(person) {
    return "Hello, " + person;
}

var user = "Will";

document.body.innerHTML = greeter(user);