타입스크립트 기초

타입스크립트란 마이크로소프트에서 만든 자바스크립트 기반의 typed programming language로 함수, 객체, 변수등 각각의 자료구조에 타입을 지정함으로써 자바스크립트의 런타임 오류를 미리 방지해 줄수있다.

 

기본타입

let a: number = 13
let b: string = "13"
let c: boolean[]= [true]

위와같이 number, string, boolean으로 자료의 기본타입을 정해줄수 있으며 array의 경우 기본타입을 정해주고 대괄호 "[]"를 입력해주면 된다.

 

객체

const person:{name:string, age?:number} = {
  name:"Mason"
}
person.age = 14

 

객체의 경우 위와같이 중괄호와 함께 사용이가능하며 물음표 "?"를 사용하여 undefined로 지정해줄수있다.

미리 타입을 지정한 name과 age를 제외한 다른 키값을 입력할경우 오류를 낸다

예를 들어 person.hobby="tennis" 는 입력이 불가능하다.

 

Alias

수십 수백가지의 객체를 위와같이 생성할경우 코딩의 속도뿐아니라 가독성에도 문제가된다. 이 경우 Alias를 사용하면된다.

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

const mason: Person = {
  name:"Mason"
}
mason.age = 30

const henry: Person = {
  name: "Henry",
  age:25
}

Alias란 사용자가 자료구조의 타입을 따로 지정해주는것이며 위처럼 동일한 속성의 자료구조들을 정의해주어 사용할수 있다.

 

type Person = {
  name: string,
  age?:number,
  hobby?:string
}

mason.hobby = "tennis"

위와 같이 Alias에 새로운 키값을 정의해주어 이미 생성된 객체에 정보를 추가해줄수도 있다. 

 

Tuple과 readonly

Tuple이란 미리 array의 타입과 길이를 정의해주는것을 의미한다.

const person : [string,number,boolean]=["Mason",23,true]

위처럼 array의 아이템갯수와 각 아이템의 타입을 지정해줄수 있다.

하지만 위의경우 person.push("tennis")와 같이 다른 값들을 추가해줄수 있는데 이를 방지하는 것이 readonly이다.

 

const person :readonly [string,number,boolean]=["Mason",23,true]

위처럼 readonly를 이용하면 정의된 초기값이외의 모든 수정이 불가능 하게 된다.

 

unknown

unknown의 경우 아직 타입이 지정되지 않았다는것을 의미한다.

let a:unknown = 1

let b :number= a+1 // 오류발생

위와 같이 a에 unknown속성을 적용하면 b에 오류가 발생하게된다. unknown으로 지정된 데이터를 사용하기 위해서는 사용시 타입들을 확인해 주어야된다.

 

let a:unknown = 1

if(typeof a==="number"){
    let b = a+1
}
if (typeof a === "string") {
  let b = a.toUpperCase();
}

위와 같이 데이터의 타입이 확인될경우 사용이 가능하게 된다. 여기서 알게된 점은 .toUpperCase()와 같은 함수들은 string 타입에서만 작동하며 만약 첫번째 조건문인 number 타입에 작성할경우 오류가 발생한다. 

 

이처럼 unknown은 사용자가 한번더 확인해주어야하는 프로텍터와 같은 역활을 하며 반대의 경우인 any타입도 존재한다.

 

any

let a:number = 1
let b:boolean = true
a+b //오류 발생

let a:any = 1
let b:boolean = true
a+b //오류 미발생

타입스크립트에서는 number와 boolean 타입들과의 연산이 불가능 하다. 하지만 any라는 타입을 부여하면 타입스크립트가 아닌 자바스크립트처럼 인식되며 연산이 가능해진다. 

any는 일종의 치트키? 같은 타입이지만 런타임오류를 발생시킬수도 있으니 사용을 자제해야한다.

 

함수의 리턴 타입

function과 const의 사용방식 이 같다.

function member(name: string) : string{
  return name
}

const member = (name:string) : string => {
    return name
}

위와 같이 파라미터의 타입을 정해준뒤 소괄호 "()" 이후 함수의 타입을 정해주면된다.

 

type Person = {
  readonly name: string,
  age?:number
}
function member(name: string): Person{
  return {name}
}
const dean = member("Dean")
dean.age = 30

dean.name="Mason" //오류 발생
dean.hobby="Tennis"  //오류 발생

또한 Alias를 이용해 줄수도 있으며 위와 같이 Alias에 위배되는 행동들은 오류를 발생하게된다. 

 

void와 never

void의 경우 함수에 리턴값이 없는경우에 사용된다. 

const squareFn =(input:number):void=>{
    console.log(input*input)
}

squareFn(20)

위와 같이 리턴을 하지않고 다른 작업을 수행하는 모든경우가 해당된다.

 

 

never의 경우 절대 실행되지 말아야될 것들에 대해 지정해준다.

function throwError(errorMsg: string): never { 
            throw new Error(errorMsg); 
} 

function keepProcessing(): never { 
            while (true) { 
         console.log('I always does something and never ends.')
     }
}

위와 같이 에러를 발생하거나 끝없이 돌아가는 반복문의 경우 never타입을 정의해줄수있다.

(사실 never의 경우 어떠한 상황에 사용되는지 잘 모르겠다... 나중에 시간되면 다시 알아보자.)