[TypeScript] 설치 및 기본 let, const, template

Node.js 설치

 

https://nodejs.org/en/

Node.js

 

 

Node.js를 설치하는 목적

1. 설치명령어->npm package manager(프로그램 설치관리툴) 이 같이 설치 됨

2. 서버목적

 

 

Typescript 설치

 

VSCode 설치 

code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

실행

 

test.ts 생성 후 작업

/* 
test.ts

typescript => 기존의 자바스크립트구문 + 타입 (=type)
*/
let y = "test" // let 변수명=저장할 값 -> 자바스크립트 문법

let x:string = "test" // let 변수명:자료형=저장할 값 -> 타입스크립트문법
console.log(x)        // 자바스크립트로 컴파일 tsc 소스파일명.ts -> 소스파일명.js

 

보안문제로 실행이 안된다.

윈도우 홈키에서 마우스 오른쪽 클릭 -> window powershell(관리자) 실행 

 

아래의 문구를 입력 

Set-ExecutionPolicy Unrestricted   -> y 입력 엔터 -> 닫기

 

 

/*
 1.let.ts  

 형식) let 변수명=값 (변수선언) vs var 변수명
*/

var foo=123;
console.log(foo); //123
{
    var foo=456; // 중복선언이 가능하다.
}
console.log(foo);//456

let foo2=789;
console.log(foo2);//789
{
    let foo2:number=456; //중복선언이 불가능하다.
    let bar:number = 456;
    console.log(bar);//456
}
console.log(foo2);//789 블럭내부에 선언된 let변수는 외부에서 불러다 사용할 수 없다.
console.log(bar);// 블럭범위 밖에서는 let으로 선언된 변수는 참조할 수 없다.

/*
tsc 1.let.ts
node 1.let.js
*/

 

 

/*
  2.const.ts

  ts(기존의 자바스크립트구문+자료형 추가,클래스사용)  
  js(자료형X 클래스사용X)

 2. const 상수화시킬때 사용=>react에서 많이 사용

  1) const를 사용할때에는 반드시 상수화된변수에 초기값을 설정해야 한다.
  2) 중간에 값을 변경할 수 없다.(상수이기때문에)
  3) 중복선언이 가능하다. =>var 변수와 공통점
*/
const too=123;
//TOO=456;
{   //block level scope(블럭범위)
    const too=100; //중복선언이 가능하다.
    console.log(too);//100
    const too2=45;
}
console.log(too);//123 블럭밖에서는 안쪽의 const변수값을 불러다 사용X
//console.log(TOO2);//블럭밖에서는 TOO2을 불러다 사용X
//tsc 2.const.ts ->node 2.const.js

 

 

/* 3.template.js

  백틱문자열 ``
  template string(탬플릿 리터럴) =>' '," ", 여러문장 =>+ 줄바꿈
  `    `
*/
const template=` 템플릿 리터럴은
 '작은 따옴표와' 과 "따옴표"를 
 혼용해서 사용이 가능합니다.`;
 console.log(template);
 const template2=`
 <ul class="nav-item">
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
 </ul>`;
 console.log(template2);

 /* 
 tsc 3.template.ts
 node 3.template.js
 */

/*
4. template2.ts

``백틱문자열은 여러줄의 문장을 + 기호를 쓰지 않고도 사용이 가능
출력형태로도 사용이 가능 `${출력할 변수명 또는 수식}`
*/
const name2 = `테스트`;
const addr = `서울시 강남구`

//기존방법
console.log('이름은 '+name2+'이고, 주소는 '+addr+'입니다.');

//차이점
console.log(`이름은 ${name2} 이고 주소는 ${addr} 입니다.`);

//표현식도 가능하지만 수식(연산)도 가능하다.
console.log(`1+1=${1+1}`);

const name3 = 'imsi';
console.log(`Hello ${name3.toUpperCase()}`); // ${객체명.함수명()} 함수도 호출이 가능하다.

/*
tsc template2.ts
node template2.js
*/