Typescript_01. 타입

타입이란?

타입은 값에 대한 정의를 말하며, 값이 할 수 있는 것과 할 수 없는 것을 구분해준다

원시(Primitive) 타입

자바스크립트와 마찬가지로 TS에서도 string, number, boolean은 원시 타입이다.

any 타입

공식문서에 따르면, any 타입은 타입체크 에러를 유발하는 것을 막고싶을 때 사용하는 타입이라 한다.

any는 타입체크가 되지 않는다. 만약 any를 에러 처리하고 싶다면, 컴파일 플래그의 noImplicitAny를 사용하면 된다.

any 타입을 사용하면 타입스크립트를 사용할 이유가 없다.

let brandName: any = 'Margiela';
brandName = 'MM6';
console.log(brandName); // MM6

unknown 타입

기능

• unknown을 사용하면 TS가 에러를 뱉어낸다

언제 사용하나

• 데이터 타입이 무엇인지 모를 때

// X
function multiByTwo(number: unknown) {
  return number * 2; // 'number'은(는) 'unknown' 형식입니다.ts(18046)
}
console.log(multiByTwo(2))

// O
function multiByTwo(number: unknown) {
  if (typeof number === 'number') {
    return number * 2; // 'number'은(는) 'unknown' 형식입니다.ts(18046)
  }
  return '숫자를 넣으시오'
}
console.log(multiByTwo(2)) // 4
console.log(multiByTwo('2')) // 숫자를 넣으시오

Boolean 타입

let isEuropeanBrand: boolean = true;

// O
isEuropeanBrand = typeof 'brand' === 'string';
isEuropeanBrand = 20 > 0;

// X
isEuropeanBrand = 'Amazing';
isEuropeanBrand = [];
isEuropeanBrand = null;
isEuropeanBrand = undefined;

number 타입

let collectionPieces: number = 128;

// O
collectionPieces = 300;
collectionPieces = Infinity * 0.1;
collectionPieces = parseInt('144');

// X
collectionPieces = '122';

BigInt

자바스크립트에서 2의 53승보다 높은 숫자를 bigInt라 한다.

// 생성자
let a: bigint = BigInt(99999999999);
// 리터럴
let b: bigint = 99999999999n;

자바스크립트에서 최대 수치를 넘어갈 경우, 1 차이가 나도 같은 수로 여긴다. 하지만 2 이상 차이나면 정상적으로 다른 수로 인지한다.

const safeNumber = Number.MAX_SAFE_INTEGER;
console.log(safeNumber); // 9007199254740991

// 최대치를 넘어가면 1 차이나도 같은 수로 취급
const safeNumberNext = safeNumber + 1;
const safeNumberNextNext = safeNumber + 2;
console.log(safeNumberNext === safeNumberNextNext); // true

// 2 이상 차이나면 다른 수로 친다
const safeNumberNextNextNext = safeNumber + 1;
const safeNumberNextNextNextNext = safeNumber + 3;
console.log(safeNumberNextNextNext === safeNumberNextNextNextNext); // false

String Type

let brandName: string = 'Margiela';

//O
brandName = 'Maison Margiela';

// X
brandName = 2; 

타입 추론(Type Inference)

변수에 타입을 지정해주지 않아도 암묵적으로 string 타입으로 여긴다. 그래서 숫자를 할당하려니 에러가 발생한다.

let brandName = 'margiela';

// 에러 : 변수의 타입을 string으로 인지하기 때문
firstName = 123;

변수 선언만 하더라도 타입을 명시적으로 선언해주자

// Bad prac : any 타입으로 설정된다
let total1;

// Good prac : 데이터가 없더라도 명시적으로 number 타입으로 선언해줄 수 있다
let total2: number;

total2 = 30;

Object 타입

객체 타입 선언

let fashionBrand: { name: string; country: string; } = { name: 'margiela', country: 'France' };

옵셔널 프로퍼티

let model: {
  name: string,
  height: number,
  hairColour?: string // optional property
}

model = {
  name: 'Gil',
  height: 177,
}

model = {
  name: 'Sujan',
  height: 163,
  hairColour: 'Red'
}

Type Aliases(타입 별칭)

Type에 키워드를 붙여 나만의 type을 창조할 수 있다.

type Brand = {
  name: string;
  country: string;
  lookbook?: string
}

// Brand라는 별칭으로 타입을 설정할 수 있다
let chanel: Brand = {
  name: 'Chanel',
  country: 'France',
}

// 작은 타입
type Label = {
  logo: string;
  height: number;
  width: number;
}

