WebProgramming/JS

[TS] TypeSCript이란? & 타입

2022. 6. 12. 22:00
목차
  1. TypeScript
  2. Type

TypeScript

; 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어

- MS에서 개발, 유지하고 있으며 엄격한 문법 지원

- TS는 JS엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어

- JS로 작성된 프로그램이 TS 프로그램으로도 동작

- 모든 OS, 브라우저, 호스트에서 사용 가능

 

설치방법

; $npm i tsc -g    // -g ; 컴퓨터 내 모든 프로젝트에 적용 -> tsc라는 명령어로 사용 가능

but -g는 비추. -> npx tsc라는 명령어로 사용해야함

 

$ npm init -y ; npm 초기 설정 _ package-lock.json 설치

$ npx tsc --init ; TS 초기 설정 _ tsconfig.json설치

--- ts파일 설치 ---

$ tsc(TypeScript Compiler) ; ts파일과 동일한 이름의 js파일 생성 & 연동

$ tsc -w ; ts파일 변경 저장 시 즉시 js파일 변경

 

 

Type

Static Type ; 개발하는 중간에 type을 체크 ex) TS

Dynamic Type ; 런타임에 돌입해야 잘못된 것인지 알 수 있음 ex) JS

 

JS 기본 자료형

Boolean / Number / String / Null / Undefined / Symbol / Array(object형)

+ TS 자료형

Any / Void / Never / Unkown / Enum / Tuple(object 형)

 

boolean

let A:boolean=a;	//a는 true or false

number

let decimal:number=6;
let hex:number=0xf00d;              // 16진수
let binary:number=0b1010;           // 2진수
let octal:number=0o744;             // 8진수
let notANumber:number=NaN;
let underscoreNum:number=1_000_000; // 이런 표기도 가능

string 

let myName:string="Mark";
let sentence:string=`My name is ${myName}`;	// Template String ; 행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열

Symbol

; primitive 타입의 값을 담아서 사용

- 고유하고 수정불가능한 값으로 만들어줌

- 접근을 막거나, 접근이 필요한 경우에만 허락할 때 사용

- 사용하려면, tsconfig.json파일에서 "lib": ["ES2015","DOM"],를 활성화하고 이렇게 바꾸어줘야함.

let sym=Symbol();		// 이렇게 Symbol 생성자를 호출하여 생성
const obj={
    [sym]:"value",
};
obj[sym]

Undefined & Null

- Void와 마찬가지로 그다지 유용하지 않음

- 각각 undefined, null 외에는 할당 불가

- null ; 무언가가 있는데, 사용할 준비가 덜 된 상태. typeof -> object 반환

- undefined ; 무언가가 아예 준비가 안된 상태. typeof -> undefined 반환

let u:undefined=undefined;
let v:void=undefined;
let n:null=null;

let union:string|null=null; //유니온 타입
union="Mark";

Object

const person1={
    name:"guesung",
    age:23
};

Array

let list1:number[]=[1,2,3];
let list2:Array<number>=[1,2,3];     // 사용 지양
let list3:(number|string)[]=[1,2,3,'aaa'];

 

Tuple

let x:[string,number]=["hello",23]; 
x[0]="guesung";
x[1]=24;
let[first,second]=x;

any ; 어떤 타입이어도 상관없는 타입

- 최대한 쓰지 않는 것 추천

function returnAny(message:any):any{    //return 값이 any
    console.log(message);
}
const any1 = returnAny('리턴은 아무거나');

unknown ; any보다 Type-safe한 타입

- any같이 아무거나 할당 가능

- 사용 전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 API에 사용할 수 있음

declare const maybe:unknown;
const aNumber:number=maybe;

never

- 주로 return값에 사용

- 어떤 타입에 할당 가능 but 어떤 것도 할당할 수 없음

 

void ; 어떤 타입도 가지지 않는 빈 상태

- 값은 없고 타입만 존재

- 주로 return값에 사용

function returnVoid(message:string){
    console.log(message);
    // return; 해줘도 안해줘도 이 함수의 return값은 void
}
저작자표시 (새창열림)

'WebProgramming > JS' 카테고리의 다른 글

[JS] Array 메소드 (map,filter,reduce,find,concat,slice)  (0) 2022.07.15
[JS] JS 라이브러리 (lodash, axios)  (0) 2022.06.30
[TS] 타입 별칭 & Interface  (0) 2022.06.24
[TS] TS의 타입 시스템? & Compliation Context  (0) 2022.06.12
[JS] JSON  (0) 2022.06.11
[JS] 정규표현식  (0) 2022.06.11
[JS] import,export ; 모듈 가져오기,내보내기  (0) 2022.06.11
[JS] 구조 분해(Destructuring), 전개 연산자(...)(spread, rest)  (0) 2022.06.11
  1. TypeScript
  2. Type
'WebProgramming/JS' 카테고리의 다른 글
  • [TS] 타입 별칭 & Interface
  • [TS] TS의 타입 시스템? & Compliation Context
  • [JS] JSON
  • [JS] 정규표현식
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • LV2
  • 카카오
  • Union-find
  • Retry
  • 반복문
  • 해커톤
  • 개발 일상
  • 개발 is life
  • 카카오 채용연계형 인턴십
  • dfs
  • 구름톤
  • 구름
  • Kakao Tech Internship
  • 1일 1커밋 후기
  • 개발 회고
  • BFS
  • 스터디 후기
  • 누적합
  • 함수
  • 1년 회고
  • lv3
  • KAKAO BLIND

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[TS] TypeSCript이란? & 타입
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.