타입스크립트 정리2: annotation, 함수

Type annotation

타입 애너테이션으로 타입을 선언해줄 수 있다

어떤 함수는 숫자만 반환해야 한다던가

어떤 객체는 color라는 프로퍼티를 갖고 그것은 문자열의 배열이어야 한다

이렇게 정해놓을때

변수 이름 뒤에 콜론 : 을 적고 타입을 적어주면 된다

//  JS

const myVariable = 'So Awesome!';

//  TS

const myVariable: string = 'So Awesome!';

콜론 뒤에 string이 타입스크립트에게 이 변수가 문자열이라는 걸 알려주고 ‘So Awesome!’ 과 같다고 말해주는 것이다.

사용하는 법

let myVar: type = value

구문에서 등호 왼쪽에 타입을 써준다

(소문자로 써야한다)

이렇게 지정해 놓으면 이 변수에 다른 타입을 배정하려고 하면 오류 표시가 뜬다

또한 해당 타입에는 쓸수 없는 메서드를 쓰려고 하면 오류가 뜬다.

숫자와 불리언

숫자는 number

let myNumber: number = 9;

불리언은 boolean

let isTrue: boolean = false;

타입스크립트 컴파일링

타입스크립트로 작성하고 자바스크립트로 컴파일할때는

터미널에서 파일 위치 디렉터리만 지정하면된다

터미널에서 다음과 같이 쓴다

tsc basic.ts

이렇게 하면 basic.js 파일이 생성된다.

터미널 자체에서 위에 타입선언 등과 같은 오류를 피드백해준다.

피드백은 해 주지만, 오류가 있어도 .js로 컴파일링하는 걸 중지시키거나 하지는 않는다

대신에 코드를 작성하는 내내 편집기에서 오류를 계속 알려준다

let은 var로 바뀌는데 이건 javascript 버전을 설정해두면 바꿀수 있다.

애너테이션이 모두 사라진다. 타입스크립트 문법이니까.

타입 추론 ( Inference)

애너테이션은 대부분의 경우에 필요 없다

실제로 변수를 작성할 때는 타입 추론(inference)를 사용한다

타입스크립트는 변수 선언을 보면 어떤 값에 할당되는지를 파악한다

let x = 27;
x = "Twenty-seven';

// ERROR - Type 'string' is not assignable

27이 할당되었는데

그 밑에 문자열을 넣으니 오류라고 표시된다

이처럼 타입을 지정하지 않아도 타입스크립트는 타입을 추론한다

처음 선언한 변수와 다른 타입을 넣으면 오류라고 표시해주는 것.

다른 타입도 마찬가지로 추론한다.

정리하면, 타입스크립트는 할당된 변수를 토대로 타입을 추론할 수 있다.

하지만 애너테이션으로 직접 할당해야 하는 경우도 있다.

(문자열이 아닌 문자열 배열 타입이라고 하는 것처럼)

Any

any 타입은 말 그대로 어떤 타입도 받을 수 있다

일반적으로는 사용하지 않는다

let thing: any = 'hello';

thing = 1;
thing = false;
thing()  // 변수 자체를 함수로 호출할 수도있다
thing.toUpperCase() // 존재하지 않는 메서드에도 접근가능(지금 thing은 불리언)

any 타입은 TypeScript에서 기본적으로 확인하는 걸 무시한다.

annotation 사용법

const movies = ["Arrival", "the Thing", "Aliens", "Amadeus"];
let foundMovie: string; // foundMovie는 문자열이라고 애너테이션.

for(let movie of movies) {
	if(movie === "Amadeus") {
		foundMovie = "Amadeus";
	}
}

반복문을 돌면서 조건이 충족되면 foundMovie를 “Amadeus”로 할당한다. foundMovie가 문자열이 아닌 값이 되는걸 막는다.

any 타입으로 할당을 막기 위해서 작동한다.

함수 파라미터와 반환값에 할당하기

const encourageStudent = (name: string) => {
	return `Hey, ${name}, your're doing GREAT!`;
}

encourageStudent('you');  // O

encourageStudent(84);  //  X -> TypeScript ERROR!

함수에 넣을 변수를 문자열로 미리 지정해주면 숫자를 넣으면 에러를 알려줌

function square(num) {
	return num * num;
}

square(3)
square('asd')
square(true) 

이 함수는 숫자를 넣어야 정상 작동. 문자열을 넣으면 오류가 나버린다

function square(num: number) {
	return num * num;
}

이렇게 넣을 변수를 number라고 annotation 해주면

square(’asd’) 라고 넣었을때 바로 오류 표시가 뜬다.