// 큰 타입
type Jacket = {
  brandName: string;
  skuNumber: number;
  produced: Date;
  season: string;
  label: Label;
}

const woolCoat = {
  brandName: 'Chanel',
  skuNumber: 227372,
  produced: 20220202,
  season: 'FW23',
  label: {
    logo: 'Chanel Mens',
    height: 10,
    width: 55
  }
}

union 타입

사용할 타입이 여러 종류일 경우 union으로 타입을 설정해주면 된다.

// Union type - funcion
function selectSong(id: number | string) {
  console.log('Our song id is' + id);
}

selectSong(1223); // Our song id is1223
selectSong('Fly me to the moon'); // Our song id isFly me to the moon

// Union type - type
type Female = {
  name: string;
  bra: string;
  underwear: string;
  height: number;
  weight: number;
}

type Male = {
  name: string;
  underware: string;
  height: number;
  weight: number;
}

type Model = Male | Female;

let model1: Model = {
  name: 'Sujan',
  bra: 'A',
  underwear: 'A',
  height: 177,
  weight: 73
}

// X : bra 속성이 없기 때문
let model2: Model = {
  name: 'Sujan',
  underwear: 'A',
  height: 177,
  weight: 73
}

Intersection 타입

// Intersection Type

type Jacket = {
  name: string;
  care: string;
}

type Blouse = {
  name: string;
  fabric: string;
}

// 하나라도 빠지면 에러 발생
type Top = Jacket & Blouse;

const myTop: Top = {
  name: 'silk blouse',
  care: 'dry care',
  fabric: 'silk'
}

Index signature

객체 타입에서 키와 값의 타입을 설정할 수 있다.

// Index Signature
type Brand = {
  name: string;
  country: string;
  stockist: {
    [key: number]: string;
  }
}

const margiela: Brand = {
  name: 'margiela',
  country: 'France',
  stockist: {
    1: 'Seoul',
    2: 'Paris',
    3: 'Berlin'
  }
}

Array 타입

선언 방법

// literal
let vips: string[] = ['John', 'Sujan', 'Kanye'];
let guests: Array<string> = ['Kim', 'Johny', 'Kuro'];

// union
let fans: (string | number)[] = [22, 'two', 31];

Tuples 타입

튜플은 길이와 값의 타입이 미리 정해진 것을 말한다.

// Tuples
let vips: [string, string];

// O
vips = ['John', 'Sujan'];

// X : 튜블 아이템 2개만 올 수 있다
vips = ['John', 'Sujan', 'Bob'];

만약 몇 개 올지 몰르는 경우에는 이런 방식으로 접근하면 된다. 타입은 고정하되 데이터 개수는 유연하게 열어둘 수 있다.

// 2 - 3개 허용
let fans: [string, string, string?];
fans = ['Sujan', 'Yoji', 'Junya']

// 2 ~ n개 허용
let fans: [string, string, ...string[]];
fans = ['Sujan', 'Yoji', 'Junya', 'Kiko', 'Hussein'];

Read-only Array

Read-only는 읽고 복사하는 것만 가능하다.

// Read-only array
let number: readonly number[] = [1, 2, 2, 3];

// X : 읽기만 가능하고 변경은 불가하다
number.push(3);

Read-only Tuples

// Read-only Tuples
type readOnlyModel = readonly [string, string, string];
const models: readOnlyModel = ['John', 'Sujan', 'Bob'];

// X
models.push('new model');

null, undefined 타입

• undefined : 변수는 선언되었는데 값이 할당되지 않은 상태
• null : 의도적으로 비어있음을 표현하는 상태. undefined를 참조하는 무언가를 다시 변수에 저장할 때 자주 보인다

그냥 타입스크립트 쓰자..

void, never 타입

• void : 어떤 값도 리턴하지 않는 함수 타입
• never : 종료되지 않는 함수 타입

// void 
const hello = (): void => {
  console.log('hello')
}
hello();

// never
const throwError = (): never => {
  throw new Error('에러를 던지면 함수가 안끝나지');
  console.log('여기 콘솔 있어요'); // 접근할 수 없는 코드가 있습니다.ts(7027)
}
throwError();

Enums 타입

Enums은 선택지를 위한 타입이다. Enums는 1) numeric과 2)string 타입을 제공한다.

Enums는 마치 드롭다운과 같이 선택지 중 하나를 강제 선택하도록 하는 기능이 있다.

enum Gender {
  male = 'male',
  female = 'female',
}

type Model = {
  name: string;
  country: string;
  gender: Gender;
}

const sujan: Model = {
  name: 'sujan',
  country: 'France',
  gender: Gender.male
}