TypeScript # 1

TypeScript 란?

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이다.

타입스크립트는 정적 타입!!!

EX

javascript

function sum ( x, y ) {
  return x + y;
}

sum('h', 'i'); 

// hi 결과가 나오게 됩니다.

TypeScript

function sum ( x: number, y: number) {
  return x + y;
}

sum ( 'h' + 'i' ) ;

// 에러발생 'h' 가 숫자가 아니라고 알려 줍니다.

타입스크립트 컴파일러

// 형식 tsc [option] [filename].ts 옵션이 없다면 파일이름 바로 적어도 무관

$ sudo npm install -g typescript

$ tsc [file name]
를 이용해서 타입스크립트 컴파일러를 실행할수 있음 ( 컴파일 되는 거는 ES5 )

/*
	es5 형식으로 보낼때 promise 가 있으면 에러가 나가됩니다. 그래서 이렇게 옵션을 줍니다..
 $ tsc filename.ts --lib es5,es2015.promise,es2015.iterable,dom
 
 여기서 dom은 console.log의 에러 같은 경우를 잡아줍니다.
*/

$ tsc hello.ts --target es6
을 사용하면 es6로 컴파일됨

$ tsc filename.ts --target es6 --lib es2015,dom --module commonjs
// 여기까지하면 컴파일 모듈을 commonJs 형태로 바꿀수 있고 뒤에 
--showConfig 를 붙이면 설정한 데이터 타입들을 json형태로 볼수 있다.

tsconfig.json

{
  "include": [
    "src/**/*.ts" // 모든 ts 파일을 담고있다.
  ],
  "exclude": [
    "node_modules" // 노드 모듈은 예외
  ],
  // 타입스크립트 옵션
  "compilerOptions": {
    "module": "es6", // ts의 형태
    "rootDir": "src",
    "outDir": "dist", // dist 라는 파일안에 만들라
    "target": "es6", // js 의 형태
    "sourceMap": true, //ts파일을 바로 콘솔창에서 볼수있음
    "removeComments": true, // 주석을 컴파일 하면 지워지게 해놓음
    "noImplicitAny": true, // 타입 지정 안하면 에러뜨게
  }
}

타입 기본정의

let numValue: number;
let stringValue: string;
let booleanValue: boolean;
let undefinedValue: undefined;
let nullValue: null;
let objValue: object;
let symbolValue: symbol;
let anyValue: any; // 아무거나 다들어가도됨

numValue = 3;
stringValue = "stirng";
booleanValue = true;
undefinedValue = undefined;
nullValue = null;
objValue = { 1: "one", 2: "two" }; // 원시 값 제외한거 다됨
symbolValue = Symbol();

배열 정의

 배열 정의

 let nameList: string[];
 nameList = ["1", "3"];
 nameList.push("333");

 let nameList: number[]; 
// any 도 가능하다.
 nameList = [1, 3];
 nameList.push(3);

객체 정의

 객체 정의

let user1: { name: string; score: number };
user1 = {
  name: "suyang",
  score: 30
};