[TS] 타입스크립트 타입,함수,유니온,인터섹션

전예훈·2023년 5월 30일
0

TypeScipt 타입

Boolean 타입

let isShow: boolean = true;
let isDone: boolean = false;

가장 기본적인 타입으로 JS에서도 마찬가지고 boolean이라고 불리는 값 true, false

Number 타입

let number1: number = 5;
let number2: number = 0.7;

String 타입

let firstName: string = "Huni";
let lastName: string = 'Jeon';
let longString: string = `Huni is a developer.
He is 20 years old.`

Array 타입


//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
let numberList: Array<number> = [4, 7, 100];

첫 번째 방법
배열의 요소들을 나타내는 타입뒤에 배열을 [] 을 쓰는것

두 번째 방법
배열을 먼저 작성한뒤에 <> 안에 배열의 요소들을 나타내는 타입

Tuple 타입

let user: [string, number, boolean] = ["kimcoding", 20, true];

TypeScript 에서 튜플 타입을 사용하면 요소의 타입과 개수가 고정된 배열을 표현할수 있다.

Object 타입


let obj: object = {};

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

TypeScript에서 object 타입은 모든 객체를 수용하는 타입이다. 객체의 프로퍼티 타입들이 any로 지정되기 때문에 어떠한 프로퍼티라도 추가할 수있다.
프로퍼티 각기 명시해 주는것이 좋고 객체는 키 벨류도 지정할 수 있다

Any 타입


let maybe: any = 4;

//any 타입을 사용하게 되면 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당 할 수있게 됩니다.

let obj: object = {};

//에러가 납니다.
obj = "hello";



let maybe: any = 4;

//정상적으로 동작합니다.
maybe = true;

// 실제할당된 값을 가지지 않고 메서드 및 프로퍼티로 접근해도 에러가 나지 않는다. 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환 되는 값은 undefined
let maybe: any = 4;

//undefined로 출력됩니다.
console.log(maybe.length);

TypeScript 함수

자바스크립트 함수

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

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

타입스크립트 함수

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

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

// 만약 리턴값이 없다면 void 이용가능
let printAnswer = (): void => {
	console.log("YES");
}

자바스크립트에서와는 달리 타입스크립트에서는 매개변수의 개수에 맞춰 전달인자를 전달해야한다.

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

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

TypeScript 유니온타입

유니온 타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입
| 연산자를 이용하며 자바스크립트의 || (or)연산자와 같이 보면 된다

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}`);
  }
}

printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello

printvalue값이 넘버나 스트링 값중 둘중하나일때인데 만약value가 숫자이면 if문을 출력하고
그게아니라 value 값이 문자열이면 else구문을 출력한다.


TypeScript 인터섹션 타입

인터섹션은 둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법이며 & 연산자를 표현한다
자바스크립트에서는 && (and)연산자와 같다고 보면 된다.

type User = Developer & Person;

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);
}
profile
캐치테이블 QA

0개의 댓글