자바스크립트 개발자를 위한 타입스크립트

install

npm 또는 vscode extension 으로 설치한다.

npm i -g typescript

typescript

확장자는 .ts 를 사용하며 작업이 완료되면 .js 로 컴파일 하여여 사용해야 한다.

ts compiler

tsc 파일명.ts 명령을 통해 .ts 파일 컴파일을 진행한다. 컴파일이 완료되면 파일명.js에 동일한 결과물을 갖는 javascript 파일이 생성된다.

type annotations

함수에 인자로 전달되는 매개변수에 type을 지정해 줌으로서 다른 타입의 값이 입력되는 것을 방지 할 수 있다. vscode에서 작성 시 함수에 대한 팝업 설명에 인자별 type도 알려주니 편하게 사용할 수 있다!

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

타입이 다른 경우 출력되는 에러메세지

const sayHi = (name: string, age: number): string => {
  return `나는 ${age}살 ${name}다~`
}

console.log(sayHi('바비',99));
// '나는 99살 바비다~'

위 코드에서와 같이 매개변수에 매개변수명 : type 을 지정한다. 매개변수는 물론 리턴값의 타입도 지정할수 있다 (매개변수 : type) : <리턴값의 type> 으로 지정한다.

예제 코드에서는 : string으로 지정 했으며, return 하는 값은 string으로 되어 있다

타입 종류
typescript basic-types

• number
• string
• boolean
• object : 원시타입이 아닌 나머지 모두
• array : 배열내부 데이터타입도 지정 가능 :number[] or Array<number>
• null
• undefined
• tuple : 고정크기 배열 표현, 서로 다른 타입을 튜플속에 담을 수 있다.
• enum : 열거
• any : 모든 타입 담을수 있음, 배열속 값의 타입을 모두 알지 못할때도 유용
• void : any의 반대타입, 보통 리턴값 표현에 사용한다.
• never : 절대 발생할수 없는 타입. 에러..

interface

// interface를 통한 각 매개변수 별 type지정
interface Person {
  name : string;
  age : number;
}

// 인자로 넘길 object
const user = {
  name : '바비',
  age :99,
}

// sayHi 함수 정의, 매개변수와 type을 지정한다.
// 만약 매개변수가 개별 변수라면
// (name : Person.name, age:Person.age):string
const sayHi = (user :Person): string => {
  return `나는 ${person.age}살 ${pserson.name}다~`
}

console.log(sayHi(user));
// '나는 99살 바비다~'

interface 키워드로 객체를 만들어 매개변수 타입으로 전달하였다.
함수 선언에서 매개변수는 객체기 때문에 인자의 타입도 동일하게 지켜준다.

class

// Person 클래스 선언
class Person {
  // fullName의 type 선언
  fullName : string;  
  
  constructor (firstName : string, lastName : string) {
	this.fullName = `${firstName} ${lastName}`;
  }
}

// Person 생성자로 man 생성
const man = new Person('사과', '바나나');


console.log(man.fullName) // fullname = 사과 바나나

public & private

클래스 내에서 사용되는 값을 클래스 외부에서 감추고 싶다면 private 속성을 알아 두자!

class Human {
  constructor(public name: string, private age: number) {
    this.age = age;
    this.name = name;
  }
}

const man = new Human('황황', 18);

const sayHi = (person: Human): string => {
  return `나이는? ${person.age}?`;
};

console.log(sayHi(man));

src/index.ts(28,52): error TS2341: Property 'age' is private and only accessible within class 'Human'.

private 설정한 값으로 에러를 출력한다.