[블로깅]타입스크립트 문법(1):타입,함수,유니온,인터섹션

타입

기본적으로 boolean, number, string의 경우 다음의 형태로 타입을 선언해 사용할 수 있습니다.

let 변수명: 변수타입 = 변수값;

let name: string = "myname";

 

array는 두 가지 방법으로 배열 타입을 선언할 수 있습니다. 다음의 경우 배열 타입은 기본적으로 하나의 타입만 작성할 수 있습니다.

//방법1
let array: 타입[] = [선언한 타입을 가진 값1,선언한 타입을 가진 값2]
let fruit: string[] = ['apple', 'banana', 'grape']

//방법2
let array: Array<타입> = [선언한 타입을 가진 값1,선언한 타입을 가진 값2]
let numberList: Array<number> = [96,7,17];

Tuple 타입을 사용하여 요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

이때 index마다 타입이 정해져 있기 때문에 주의해야 합니다.

let user: [string, number, boolean] = ['myname', 23, true];
console.log(user[2].toString()); //타입 에러

obejct는 다음과 같이 표현할 수 있으며 객체의 프로퍼티 타입들은 any로 지정되어 있어 어떤 프로퍼티라도 추가할 수 있습니다. 그러나 객체의 프로퍼티 타입들도 명시해 주는 것이 좋습니다.

let obj: object = {};
let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

any 타입은 알지 못하는 타입을 표현하거나 타입이 섞인 배열을 받을 때 사용할 수 있습니다.

any 타입을 사용하면 변수에 값을 재할당할 때 타입에 상관없이 값을 재할당할 수 있습니다.

let maybe: any = 4;
maybe = true;

let list: any[] = [1, true, "free"];

---

함수

타입스크립트에서 함수를 표현할 때는 파라미터의 타입과 리턴값의 타입을 명시해야 합니다. 리턴값이 없다면 void를 사용합니다.

//(파라미터: 파라미터타입):리턴값타입

//named function
function add(x: number, y: number):number {
	return x + y;
}

//arrow function
let add = (x: number, y: number):number => {
	return x + y;
}

자바스크립트와 달리 파라미터의 개수에 맞춰 전달인자를 전달해야 합니다.

파라미터 이름 끝에 ?를 붙여 선택적 파라미터를 설정할 수 있습니다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

greeting('coding'); //hello, coding undefined 

greeting('coding', 'kim'); //hello, coding kim 

greeting('coding', 'kim', 'hacker'); //Expected 1-2 arguments, but got 3.ts(2554)

---

연산자를 이용한 타입

Union(유니온)

| 연산자를 이용합니다. or연산자같이 A이거나 B라는 뜻인데요,  number | string은 숫자 또는 문자열 타입임을 의미합니다.

다양한 타입 값을 처리할 때 any보다 유니온을 쓰는 게 타입스크립트의 이점을 살린다고 볼 수 있습니다.

function printValue(value: number|string): void {
  if (typeof value === "number") {
    console.log(`The value is a number: ${value}`);
  } else {
    console.log(`The value is a string: ${value}`);
  }
}

유니온은 모든 타입에 공통인 멤버들에만 접근할 수 있습니다.

아래에서는 Developer와 Person의 공통 프로퍼티인 name에만 접근할 수 있습니다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
	console.log(someone.name);
}

나머지 프로퍼티에도 접근하고 싶다면 타입 가드를 사용하면 됩니다. 

타입 가드란 타입스크립트에서 타입을 보호하기 위한 기능 중 하나로 특정 코드 블록에서 타입의 범위를 제한해 해당 코드 블록 안에서 타입의 안정성을 보장할 수 있도록 합니다.

in연산자를 통해 프로퍼티가 존재하는지 여부를 검사할 수 있습니다.

function askSomeone(someone: Developer | Person) {
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

Intersection(인터섹션)

인터섹션은 & 연산자를 사용하여 표현합니다.

하나의 타입으로 묶어 합집합을 만들어 모든 프로퍼티에 접근할 수 있습니다.

따라서 argument에 모든 프로퍼티를 보내줘야 합니다.

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer & Person) {
  	console.log(someone.age);
	console.log(someone.name);
	console.log(someone.skill);
}

interface Developer {
  name: string;
  skill: string;
}

interface Person {
  name: string;
  age: number;
}

function askSomeone(someone: Developer | Person) {
  if ('skill' in someone) {
    console.log(someone.skill);
  }

  if ('age' in someone) {
    console.log(someone.age);
  }
}

//유니온 타입은 모든 프로퍼티를 전달할 필요 없음.
askSomeone({name: '김코딩', skill: '웹 개발'});
askSomeone({name: '김코딩', age: 20});

function askSomeone2(someone: Developer & Person) {
  	console.log(someone.age);
	console.log(someone.name);
    console.log(someone.skill);
}

//인터섹션 모든 프로퍼티를 전달해줘야함.
askSomeone2({name: '김코딩', skill: '웹 개발', age:20});

 

 

코드스테이츠 내용을 참고하였습니다.