2021/06/10 타입스크립트

Type Script

C#과 Java 같은 체계적이고 정제된 언어들에서 사용하는 강한 타입 시스템은 높은 가독성과 코드 품질 등을 제공할 수 있고 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 더욱더 쉽게 잡아낼 수 있습니다.

 

반면 자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로, 자바스크립트 변수는 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있습니다.

이를 약한 타입 언어라고 표현할 수 있으며 비교적 유연하게 개발할 수 있는 환경을 제공하는 한편 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을 가집니다.

그리고 타입스크립트는 이러한 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다.

 

npm 프로젝트로 생성

npm init -y (-y : 디폴트정보로 package.json 생성)

npm i typescript -D (-D : 개발용으로 설치)

npx tsc --init (타입스크립트 컴파일을 하는 기본적인 옵션 사용을 위해)

type annotation (타입 표기)

변수나 함수, 객체 속성의 데이터 타입을 지정하기 위해 type annotation을 사용합니다.

변수명, 함수명, 객체 속성명 뒤에 : type 을 써서 데이터 타입을 지정할 수 있습니다.

TypeScript는 JavaScript의 primitive type(number, string, boolean등)을 사용이 가능합니다.

 

type annotation 사용시 장점

컴파일러가 type을 확인하는 데에 도움이 됩니다.

data type을 처리하는 오류 방지에 도움이 됩니다.

협업을 할 때 읽기 쉬운 코드가 됩니다.

유지보수에 장점이 됩니다.

let a: string;
//a = 30; 
//숫자가 들어갈 수 없습니다.

a='abc';

 

primitive type (기본형 타입)

• object 와 reference 형태가 아닌 실제 값을 저장하는 자료형입니다 .
• 프리미티브 형의 내장 함수를 사용 가능한것은 자바스크립트 처리 방식 덕분
  • 동작 자체는 마치 객체인 것처럼 처리된다 .
  • 메모리를 아끼기 위해서

 

Boolean

let isDone:boolean = true;

isDone = false;

Number

let decimal: number = 7;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let NotANumber: number = NaN;
let underscoreNum: number = 1_000_000;

String

let myName: string = "Dongit";

myName = "Kim";

//Template String (백틱 사용)
let age: number: 25;

let sentence: string = `Hello, My name is ${ myName }

I'll be ${ age + 1 } years old next year.`;

Symbol

const sym = Symbol();
let obj = {
  [sym]: "value",
};
console.log(obj[sym]); // "value"

let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3; // false, 심벌은 유일합니다.

Undefinde & Null

기본적으로는 다른 모든 타입에 sub 타입으로 존재하기 때문에 문제가 생길수 있으므로,

컴파일 옵션에서 '--strictNullChecks' 를 사용하면 null 과 undefined 는 void 나 자기 자신에게만 할당할 수 있습니다.

let u: undefined = undefined;
let n: null = null;
let d: string|null = null;

d = "Dongit";