타입스크립트 변수와 함수
var name: string = 'captain';
name 변수의 타입은 문자열이고 값으로 captain이라는 문자열을 갖는다는 의미이다.
변수 이름 뒤에 붙인 콜론(:)을 타입표기(type annotaion)라고 한다.
var name: string = 'captain';
name 변수의 타입이 string 으로 지정되어 있기 때문에 이제 이 변수는 문자열만 취급하는 변수가 됐다.
var age: number = 100;
age 변수는 number로 타입이 정의되어 있기 때문에 숫자만 취급할 수 있다. 초깃값으로 100을 넣었다면 이후에 값을 변경할때도 숫자만 할당할 수 있다.
var isLogin: boolean = false;
isLogin 변수는 참과 거짓을 구부하는 진위값을 다루어 boolean으로 타입을 선언한다.
var hero: object = { name: 'captain', age: 100 };
hero 변수는 name과 age라는 속성을 갖는 객체이다. 하지만 타입스크립트이 장점을 극대화하려면 가급적 타입을 최대한 구체적으로 선언해야한다. 이 관점에서 볼 때 예시의 object 타입은 어떤 속성이 있고 해당 속성이 무슨 타입을 갖는지 명시되어 있지 않으므로 자바스크립트를 사용하는 것과 크게 차이가 없다. (인터페이스에서 다시 알아보겠다.)
// 문자열 배열
var companies: Array<string> = ['네이버','삼성', '인프런'];
var companies: string[] = ['네이버','삼성', '인프런'];
// 숫자 배열
var cards: Array<number> = [13, 11, 2, 4, 5];
var cards: number[] = [13, 11, 2, 4, 5];
배열 타입은 두 가지 방법으로 선언할 수 있다.
배열 타입을 선언할 때 Array<string> 보다 string[] 형태의 문법을 사용하길 추천한다.
키보드 입력도 더 적고 직관적이기 때문이다. Array<T> 형태는 제네릭을 의미하는데 추후에 다시 살펴보겠다.
var items: [string, number] = ['hi', 11];
튜플은 배열의 길이가 고정되고 각 요소 타입이 정의된 배열을 의미한다.
items 변수는 배열 길이가 2고 첫 번째 요소는 문자열, 두 번째 요소는 숫자인 타입으로 정의되어 있다.
var myName: any = '캡틴';
myName = 100;
var age: any = 21;
any 타입으로 지정되었기 때문에 초기에는 캡틴이라는 문자열을 갖고 있지만 이후에 다른 데이터 타입의 값으로 변경할 수 있다. any는 이미 작성된 자바스크립트 코드를 타입스크립트로 변환할 때 유용하게 사용할 수 있는 타입이다.
javascript에서 null은 의도적인 빈 값을 의미한다. 반면 undefined는 변수를 선언할 때 값을 할당하지 않으면 기본적으로 할당되는 초깃값이다. typescript에서는 이 두 값을 타입으로 정의할 수 있다.
var empty: null = null;
var nothingAssigned: undefined;
empty 변수에는 null 값을 할당했기 때문에 null 타입을 지정했다.
nothingAssigned 변수는 선언만 하고 아무 값도 할당하지 않아서 undefined가 초깃값으로 지정된다.
설정 파일의 strict 옵션이 꺼져 있을 때는 신경쓰지 않아도 되는 타입들이다.
function sayWord(word) {
return 'word';
}
sayWord('hello'); // hello 반환
sayWord('bye'); // bye 반환
함수 특징은 입력 값에 따라 출력 값이 달라 진다는 점이다.
이 코드에서 word는 함수의 파라미터(매개변수)라고 한다.
sayWord 함수를 호출할 때 넘겨준 입력 값을 받는 역할을 한다. 파라미터가 있으면 함수를 호출할 때 값을 넘길 수 있다.
이 코드의 첫 번째 줄은 hello를 반환하고 두 번째 줄은 bye를 반환한다. 여기서 함수를 호출할 때 넘긴 문자열 hello, bye를 인자라고 한다. 이처럼 함수는 입력 값에 따라서 출력 값이 바뀌는 특성이 있다.
function sayWord(word): string {
return 'word';
}
반환값의 타입을 함수 이름 오른쪽에 :타입이름 으로 지정할 수 있다. 이 함수의 반환값은 문자열 이라는 것을 명시한다.
function sayWord(word: string): string {
return 'word';
}
word 파라미터의 타입이 문자열이라고 명시할 수 있다. 파라미터 오른쪽에 :타입이름 을 넣으면 파라미터의 타입이 정의된다.
function sayWord(word: string): string {
return 'word';
}
sayWord('hi','capt') //hi
javascript 함수에서는 파라미터와 인자의 개수가 일치하지 않아도 프로그래밍상 문제가 없다. 그러나 typescript 에서는 파라미터와 인자의 개수가 다르면 타입에러가 발생한다.
function sayMyName(firstName: string, lastName?: string): string {
return 'my name : ' + firstName + ' ' + lastName;
}
sayWord('captain') // my name : captain
함수의 파라미터를 선택적으로 사용하고 싶을때 옵셔널 파라미터(optional parameter)를 사용할 수 있다.
이 힘수는 두 번째 파라미터에 ?를 붙여서 옵셔널 파라미터로 정의했다. 따라서 두 번째 파라미터인 lastName은 호출할 때 넘겨도 되고 넘기지 않아도 된다.