[TypeScript] 타입지정

타입스크립트를 쓰는 이유

타입스크립트란 자바스크립트가 기존에 데이터타입 지정없이 유연하게 활용해 왔던 것을 엄격한 타입지정을 통해 오류를 방지하고, 의도치 않게 프로그래밍 되는 것을 막기 위해 생겨났다.

예전에 자바스크립트 에서는 문자열과 숫자간의 연산도 가능했다.

const name = "박성수";
const age = 26;

console.log(name + age); // "박성수26"

타입스크립트는 타입을 엄격하게 지정받고, 그 타입이 아닌 경우 서로 연산도 불가능하고 let을 통해 변수를 선언하고 나중에 값이 바뀌는 경우에도 지정받은 타입이 아닌 경우 할당했을 때 오류를 발생시킨다.

타입스크립트에서 타입 지정법

타입스크립트는 기존의 자바스크립트 문법을 계속 따르지만 타입이 지정된다는 점에서 다르다.

변수에 타입 지정하기

타입스크립트에서 변수 선언시에 타입을 같이 지정해 줄 수있다.

let myName:string = "박성수";
let myAge:number = 26;
let isGenius:boolean = false;

만약 지정되지 않은 타입이 들어왔을 때 다음과 같은 방식으로 오류를 발생시킨다.

타입스크립트에서 변수를 일일이 지정해 줄 필요없이 한 번 선언하면 그 뒤에는 자동으로 할당된 값으로 지정이 된다.

myName변수에 타입지정 없이 string을 할당했고, 재할당시에 number를 할당하니 오류를 발생시켰다.

alias 타입지정

변수에 직접 타입을 지정하지 않고 타입을 가진변수를 만들어 할당할 수도 있다.

많이 반복되는 경우와 지정할 타입이 길어지는 경우(union타입) 유용하다.

type str = string;
let myName:str = "박성수";

위와 같이 별칭을 만들어주는 것을 type alias라고 한다.

유니온타입

어떤 타입이 들어올 지 명확히 알지 못하는 경우 |(or연산자)로 선택의 폭을 넓힐 수 있다.

let myName:number|string = "박성수";

다음과 같이 설정하면 myName에는 number와 string이 들어올 수 있다.

아까는 오류가 났던것도 유니온타입설정으로 오류를 발생시키지 않는 것을 확인했다.

하지만 타입스크립트의 목적상 너무 유연한방식의 타입지정은 지양하는 것이 좋다.

(나중에 배울 any타입 unknown타입 as연산자 등…)

배열의 타입지정

let numArr:number[] = [1, 2, 3, 5, 6];
let strArr:string[] = [" ", " ", "  "];

다음과 같이 지정하는데 위의 방식은 배열에 한 가지 타입만 계속 들어오는 것을 의미한다.

number[]은 숫자로만 이뤄진 배열, string[]은 문자열로만 이뤄진 배열이다.

배열에는 여러가지 타입이 들어올 수 있는데, 이럴 때 union타입을 사용한다.

let mixArr:(number|string)[] = [1, 2, " ", 4];

다음과 같이 사용한다. 그러면 배열의 원소로 number와 string이 인정이 된다.

주의할 점

let mixArr: number | string[]= [1, 3, 5, "", 78]

다음과 같이 union타입을 소괄호로 묶어서 사용하지 않으면 mixArr에는 숫자이거나 문자로 이뤄진 배열을 의미한다.

객체의 타입지정

let myInfo:{name : string, age : number, isMarried : boolean}
	= {name: "박성수", age: 26, isMarried: false}

다음과 같이 지정한다. 만약 타입이 한번 지정되었으면 해당하는 값이 들어오지 않으면 오류를 발생시킨다.

만약 해당하는 값이 들어올 수도 들어오지 않을 수도 있는 경우에는 다음과 같이 옵션을 지정해 줄 수도 있다.

let myInfo:{name : string, age : number, isMarried?: boolean}
	= {name: "박성수", age: 26, isMarried: false}

옵션을 위와 같이 지정해 주면 오류를 발생시키지 않는다.

만약 객체에 타입을 지정해야할 키값이 너무 많고, 해당 키값들이 모두 같은 값을 가진다면 다음과 같이 일괄지정할 수도 있다.

type strObject = {[key:string] : string } ;

위와 같이 설정하면 string키값을 가진 값은 모두 string이 들어와야한다는 뜻이다.

함수의 타입지정

• 인자의 타입지정

const newFunction = (x :number) => {
	return x + 5;
}

인자에만 타입을 지정하고 싶으면 위와 같이 사용한다.

• 리턴값의 타입지정

type funcType = (x: number, y: number) => number;

const newFunction: funcType = (x, y) => {
  return x + y;
  };

위와 같이 인자와 결과값을 한 번에 지정하고 리턴값까지 타입을 지정해 주는 alias를 만들어 준 후 그 alias를 부여하는 방식과

function newFunc(x: number, y: number): number {
    return x + y;
  }

const oldFunc = (x: number, y: number): number => {
    return x + y;
  };

함수에 직접 하나하나 부여하는 방식도 있다.

함수의 리턴값이 타입으로 지정된 경우에는 리턴하는 함수가 꼭 있어야한다.

타입으로 void를 지정하면 리턴값이 생기는 것을 의도적으로 막을 수 있다.