기본타입

🔹String

JS에서 문자열

let str = 'hello';

TS에서 문자열

let str: string = 'hello'; 

TIP
위와같이 : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입표기(Type Annotation)이라고 한다.

🔹 Number

let num: number = 10;

🔹 Array

배열 타입이고 숫자만 들어 갈수 있다.

let arr: Array<number> = [1,2,3];
let items: number[] = [1,2,3];

배열 타입이고 문자만 들어 갈수 있다.

let arrStr: Array<string> = ['one','two','three'];
let items: string[] = ['one','two','three'];

정해준 type과 다를 경우 오류를 보여준다.

🔹 Tuple

let address: [string,number] = ['gangnam',100];

• 모든 index에 타입을 정해준다.
• 만약 정의 하지 않은 타입, 인덱스로 접근할 경우 오류가 난다.

🔹 Object

let obj: object = {}

// 튜플로 작성하기
let person: {name:string, age:number} = {
  name: 'young',
  age:26
}

• 변수명에 마우스를 호버했을때 정의해준 타입을 알려준다.
  

🔹 Boolean

let show: boolean = true;

🔹 Any

• 모든 타입에 대해서 허용한다.

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a',2, true]

2020.11.16추가

🔹 Void

• 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다.

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

2020.11.16추가

🔹 Enums

• C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값들의 집합을 의미한다.

enum Colors {Red, Liem, Yellow}
let color: Colors = Colors.Red;

• 인덱스 번호로도 접근할 수 있다.

enum Colors {Red, Liem, Yellow}
let color: Colors = Colors[0]; 

• 이넘의 인덱스를 사용자 편의로 변경사용 가능.

enum Colors {Red = 2, Liem, Yellow}
let color: Colors = Colors[2]; // Red
let color: Colors = Colors[4]; // Yellow

Enums 자세히 보기

함수타입

🔹 파라미터

함수의 파라미터에 타입을 정의하는 방식

function sum(a:number, b: number) {
  return a + b
}

sum(2,3) // 5

함수의 타입을 정의하는 방식

function sum(a:number, b: number): number {
  return a + b
}
sum(2,3) // 5

🔹 반환값

함수의 반환 값에 타입을 정의하는 방식

function add(): number {
  return 20;
}

🔹 파라미터를 제한하는 특성

function func(a:number, b:number): number {
  return a + b;
}

func(10, 20); // 30
func(10,20,30,40) // error, too many parameters
func(10) // error, too few parameters

정의된 매개 변수 값을 초과할 경우 오류가 난다.즉 받을수가 없다.

🔹 옵셔널 파라미터

function log(a:string , b:string){
  console.log(`a:${a}, b:${b}`);
}

log('hello world'); // error, too few parameters

선택적으로 파라미터를 받고 싶다면 ?(물음표)를 이용해서 오류를 해결할수 있다.

function log(a:string , b?:string){
  console.log(`a:${a}, b:${b}`);
}
log('hello world');

참고
함수 타입스크립트북
캡틴판교_타입스크립트 입문