TypeScript 기초 (1)

Typescript : js기반의 언어로 자바스크립트의 문제점을 해결하고 보완하기 위해 만들어짐

=> 자바스크립트보다 더 안정적임

 

 

 

**** 자바스크립트 대신 타입스크립트를 쓰는 이유 

ex 1) 

 

function divide(a, b) {
  return a / b }

==> divide라는 함수를 작성할때 divide(2,3)이 같이 작성했을때만 실행이 되어야함

BUT js는 이함수를 올바르게 사용하도록 강제하지는 않음  

 

divide("xxxx") 를 실행했을때,  ==> NaN을 리턴 ==  즉 코드실행을 막지는 않음

 

 

 

 

ex 2) run time error(콘솔 안에서 일어나는 error)

const yang = {name:"yang"}

nico.hello()    //==> error 발생

이때. 코드가 실행되기 전에  hello라는 함수는 없다! 라고 알려주는게 개발하는데 수월함 

BUT js는 코드를 실행할 때까지 이런 에러가 나도 알 수 없음 

 

 

이러한 js의 단점들 때문에 TypeScript 를 많이 사용하는 추세

 

TypeScript로 작성한 코드를 컴파일하면JavaScript로 변환되는데, 이유는 브라우저가 js를 이해하기 때문(Node.js는 둘다이해함) 

이때, TypeScript 코드에 문제가 있다면, js로 컴파일하지 않음 == 컴파일이 정상적으로 된다면 ts코드, 데이터 타입도 문제가 없다는 것.

 

 

 

TypeScript 문법 

 

TypeScript는 변수의 타입을 명시적으로 정의할 수도 있고, js처럼 변수만 만들어줘도 됨

이때, ts는 변수의 타입을 추론해줌

ex) 

let a = "hello"  
a = "bye"     // error X : string => string 으로 바꿨기 때문(ts가 string이라는 것을 알고있음)
a = 1        // error : string => number로 넘어가기 때문,

같은 문법으로 js에서 작성했을땐 error 안남

 

 

TypeScript는 데이터 타입을 알려줄 수 있음(명시적 표현)

let b : boolean = "x"    //error  : boolean으로 명시한 뒤 String을 사용해서

====> let b : boolean = false    //O

let a : number[] = [1,2]   // array도 사용 가능

  val name : (boolean,string,number) [] 등 명시적 표현 가능.

=>항상 명시적 표현을 쓸 필요X  ts가 자동적으로 추론하도록 해도 됨 

 

 

 

 Optional Parameter (선택적 변수)

const player : {
	name : string,
    age : number
} = {
	name : "yang"
}

위와 같이 player를 만들때, age를 작성하지 않아서 error가 나고있음

==> age를 선택적으로 하고 싶을때 

age? : number

물음표를 추가하면 error가 안남 

 

 

 

const player : {
	name : string,
    age? : number
} = {
	name : "yang"
}

//if(player.age < 10) => ts가 age가 undefined일 수 있다고 알려줌
if(player.age && player.age < 10)    //player.age 존재 여부 확인 후 시작

 

 

Alias (별칭) 타입

ex)  player를 여러명 만들때, 

type Player = {
	name : string,
    age? : number
}

const yang : Player = {
	name : "yang"
} 
const lynn : Player = {
	name:"lynn"
    age:12
}

data type을 Player로 넣어주면 됨

 

 

함수의 return값의 타입 지정하기

function playerMaker(name:string) : Player{    
	return {
    	name : name  
    }
}

const yang = playerMaker("yang")

yang.age = 23

===> playerMaker라는 함수를 만들고 string으로 name을 받고 Player타입을 return하는 함수라 지

 

 

화살표 함수를 사용했을 때,

const playerMacker = (name:string) : Player => ({name})

 

 

 

  readonly(읽기전용) prop 추가하기

type Player = {
	readonly name : string,    //readonly 추가  
    age? : number
}

const playerMaker = (name:string) : Player => ({name})
const yang = playerMaker("yang")

yang.name = "lynn" // error : name에 readonly prop을 추가해서 name을 수정하지 못 함

 

  ex 2)

const number: readonly number[] = [1,2,3,4]
number.push(5)    //readonly prop때문에 push 불가

 

 

 

Tuple : 특정위치와 특정타입을 정한 array를 만들 수 있게 해줌

 const player: [string, number, boolean] = [yang, 2, true]
 
 player[0] = 1 // error

ts가 첫번째 index는 항상 string이어야 한다는 것을 알기 때문.

 

 

const player: readonly [string, number, boolean] = [yang, 2, true]  //readonly 추가

readonly를 사용하면 아무것도 바꿀 수 없음 

 

 

데이터 타입을 지정할때,  js가 가진 undefinded, null도 똑같이 지정할 수 있는데, optional type으로 예시를 들때,

ex )

type Player = {
	age?:number      // ? == number or undefined;
}

 

 

any type : typeScript에서 빠져나오고 싶을때 쓰는 타입

=> 기본적으로 비어있는 값들을 쓰면 기본값이 any가 됨. 

==> any사용은 typescript의 보호장치를 벗나게 하기 때문 추천하지 않음

ex)

const a : any[] = [1,2,3,4]
const b : any = true 

a+b     // error X :  any는 이러한 typescript의 보호기능을 비활성화 시킴

 

 

any는  아무데서나 사용하지 못하게 할 수 있는 장치가 있음

 

unknown : 어떤 타입인지 모르는 변수

let a: unknown ;

let b = a+1 // error : 타입이 unknown이라 허용을 안해줌

//===> a가 num인지 확인하는 코드를 작성해야함

if (typeof a === 'number') {
	let b = a+1
}   // 이 안에서는 a의 타입이 num인것을 확인해서 정상적으로 돌아감

이렇게 unknown으로 설정해서 활용도 가능함

 

 

 

void : 아무것도 return하지 않은 함수를 대상으로 사용

function hello(){
	console.log('x')
}   // hello에 마우스를 대보면 hello function : void라고 띔

  void를 따로 지정해줄 필요는 없음 보통은 ts가 이 함수가 아무것도 return하지 않는다는 것을 자동으로 인식함

 

 

never : 함수가 절대 return하지 않을 때 발생

=>return하지 않고 오류를 발생시키는 함수

 

ex) 함수에서  exception(예외)이 발생할때,

function hello():never {
	return "x"
}    //error

function hello() : never {
	throw new Error("xxx")
}   //  오류를 발생시키면 정상적으로 작동

 

 

ex 2) 타입이 두가지인 상황에 발생할때,

function hello(name:string|number) {
	if(tyeof name === "string"){
    	name
    }else if (tyeof name === "number") {
    	name
    }else {
    	name
    }     
}

==> 두 타입을 모두 확인해줘서 마지막엔 무엇을 쓰던 never이 됨 

====> hello 함수가 name을 받을때, string or number 로 받는다 했기 때문에 마지막은 실행되지 않음==> never로 뜸