[orientation]

이미 작성된 코드에 타입스크립트 적용하는 방식으로 해나갈 것임.

git 주소 : https://github.com/joshua1988/learn-typescript
TypeScript 핸드북 : https://joshua1988.github.io/ts/intro.html

타입스크립트 : ‘자바스크립트에 타입을 부여한 것이다.’ ※ 컴파일을 해줘야 함!

- 장점 :

1) 에러의 사전방지

예) 주소: [object Object] 간혹가다 이런식으로 뜨는 경우 많이 있었을 것이다. Object를 불러올 때, 그 해당 값이 명확하지 않으므로 그냥 객체라고만 하는 것인데 이를 TypeScript를 사용하면 더욱 명확하게 사용할 수 있다는 것이다.

혹은 undefined 등의 값을 보여주는 것도 마찬가지.

  /**
  * @typedef {object} User
  * @property {string} username
  * @property {string} email
  * @property {string} address
  */
  /**
  * 
  * @returns {Promise<User>}
  */

이런식으로 저장해두면, 이를 자동완성을 도와줄 수 있음 (위는 javascript에서 정해두는 식으로 사용한 것임) 오탈자의 방지가 가능해짐.

2) 코드 가이드 및 자동완성

  function add(a: number, b: number): number {
    return a + b;
  }

  add(10, '20');

위에서 ‘20’을 에러로 간주시킴.

또 그 결과 값이 number로 정했기 때문에 toLocaleString 같은 함수를 자동완성이 가능함. (vscode IntelliSense)

자바스크립트에서도 type을 정해서 사용할 수 있음. ``` typescript /** *
- @param {number} a 첫번째 숫자
- @param {number} b 두번째 숫자
- @returns */ //@ts-check ``` 위를 입력하면 ts 체크가 가능함.

[타입스크립트 시작하기]

typescript 사용하기

명령어 : npm i typescript -g : typescript 사용하기 tsc index.ts : index.ts => index.js로 변환

웹팩 같은 번들러, 뭐 그런걸 이용해서 명령어 자동화가 가능함.

tsconfig.json 파일을 사용하여 옵션을 설정해줘야함.

※ 타입스크립트 PlayGround https://www.typescriptlang.org/play

typescript=>js파일로 바꿔주는 웹페이지임.

babel : 자바스크립트의 최신 문법을 모든 브라우저에서 지원 가능하게 변환해주는 프로그램

[타입스크립트의 기초]

- 선언 방식

  // JS 방식
  var str = 'hello';

  // TS 문자열 선언
  var str: string = 'hello';

[타입스크립트 프로젝트 시작]

let todoItems: object[];

인터페이스에 대하여 객체의 자료형을 모음.

interface User {
  age: number;
  name: string;
}

// 변수에 활용한 인터페이스
var seho : User = {
  age : 33,
  name : '세호'
}

// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction{
  (a: number, b: number): number;
}

// 함수의 규칙 정의 가능
var sum : SumFunction;

sum = function (a: number, b: number):number{
  return a + b;
}

딕셔너리 : 객체의 요소의 자료형을 지정할 수 있음.

[타입 별칭]

type 을 앞에 붙여서 형을 지정할 수 있음

인터페이스를 사용하여 생성했을 때, vscode에서 인터페이스의 이름만을 보여주지만
type으로 생성했을 때, vscode에서 그 내용까지 다 보여준다.

타입은 확장이 되지 않는다.

[연산자를 이용한 타입 정의]

유니온 타입 타입을 두개 이상 지정할 수 있게 해준다.
```
function logMessage (value : string | number){
  console.log(value);
}
```
만약에 인터페이스의 경우 유니온 타입으로 선언하면 (보장된) 공통된 속성만을 일단 가져올 수 있다.

& 연산자를 사용

// never 불가능
var capt2 : string & number & boolean;

인터페이스를 & 를 사용하여 선언하면
모든 속성을 다 사용할 수 있다.

function askSomeone(someone: Developer3 | Person3){
  
}
  
askSomeone({name : '디벨로퍼', skill : '웹개발'});
askSomeone({name : '캡틴', age: 100});
  
function askSomeone2(someone: Developer3 & Person3){
  // someone.
  // someone.name
  // someone.skill
  // someone.age
}
  
askSomeone2({name : '디벨로퍼', skill : '개발', age: 130});

[이넘]

: 특정 값들의 집합을 의미함. DropDown 정해져 있는 목록을 사용할 때 사용함.

아무것도 안넣으면 그 구성요소의 순서를 숫자로 가져온다. (순서는 1씩 증가) 값을 넣으면 해당 값을 가져온다. (문자열의 경우 문자열을 그대로 가져온다.)

다 배워봤는데, 이럴바엔 객체 쓰면 되지 않나는 생각밖에 안듬…

활용 사례

Typescript 강의 내용 정리-1