TypeScript 타입스크립트 (1)

minkyung·2022년 11월 29일
0
post-thumbnail

📄 Typescript 가이드북
📽️ 코딩앙마 타입스크립트 강의

TypeScript 사용 목적

JavaScript (동적언어)

런타임에 타입 결정, 오류 발견

개발자가 실수하면 사용자가 그 오류를 그대로 볼 수 있음

Java, TypeScript (정적언어)

컴파일 타임에 타입 결정, 오류 발견

TypeScript 타입 종류

튜플

여러 type이 들어가 있는 배열

const array : number[] = [1,2,3,4]
const tuple : [boolean, string] = [true, 'the result is ok']

void (함수의 리턴타입)

return 값이 없는 함수

function voidType () : void {
console.log('voidType')
}

never (함수의 리턴타입)

항상 에러를 반환하거나, return 값을 절대로 내보내지 않는 함수 (무한 루프)

enum

enum OS {Window,
         Ios,
         Android
        }

→ Window, Ios, Android의 값을 따로 지정하지 않으면 0부터 순차적으로 인덱스 값 지정됨

enum OS {Window = 'win',
         Ios = 'ios',
         Android = 'and'
        }

null, undefined

typescript에서는 하나의 타입으로 처리됨

let nullable:null = null;
let undefinedable:undefined = undefined;

null로 명시적 타입이 설정된 변수에 null이 아닌 값이 할당되면 오류 출력

nullable = undefined;
//오류 출력 : [ts] 'undefined' 형식은 'null' 형식에 할당할 수 없습니다.

null, undefined를 항상 서브 타입(Sub Type)으로 할당 가능하게 하려면, tsconfig.json 설정에서 "strictNullChecks" 값을 false로 설정하면 됨

// tsconfig.json
"strictNullChecks": false,

interface

let user : object;

user = { 
  name : "alex",
  age : "26"
}

console.log(user.name) ← 읽을 수 없음. object에는 특정 속성 값에 대한 정보가 없음

↓ interface 사용

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

let user : User {
  name : "alex",
  age : 26
}

console.log(user.name)
//alex

프로퍼티를 정해서 객체를 표현하고자 할 때 인터페이스를 사용함

💡 obtional property
해당 속성을 선택적으로 받을 수 있음

interface User {
  name : string;
  age : number;
  gender?: string;
}
// gender 프로퍼티는 선택적으로 받을 수 있음

💡 readonly
읽기 전용 속성
생성할 때만 할당 가능하고 이후에 재할당 불가능

interface User {
  name : string;
  age : number;
  gender?: string;
  readonly birthYear : number;
}

let user : User {
  name : "kim",
  age : 26,
  birthYear : 1997
}

user.age = 27 ← ⭕️
user.birthYear = 1996 ← ❌
profile
프론트엔드 개발자

0개의 댓글