Typescript

[Typescript] Typescript의 기본 타입

joy_lee 2022. 7. 11. 14:55

Typescript에서 타입 지정은 기본적으로 변수의 오른쪽에 명시된다.

 

기본 타입의 선언

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// TS 문자열 선언
let str: string = "hello";
 
// TS 숫자
let num: number = 10;
 
// TS 배열
let arr: Array<number> = [123];
let heros: Array<string> = ["Capt""Thor"];
let items: number[] = [234];
 
// TS 튜플
// 특정 위치(인덱스)의 타입을 따로 지정할 수 있다
let address: [string, number] = ["gangnam"11];
 
// TS 객체
let obj: object = {};
// 속성의 타입도 지정
let person: { name: string; age: number } = {
  name"thor",
  age: 100,
};
 
// TS 진위값
let show: boolean = true;
cs

 

함수 타입의 선언

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 함수의 파라미터에 타입을 정의하는 방식
// function sum(a: number, b: number) {
//     return a + b;
// }
 
// 함수의 반환 값에 타입을 정의하는 방식
// 함수에서 반환값이 없으면 에러처리함
function add(): number {
  return 10;
}
 
// 함수에 타입을 정의하는 방식
function sum(a: number, b: number): number {
  return a + b;
}
 
// JS에서는 필요없는 뒤의 인자들은 무시함(JS의 유연함)
sum(10203040); // TS에서는 불필요한 인자를 입력했다고 엄격하게 체크해줌
cs

함수의 인자, 반환값, 혹은 인자와 반환값에 타입을 정의할 수 있다.

 

그 외에 Any, Void 타입도 있다.

Any: 모든 타입을 통칭하는 타입. 특별히 명시되지 않는 경우 지정된다.

Void: 함수에서 반환값이 없음을 지정하는 타입.

 

 

함수의 옵셔널 파라미터(optional parameter)

JS에서는 함수에서 여러개의 인자가 사용된다고 선언되어도 선택적으로 사용할 수 있다.

예를 들어 array,forEach의 경우 필수인 매개변수가 있고, 선택적인 매개변수는 Optional이라고 표시되어있다.

선택적인 매개변수가 필요없다면 사용하지 않고 함수를 실행할 수 있다.

하지만 TS에서는 매개변수가 선언되었는데 사용되지 않으면 엄격하게 체크한다.

그래서 선택적으로 사용할 경우에는 옵셔널 파라미터를 사용해야 한다.

파라미터 뒤에 물음표를 쓰면 된다.

1
2
3
4
5
6
7
8
// 함수의 옵셔널 파라미터
// 물음표를 통해 선택적으로 사용하고 싶은 파라미터를 표시한다(생략가능한 인자)
function log(a: string, b?: string) {
// ...
}
 
log('hello world');
log('hello ts''abc');
cs

위와 같이 정의된 log함수에 인자가 하나만 있어도 오류가 발생하지 않는다.

 

위의 기본타입에서 생략된 타입은 아래 사이트에서 확인할 수 있다.

https://joshua1988.github.io/ts/guide/basic-types.html#%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85

 

기본 타입 | 타입스크립트 핸드북

타입스크립트 기본 타입 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다. Boolean Number String Obj

joshua1988.github.io

 

 

강의

https://www.inflearn.com/course/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8/dashboard

 

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관

www.inflearn.com