TypeScript?

타입스크립트는 자바스크립트의 확장된 언어로 타입을 부여한 언어이다.

• TypeScript는 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다.
• 대규모 애플리케이션을 개발하는데 코드가 길어지면 자바스크립트보다 에러 대응에 용이하다.
• TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5 기준) 문법을 그대로 사용할 수 있다.
• ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.

TypeScript 타입의 종류

[string]

let myName: string = "kimdaeho"; 

[number]

let myAge: number = 27;

[boolan]

let marry: boolean = false;

[null]

let money: null = null;

[undefined]

let future: undefined = undefined;

[array]

let users: string[] = ["daeho", "jihoon"]; 

• 배열 안 요소들의 타입 지정할 수 있음
  [object]

let classMate: { name: string; age: number } = {
  name: "kimdaeho",
  age: 29,
}; 

• 객체의 value의 타입을 지정할 수 있음

TypeScript 타입 지정

1. 사용할 type을 미리 지정할 수 있다.

   type NameType = string;
    let man: daehoType = "김대호";

2. 타입을 정의 안 해도 사용할 수 있다.

   let newMember = "kimdaeho"; //string

3. 2개 이상의 타입을 지정할 수 있다.

   let age: number | string | boolean = 27;
    age = "27";
    let daeho: (string | number)[] = ["김대호", 27]; 
    //소괄호 안 해주면 number | [string] 이라는 의미
    let user: { name: string | number } = { name: "김대호" };

4. any를 통한 타입쉴드 제거(타입스크립트 쓰는 의미x), 에러발생 x

   let ageType : any;
    ageType = "27";
    ageType = 27;
    ageType = [];

5. unknown - any와 비슷하지만 타입쉴드가 발동해서 에러를 확인할 수 있음

   let weight : unknown;
    weight : "65";
    weight : 65;

함수 안에서 타입스크립트의 사용

1. 타입스크립트에서 일반적인 함수의 사용

   function addNumber(x: number ): number {
      return x + 1;
    }
   // 괄호 안의 첫번째 type이 파라미터, 괄호 밖의 두번쨰 타입은 리턴값의 type

2. 만약,파라미터가 없거나 return 하는 값이 없다면?

   function addParameter(x?: number) {
      x + 1;
    } 
    // 타입스크립트는 파라미터 꼭 넣어야하는데, 파라미터가 안 들어올 떄 ?를 통해 옵션처리
    // (type | undefined 라는 의미임)\
    function emptyReturn(x: number): void {
      x + 1;
    } //void를 통해 return 을 막아주는, 비어있다는 의미

3. Narrowing

   function myNarrowing(x: number | string) {
     if (typeof x === "string") {
       return x + "1";
     } else {
       return x + 1;
     }
   } 
   // 타입이 애매할 때 typeof를 통해 조건에 따른 결과값 호출하는 방식

4. Assertion

   function myAssertion(x: number | string) {
     let arr: number[] = [];
     arr[0] = x as number;
   } // 왼쪽에 있는 변수를 as를 통해 타입을 덮는 느낌

타입스크립트의 Compile

타입스크립트 파일(.ts)파일은 즉시 사용이 불가능하다. 그래서 특정 명령을 통해 컴파일 과정을 걸치고 js파일로 변환을 시켜줘야한다. 그리고 해당 파일을 html에 적용하여 사용할 수 있다.

npx tsc 타입스크립트 파일.ts

해당 명령어를 터미널에 작성하면 같은 이름의 js파일이 생기는데 html 의 body 태그에 적용 시켜주면 작성한 코드를 활용하여 동적으로 페이지를 조작할 수 있다.