에러가 생길테니 고치라고 뜨는 것. 무시하고 컴파일하면 제거된다. 타입스크립트의 기능.

즉 변수의 타입을 지정해두면 다른 타입은 변수로 전달할 수 없게되는 것이다.

변수가 여러개인 경우

const doSomething = (person: string, age: number, isFunny: boolean) => {};

doSomething("chickenFace", 74, false);

여러개 변수가 필요한 함수라면 각각 타입을 달리 지정해줄수도 있다.

이러면 변수 순서에 맞게 알맞은 타입을 넣어야 오류 표시가 생기지 않는다.

변수를 3개 넣어야 하는데 1개만 넣어도 모자라다고 오류 표시가 뜬다.

이런 식으로 타입스크립트는 제자리에 맞는 타입이 들어가게끔 도와준다.

기본값을 할당할 때

function greet(person: string = "stranger") {
	return `Hi there, ${person}!`;
}

이렇게 애너테이션 뒤에 기본값을 넣어준다. 애너테이션 앞에 쓰면 안됨

함수에 들어갈 변수 person은 문자열이고, 입력하지 않으면 기본값으로 “stranger”가 들어간다.

반환값에 애너테이션 적용

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

함수에 들어갈 변수도 number로 애너테이션 해놓고 함수 뒤에 콜론: 을 넣고 number라고 적어주면

반환값도 number로 고정되는 것이다.

function square(num: number): number {
	 return num * num; 
}

이렇게 화살표 함수가 아닌 function을 쓰는 방식에서도 적용가능.

사실 이렇게 써주지 않아도 타입스크립트는 추론을 한다. 입력값이 둘다 숫자면 숫자겠구나 이런식.

애너테이션을 쓰는 이유는 확실히 할 수 있기 때문.

이를 통해 함수가 무엇을 반환하는 지 확실히 하고 오류를 줄일 수 있다.

반환값을 number라고 지정해놓으면, 함수를 작성할때 반환값이 number가 아니게 되면 오류 표시가 뜬다.

무엇을 반환할지 분명히 할 수 있다.

함수가 복잡해지고 줄이 길어지면 예측하는 것과 다르게 작성될수도 있다. 그것을 예방하는 것이다.

익명함수의 문맥상 타입 지정

익명함수

const world = function() {
			console.log("world")
}

기명함수

function hello() {
		console.log("hello");
}

기명 함수는 호이스팅이 되고 익명 함수는 호이스팅에 영향을 받지 않음.

타입스크립트로 익명함수를 쓸때

const colors = ["red", "orange", "yellow"];

colors.map(color => {
		return color.toFixed()
}

toFixed()는 소수를 소수점 뒤에 나타날 자릿수를 정해 고정 소수점으로 나타내는 함수. 즉 문자열에는 맞지 않다.

타입스크립트로 위와 같은 코드를 치면 오류 표시가 뜬다.

colors에는 문자열만 들어있으니 해당 map 함수가 맞지 않다는것.

이게 익명함수를 쓸때 문맥상 타입을 지정해주는 기능이다.

Void

const annoyUser = (num: number): void => {
		for(let i = 0; i < num; i++) {
				alert('HIIIII!!');
		}
}

보이드 타입은 주로 함수에서 사용된다 드물게.

아무것도 반환하지 않는 함수의 반환 타입으로 사용한다

아무것도 반환하지 않는 하나의 방법.

아무것도 반환하지 않는 함수를 써야 하는데

:void 라고 해놓고 무언가를 반환하게 함수를 만들면 오류 표시가 뜬다.

Never

타입스크립트의 고유 타입

함수의 반환 타입으로 쓰이는 경우와

절대 반환되지 않아야 할 함수를 애너테이션 처리할 때 쓰이는 경우가 있다

void는 아무것도 반환하지 않은 경우 함수의 백그라운드에서 undefined 상태로 반환된다

never는 함수가 아무것도 반환하면 안 된다는 것을 나타내기 위해 쓰인다

const neverStop = (): never => { // 이 함수는 영원히 반복되기 때문에 아무것도 반환하면 안된다never
		while(true) {
			console.log("i'm still going!");
		}
}

const makeError(msg: string): never {  // 이 함수는 오류를 발생시키고 있으므로 반환할 기회가 없다. 그것을 분명히 하기 위해 never
	throw new Error(msg);
}

never와 void를 비교 하면 void는 엄밀히 값이다

void를 반환한 함수. undefined 상태로 반환된다

never는 이 함수가 절대 반환할 기회를 가지면 안된다고 하는 것이다.