2023-03-04 타입스크립트 1일차

공식문서 참고

 

TypeScript를 설치하는 방법에는 크게 두 가지가 있습니다

• npm을 이용한 설치 (Node.js 패키지 매니저)
• TypeScript의 Visual Studio 플러그인 설치

 npm install -g typescript

 

첫 번째 TypeScript 파일 만들기 (Building your first TypeScript file)

function gretter(preson) {
  return "Hello, " + preson;
}

let user = "jane User";

document.body.textContent = gretter(user);

에디터에서, greeter.ts 파일에 다음의 JavaScript 코드를 입력

 

확장자는 ts인데, 이 코드는 아직 일반 JavaScript 코드입니다.

 

코드 컴파일하기 (Compiling your code)

tsc greeter.ts

터미널에 해당 파일이 있는 곳에서 저 명령어를 실행하면

동일한 JavaScript 코드를 포함하고 있는 greeter.js 파일 생성

=> ts 파일을 js 파일로 complie하는 방법!

JavaScript 앱에서 TypeScript를 사용하여 시작했습니다!

 

 

 : string 타입 표기를 'person' 함수의 인수에 추가

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

let user = "Jane User";

document.body.textContent = greeter(user);

 

타입 표기 (Type annotations)

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

let user = "Jane User";

document.body.textContent = greeter(user);

 

에러 문구

Found 1 error.
greeter.ts:7:37 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

'숫자[]' 유형의 인수는 '문자열' 유형의 매개변수에 할당할 수 없습니다.

 

 

TypeScript는 매개변수로 어떤 타입이 들어올지 정할 수 있고, 정해준 타입되로 들어오지 않는다면 에러메세지를 보여주고 어디가 틀렸는지 나타내 줍니다.

 

오류는 존재하지만, js 파일에는 수정 내역이 컴파일이 되어있다. / 컴파일은 되도 오류때매 안될 것임.. ㅎㅎ

 

 

인터페이스 (Interfaces)

여기서는 firstName 및 lastName 필드를 갖고 있는 객체를 나타내는 인터페이스를 사용

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

 

클래스 (Classes)

. TypeScript는 클래스 기반 객체 지향 프로그래밍 지원과 같은 JavaScript의 새로운 기능을 지원합니다.]

생성자와 public 필드를 사용해 Student 클래스를 만들겠습니다. 클래스와 인터페이스가 잘 작동하여,프로그래머가 올바른 추상화 수준을 결정할 수 있게 해준다는 점을 주목하세요.

또한, 생성자의 인수에 public을 사용하는 것은 그 인수의 이름으로 프로퍼티를 자동으로 생성하는 축약형입니다.

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);

console.log(user); 
// |-> Student {
//        firstName: 'Jane',
//        middleInitial: 'M.',
//        lastName: 'User',
//        fullName: 'Jane M. User'
//      }

console.log(greeter(user));
// |-> Hello, Jane User