타입스크립트 기초 - 3

Stulta Amiko·2022년 5월 25일

타입스크립트 기초

목록 보기

3/24

변수선언

타입스크립트에서 변수를 선언할때 몇가지 주의해야할점이있다.
먼저 ES6 이상의 버전에서 얘기 했던것처럼 변수를 선언할때 var를 최대한 사용하지 말라고 했던것처럼
let과 const를 위주로 사용해야한다.
let은 값이 바뀔수 있으니 초기값을 지정하지 않아도 되지만
const는 값이 바뀔수 없으니 선언할때 초기값을 선언해 줘야한다.

타입 주석

let variableName: Type
const variableName: Type = initial_value

let n:number = 1
let b:boolean = true
let s:string = 'hello'
let o:object = { }

변수선언을 예시로 보자
타입으로는 수 타입, 불리언 타입,문자열 타입,객체 타입이 있고
각각 number,boolean,string,object를 사용한다.

만약 이런식으로 타입을 설정해두고 다른 타입으로 변수의 값을 바꾸려고 하면 오류가 발생한다.

다음과 같이 타입을 바꾸려고 하면 오류를 띄운다.

그리고 처음에 선언할때 타입을 명시하지않고 초기값을 설정할 수 있는데
이를 타입 추론이라고 부른다.
그리고 이값은 다른 변수와 마찬가지로 한번 추론된 타입으로 결정되어 바뀌지 않는다.

any 타입

any타입이라는것이 있다.
any타입으로 지정을 하게되면 값을 무엇으로 바꾸던지 다 바꿀 수 있다.
물론 타입스크립트의 목적과는 맞지않지만 자바스크립트와의 호환을 위해서 넣어둔 타입이라고한다.

undefined 타입

자바스크립트에서 undefined는 값이다.
웹프로그래밍을 하다보면 자주볼만하다.
뭐만하면 undefined를 띄운다. 제일 답답하다
오류도 아니고 내가 원하는 값이 안나오는건데
쨋든 타입스크립트에서는 undefiend를 값으로도 타입으로도 사용할 수 있다.

undefined 타입에는 오직 undefined만 할당할 수 있다.
이제 보면 any타입에서는 모든 타입의 변수를 다 할당할 수 있었던 반면
undefined를 보면 단 하나만의 undefined만 할당할 수 있는것을 알 수 있다
여기서 추론 가능한것은
any타입은 최상위 타입이라는것과 undefined는 최하위 타입이라는것을 알수 있다.

템플릿 문자열

템플릿 리터럴은 예전에 자바스크립트 복습에서도 한번 본적이 있다.
백틱 `을 사용해서 ${}와 같은 형태로 함수 혹은 변수를 넣어서 문자열 내에서 함수 혹은 변수를 사용할 수 있게 해주는 기능이다.

객체와 인터페이스

object 타입으로 객체를 선언하게 되면 객체 내의 값이 바뀌어도 오류를 내보내지 않는다. 마치 any타입과 유사하다.

let o:object = {name:'jack',age:12}
o = {tu:true,fa:false}

다음과 같은 코드를 보면 원래 객체의 key는 string과 number였으나
객체의 key를 모두 바꾸고 value도 boolean형으로 모두 바꿔도 따로 오류를 보여주지 않는다.

하지만 이러한 형태의 코드는 타입스크립트의 목적과 맞지않는다.
잘못된 타입의 변경으로 오류를 발생하게 하지 않기 위해 만들어진 언어인데
저렇게 쉽게 바뀌어 버리면 의미가 없다
그래서 타입스크립트의 인터페이스는 그러한 문제를 해결해 준다.

인터페이스

타입스크립트에서는 객체의 타입을 정의할수 있게하는 interface 키워드를 제공한다.

interface IPerson{
    name: string,
    age: number,
}

let per: IPerson = {name:'jack',age:44}

위와 같은 형태로 설정할 수 있다.
만약 객체에 있어야할게 하나라도 없으면 오류를 띄우기 하지만
그래도 우리가 원하는 타입으로 정해서 할 수 있다.

하지만 우리는 가끔 코드를 짜다보면 객체에서
원하는 속성만 설정해주고 싶을때가 생기게된다.
그래서 타입스크립트의 인터페이스에는

선택 속성

선택속성이라는게 존재한다.

interface IPerson{
    name: string,
    age: number,
    other?: boolean,
}

let per: IPerson = {name:'jack',age:44}

이런식으로 key에 ?를 붙여주게 되면 선택속성이라는 속성이 붙게된다.

익명 인터페이스

타입스크립트에서는 interface 키워드를 사용하지않고 인터페이스의 이름도없는 인터페이스를 만들 수 있다.
이를 보고 익명 인터페이스라고 하는데

let ai: {
    name: string,
    age: number,
    etc?: boolean,
} = {name:"jack",age:22}

const PrintAi = (me:{name:string,age:number,etc?:boolean}) => { 
    console.log(
        me.etc ? `${me.name} ${me.age} ${me.etc}` :
        `${me.name} ${me.age}`
    )
}

PrintAi(ai)