[Typescript]Javascript와 Typescript 차이

차이

JavaScript는 Dynamic Typing

5-'3'

숫자 - 문자 = 숫자

 

코드를 길게 작성할 때는 자유도&유연성은 오히려 적이다.

에러를 잡아준다 해도

추상적으로 잡아주기에 파악하기 어렵다.

---

타입스크립트는 오류를 잡아준다.

TypeScript는 에러메시지 퀄리티가 높다

 

코드 에디터 부가기능 역할로 봐도 될듯.

 

문법은 동일하다.

 

---

TypeScript 설치 및 실행

1. node.js 설치 (최신버전으로 해주자.)

2. VScode 에디터 사용

3. 터미널

3-1. npm install -g typescript

3-2. 파일 생성 (파일명.ts)

3-3. 파일생성 (tsconfig.json) + 아래 코드 넣어주기.  + ts->js 컴파일시 옵션설정 가능하다.

{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",  
  } 
}

 

⭐실행

1) 터미널 열기

2) tsc -w 입력

3) 3-2파일명.js 파일이 생성된다. (코드는 .ts 파일에서 작성하고, 변환된 파일(js파)만 html에 연결해두면 된다)

 

작성 시 에러를 띄어줌.

 

 

 

변수 : 자료형 

-> 이 변수는 이 자료형을 갖는다 명시

 

자료형

 

타입 지정

let 이름 : sring[] = ['kim', 'park'];

🔼이 변수에는 string 자료형이 담긴 array만 들어올 수 있습니다.

 

let 이름 :{name : string} = {name : 'kim'}

🔼 object 타입 지정

 

let 이름 : string | number = 'kim'

🔼 union type : 다양한 타입으 들어올 수 있다.

 

변수 지정 타입(Type alias)

type 내타입 = string | number

let 이름 :내타입 = 123;

 

함수

function 함수(x:number) :number{
	return x*2
}

1) 파라미터로 number 타입

2) return값으로는 number 타입

 

array에 쓸 수 있는 tuple 타입

type Member = [number, boolean];
let john:Member = [123,true];

number자리에 문자가 들어오면 에러

 

1. object에 타입 지정해야할 속성(몇개 없을때)

type Member = {
	name:string,
	age:number
}

let john:Member = {name:'kim', age:10}

 

2. object에 타입 지정해야할 속성(여러개 있을때)

type Member = {
	[key:string]:string, //글자로 된 모든 object 속성의 타입은 string으로 하겠다.
}

let john:Member = {name:'kim', age:'123'}

 

Class(클래스)

class User{
	name :string;
    
    constructor(name :string){//타입 자료형 붙이는게 안전하다.
    	this.name = name;
    }
}

 

------------------------------------------------------------

참고 영상

https://www.youtube.com/watch?v=xkpcNolC270