TypeScript Study Note

Ginie·2021년 1월 7일
0

TypeScript

목록 보기
2/11
post-thumbnail

TS를 배우려면 JS를 알고 있어야 한다.
아마 니는 TS를 배우면서 JS를 다시 또 뒤적거리겠지...
JS의 문제점을 보안하기 위해 만들어진 언어라고 알고 있었는데 JS의 상위 언어란다 그니까 TS밑에 JS가 있는것.

TS의 특징을 더 살펴볼까?

정적 타입 검사

(어떤 것이 오류인지와 어떤 것이 연산 되는 값에 기인하지 않음을 정하는 것)

  • 타입스크립트는 프로그램을 실행시키기 전에 값의 종류를 시반으로 프로그램의 오류를 찾는다.

구문 (Syntax)

  • 프로그램을 만들기 위해 코드를 작성하는 방법
  • 타입스크립트는 JS의 구문이 허용되는, JS의 상위 집합 언어이다.
  • 타입스크립트는 독특한 구문 때문에 JS 코드를 오류로 보지 않는다.
  • JS코드를 TS 파일에 넣어도 잘 작동한다.

타입 (Types)

  • 값의 종류
  • 타입스크립트는 다른 종류의 값들을 사용 할 수 있는 방법이 추가된 타입이 있는 상위 집합이다.
console.log(4/[]); 
JS > NaN // 일단 JS에서 구문은 맞음 그래서 낫어넘버~ 
TS > Error! // 타입 틀리면 오류냄! 
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
// 왜냐면 타입이 잘못사용 되었기 때문에~

삭제된 타입 (Erased Types)

  • TS의 컴파일러(어떤 코드를 다른 언어로 바꿔주는 과정)가 코드 검사를 마치면 타입을 삭제해서 '컴파일 된' 코드를 만든다.
  • 즉! 코드가 한 번 컴파일 되면 결과로 나온 JS코드에는 타입이 업없다!

런타임 특성 (Runtime Behavior)

런타임이란?
컴퓨터 프로그램이 실행되고 있는 동안의 동작, 프로그래밍 언어가 구동되는 환경, 어떤 프로그래밍 언어가 동작할 수 있는 프로그램 예를 들면 JS에서는 Node가 런타임

  • 타입스크립트는 JS 코드의 런타임 특성을 절대 변화 시키지 않는다
  • TS가 코드에 타입 오류가 있다고 해도, JS 코드를 TS로 이동시키는 것은 같은 방식으로 실행시킬 것을 보장함
  • 두 언어 간에 쉽게 전환할 수 있도록 하기 위한 약속

TS는 컴파일 -타임 타입 검사자가 있는 JS의 런타임이다~

타입 추론 (Types by Inference)

  • TS는 JS언어를 알고 있으며 대부분의 경우 타입을 생성해 준다.
  • 예를 들면 변수를 생성함과 동시에 특정 값을 할당하면 TS는 그 값의 타입을 그 변수의 타입으로 사용한다.

타입 정의하기 (Defining Types)

  • JS는 다양한 디자인 패턴을 기능하게 하는 동적 언어다. 하지만 동적 프로그래밍을 사용하기에 몇몇 디자인 패턴은 자동으로 타입을 제공 할 수 없을 때가 있다.
  • TS는 어떤 타입이 되어야 하는지 JS 언어의 확장을 지원한다.
  • 형태를 명시적으로 나타내기 위해서 interface를 사용한다.
JSTS
const user = {interface User = {
name : 'jin',name: string,
id: 0,id: number,
}}

명시적: 내용이나 뜻을 분명하게 드러내 보이는 것

  • 변수 선언 뒤에 :TypeName 구문을 사용해 JS 객체가 새로운 interface 형태를 띄고 있다.

  • 해당 인터페이스에 맞지 않으면 경고를 준다.

  • 인터페이스는 클래스도 선언이 가능하다!

interface User {
  name: string,
  id: number
}

class UserAccount {
  name: string,
  id: number,
 constructor (name: string, id: number) {
   this.name = name;
   this.id = id;
  }
}
const user: User = new UserAccount('jin', 1);
  • 인터페이스는 함수에서 매개변수와 리턴값을 명시할 때도 사용 된다.
interface User {
  name: string,
  id: number,
}

function getUser(): User{

  //...

}

function delUser(user: User) {

  //...

}
  • JS에서 사용할 수 잇는 적은 종류의 원시적 타입은 이미 있다 string, null, boolean, symbol, bigint, number, object, undefined는 인터페이스에서 사용할 수 있다.
  • TS는 추가로 any, unknown, never, void 타입들도 더 확장한다.

bigint
BigIntNumber 원시 값이 안정적으로 나타낼 수 있는 최대치인 253 - 1보다 큰 정수를 표현할 수 있는 내장 객체.
any
무엇이든 허용합니다.
unknown
이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오.
never
이 타입은 발생될 수 없습니다.
void
undefined 를 리턴하거나 리턴 값이 없는 함수.

!! 타입을 구축할때 interface를 우선적으로 쓰고 그 다음 특정 기능이 필요할 때 type를 사용한다.

타입에 대해 더 알아보기

TS 따라해보기

profile
느리지만 꾸준한 프론트엔드 주니어 개발자 🐢

0개의 댓글