타입스크립트 빠르게 훑어보기 1 - 기본형/튜플/함수

 

할꺼 많다... 배울꺼 많다... 그래서 나중에 바로 꺼내서 보게 글쓴다...

 

일단 타입스크립트를 연습할 수 있는 사이트를 켜놓고 시작하자. 참고로 console.log()가 왜 안되지라고 한다면 상단에 있는 run을 눌러주면 나온다(run안눌러도 에러 잡아주길래 자동으로 run해주는줄 알았음).

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

(해당 포스팅은 언제든지 내용 수정/추가 될 수 있음)

 

 

0. 기본

let user = {
    name: 'john'
};

user.name = 23 // error

애초에 타입스크립트에서 작성하면 다음과 같이 타입을 쓰지 않아도 기본적으로 인식을 해서 다른 타입을 썼을 때 에러를 내준다(유니온 타입).

 

1. 기본형

let fruit: string = 'apple';
let age: number = 34;
let isGood: boolean = true;
let arr: [] = [];
let arr2: number[] = [1, 2]; // 이 둘은 동일 
let arr3: Array<number> = [1, 2, 3]; // 이 둘은 동일
let arr4: Array<string> = ['a'];
let a: null = null;
let b: undefined = undefined;
let r: Regex = ([A-Z])\w+;
let obj: { // age는 필수요소 아니라는 의미
  name: string,
  age?: number
}

그냥 땡땡이 뒤에 타입을 써주면 된다.

 

참고로

let arr1: [number, number]; // 튜플형식. 안에 인자개수를 지정해서 써줘야함.
let arr2: number[]; // 자유로움
let arr3: Array<number>; // 자유로움

얘네는 똑같이 배열 안에 숫자만 들어간 형태를 받겠다는 동일한 의미지만, 1번같은 경우 아래 나올 튜플 형식으로 안에 인자 개수를 쓴만큼만 써야한다는 조건이 있음.

 

 

2. 튜플

let arr: [string, number] = ['a', 1];

튜플은 여러 데이터를 하나로 묶는것을 의미함.

위에 코드는 배열 안에 첫번째 인자는 string, 두번째는 number로 넣겠다는 의미(순서 바꾸면 에러).

 

 

3. 함수

// return 값이 없는 함수
function a(): void {
    console.log('hello')
}

// return 값으로 뭐가 나올지 모름
function a2(): any {
  // ...
}

// void처럼 무언가 반환하진 않지만 주로 에러 핸들링할때 never를 씀
function a3(): never {
  throw new Error();
}

// 인자로 숫자만 들어간 배열로 받겠다
function a4(arr: number[]) {
  // ...
}

// 인자로 string 혹은 숫자가 들어가고, 리턴값도 그러하다
function a5(arg: string | number): string | number {
  return arg;
}

네번째 함수에서 뒤에 이 함수가 어떤 형식을 리턴하는지 안써줬는데, 이는 오류가 나진 않지만 기왕 타입스크립트 쓰는거 명시적으로 지정해주는 것이 제일 좋긴 함.

 

그리고 제일 마지막 함수는 저렇게 써도 되지만 나중에 나올 제너릭 형태로 쓰는 것이 좋음.

 

function a6(...nums: number[]): number {
  return nums.reduce((p, c) => p + c);
}

a6(1,2,3,4)

이 경우 인자를 배열형태로 넣진 않았지만 알아서 배열로 인식하기때문에 에러가 나지 않음.