Recent Posts
Recent Comments
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Today
Total
관리 메뉴

DH의 개발 공부로그

[TypeScript] 타입스크립트 기본 타입 선언 및 Optinal Type, Function, Readonly 본문

TypeScript

[TypeScript] 타입스크립트 기본 타입 선언 및 Optinal Type, Function, Readonly

DeveloperDH 2023. 2. 3. 19:29
728x90

TypeScript

기본 문법


변수명 : 타입명

변수를 선언할 때 타입을 지정해 줄 수 있습니다.

// 구문
let 변수명 : 타입명

// 예시
// 문자열
let str : string = 'shape'
// 숫자
let num : number = 20
// 배열
let arr1 : string[] = ['a', 'b', 'c', 'd'];
let arr2 : number[] = [1, 2, 3, 4];
let arr3: [string, number] = ["shape", 182];
// boolean
let isTrue : boolean = true;
// 객체 
const player : { name : string, age : number } = { name : 'shape', age : 20 };

Optinal Type

인자를 받는 상황일 때 어떤 인자는 필수지만, 선택적으로 받는 인자의 타입을 지정해줄 때 적용합니다.
age? : number와 같이 ? 입력하면 됩니다. 핵심은 옵션이 없어도 되지만, 만약 존재한다면 지정한 타입이어야 한다는 것 입니다.

const player : {
  name : string,
  age? : number // number || undifined
} = {
  name : 'shape'
};

타입으로 설정 후 적용

여러개의 변수 또는 함수에 같은 형식의 타입을 지정해 주어야 할 때 각각 타입을 지정해주기 보다,
하나의 타입으로 설정 후 적용도 가능합니다.

type Player = {
  name : string,
  age? : number,
};
const shape : Player = {
  name : 'shape'
};
const nick : Player = {
  name : 'nick',
  age : 10,
};

함수의 파라미터와 리턴 값 타입 정의

function 함수

// 구문
function 함수 (인자:타입) : 리턴타입 {}

// 예시
function play1 (name : string) : string {
  return {
    name : name // 같은 이름을 가지면 name으로 단축 가능
  }
};
const tami = play1('tami');

화살표 함수

// 구문
const 변수명 = (인자 : 타입) : 리턴타입 => {}

// 예시
const play2 = (name : string) : string =>  ({name});
const jony = play2('jony');

Readonly

immutability(불변성) 부여.
읽기전용으로 최초 선언 후 수정이 불가능 합니다.
한마디로 보호장치라고 할 수 있습니다.

type Info = {
  readonly name : string,
  age? : number
};

const play3 = (name: string) : Info => ({name});
const poter = play3('poter');
// poter.name = 'konte' X

const array : readonly number[] = [1, 2, 3, 4];
// array.push(5) X

참조

TypeScript: JavaScript With Syntax For Types
노마드 코더
[TS] TypeScript 시작하기
TypeScript 기본 문법 정리

728x90
Comments