공부방

interface Dog{
	readonly name:string
    age:number
    color?:string
}

let dog1:Dog ={
	name:"구름",
    age:3
    //color 가 없어도 에러나지않음 
}
let dog2:Dog = {
	name:"몽이",
    age:2,
    color:"black"
}

optional 

? 키워드로 사용할수있다 optional로 만들어진 타입은 말그대로 옵션이기때문에 선언할때 있을수도있고 없을수도있다 포함하지 않는다고해서 에러가 나지않는다.

interface

객체의 타입을 선언할때 사용하는 키워드이다. 타입을 확장할때에 type으로 선언한것보다 편리하고 성능적으로 객체의 타입을 만들때에는 interface를 사용하는걸 권장한다.

interface Dog{
	name:string
    age:number
}
//확장

interface Dog{
	color:string
}

type Dog = {
	name:string
    age:number
}
//확장
type Dogstype = Dog&{
	color:string
}

interface는 같은 타입이름을 사용해서 선언하는것으로 확장이 가능하다.

interface는 객체의 타입을 선언하는것만 가능하다.

interface에 메서드의 타입을 만들어서 받는것도 가능하다

interface TV{
	turnon():boolean; //파라미터로 아무것도 받지않고 논리값을 리턴
    turnoff():void; //파라미터로 아무것도받지않고 아무것도 리턴하지않음
}​

const myTv:TV = {
	turnOn(){
    	return true
    },
    turnOff(){
    	console.log("off")
    }
}

readonly

읽기전용으로 만들고 객체와 배열에서만 사용가능하다.

interface Dog{
	readonly name:string
    age:number
    color?:string
}

let dog1:Dog ={
	name:"구름",
    age:3
    //color 가 없어도 에러나지않음 
}

dog1.name = "초롱이"  //error readonly는 수정할수없다.

읽기전용으로 타입을 선언하면 객체의 요소를 읽을수는 있지만 수정할수는 없게된다.

타입스크립트 기본타입사용법

1)타입추론

 타입스크립트는 타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추할수있음

let a = "abcde"  //string 타입으로 지정됨

2)타입 명시

  변수 선언시 변수값의 타입을 명시함으로써 변수값의 데이터 타입을 지정

let a:string = "abcde" //string타입으로 지정된변수에 스트링값 대입

3)타입선언

1.변수 타입 선언

type 변수이름 = 타입

number,string,boolean,null,undefined,object,array

항목의 값을 지정할수없을때는 any 타입을 지정

type APPLE = string //타입을 변수로 만들고
let apple:APPLE = "string" // 선언하는 변수에 타입변수를 넣어서 사용

2.유니언타입(다중타입)

let array:(string | number)[] //string 배열 이나 number배열이 들어갈수있는타입
let strnum:(string | number) //string이나 number가 들어갈수있는 타입

지정된 타입 이외의 값을 넣으면 에러가 발생하고 자바스크립트로 컴파일되지않는다.

함수타입선언

1.인수와 반환값이 있을때

let myFunction : (arg1:number , arg2:number)=>number //파라미터로 넘버타입이들어가고 리턴값이 넘버
myFunction=function(x,y){
	return x+y
}
//함수의 타입을 먼저 만들어놓고 함수를 만드는 방식

function myFunction(a:number,b:number):number{
	return x+y
}
//위와 타입은 같지만 함수를 만들때 타입을 한번에 주는방식

2.인수의 반환값이 없을때 void 키워드 --> 리턴없음

let myFunction:()=>void;
myFunction = function(){
	console.log('hi')
}
//변수에 타입을 먼저 정한후에 함수를 만들어주는 방법
function myFunction():void{
	console.log("hi")
}
//파라미터도없고 리턴도없는경우

타입스크립트 설치

타입스크립트를 설치하기 위해서는 Node.js를 설치해야한다.

https://nodejs.org/ko/

노드를 설치해주고

터미널을 실행시킨 다음 아래코드를 입력해주면 타입스크립트가 설치된다.

npm install -g typescript

타입스크립트를 설치하고나면 

이제 프로젝트를 만들 폴더에서 .ts 확장자로 파일을 만들어서 타입스크립트 코딩을 시작하면된다.

타입스크립트 컴파일설정

타입스크립트 프로젝트 폴더안에

tsconfig.json파일을만들어서 컴파일할때의 설정을 만들어줘야한다. 

이렇게 json형식으로 옵션을 설정해주면된다.

타입스크립트로코드를 작성한후 터미널을켜서 tsc 를 입력하면 자바스크립트로 컴파일된다.

**혹시 powershell 에서  tsc사용이 안된다면 cmd로 바꿔서 실행하면 된다 powershell 에서는 정책문제때문에 tsc를 사용하지 못할수도있다.

이렇게 컴파일까지 할수있으면 타입스크립트를 사용할 준비는 끝이 났다

이제 타입스크립트를 사용하러 가보자. 

타입스크립트

http://www.typescriptlang.org

2012년에 발표됨 

대규모 javascript 애플리케이션 개발용도

마이크로소프트 개발, 오픈소스 프로그래밍 언어

자바스크립트의 상위집합이다 (자바스크립트의 모든기능을 포함하고 자바스크립트에 없는 기능도 가지고있음)

*자바스크립트와의 가장 큰 차이점!

자바스크립트는 동적인 언어이며 프로그램 구동중에 타입이 다이내믹하게 변경되지만

타입스크립트는 정적인 언어이며 프로그램을 작성할때. 타입을 정의해준다.

타입스크립트의 장점

1.버그를 줄이고 유지보수하기 쉽고 질좋은 코드 작성에 용이하다.

2.강력한 타입으로 대규모 개발에 용이하다.

3.자바스크립트 라이브러리와 편리한 사용

4.개발도구에서의 강력한지원.

ex) 자바스크립트를 실행하기전에는 알수없던 에러를 타입스크립트는 코딩하는과정중에 알수있게 도와준다.

프론트엔드 프레임워크와 타입스크립트

리액트(React)

         리액트와 타입스크립트의 호환성은 좋은편이다

         간단한 옵션을 추가하는것으로 타입스크립트를 사용할수있도록 지원한다.

뷰(vue)

         뷰 2.0부터 타입스크립트 사용가능

         뷰 3.0부터 타입스크립트 공식 지원

앵귤러(angular)

        버전 2부터 타입스크립트를 기반으로 만들어졌고 타입스크립트를 권장하고 있다.

타입스크립트를 사용할때에는 코드에디터로 비쥬얼스튜디오 사용을 권장하는데 비쥬얼스튜디오도 마이크로소프트에서 만들었고 타입스크립트도 마이크로소프트에서 만들어졌기때문에 자동완성이나 코드를 입력하는부분에서 더 부드럽게 작동한다고 한다.