Learning TypeScript 2장

hyena_lee·2023년 3월 4일

TIL typescript

TypeScript

목록 보기

2/7

타입의 종류

: 타입이란 자바스크립트에서 다루는 값의 형태에 대한 설명이다.
(형태란, 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산자가 설명하는 것을 의미)

- 일곱가지의 원시타입

null
undefined
boolean
string
number
bigint
symbol

타입 시스템

코드를 읽고 존재하는 모든 타입과 값을 이해한다.
각 값이 초기 선언에서 가질 수 있는 타입을 확인한다.
각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다.
값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다.

// string
let firstName = "Lee";

// number
let age = 22;

// string | number
let total = Math.random() > 0.5 ? "string" : 22

오류 종류

구문 오류

타입스크립트가 코드로 이해할 수 없는 잘못된 구문을 감지할 때 발생한다. 이는 타입스크립트가 타입스크립트 파일에서 자바스크립트 파일을 올바르게 생성할 수 없도록 차단합니다.

let let bts;
// Error: ',' 가 필요!!

타입 오류

타입스크립트의 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생한다. 오류가 발생했다고 해서 타입스크립트 구문이 자바스크립트로 변환되는 것을 차단하지 않습니다.

console.blub("Hello world");
// Error : Property "blub" does not exist on type "Console"

할당 가능성

: 타입스크립트는 변수의 초깃값을 읽고 해당 변수가 혀용되는 타입을 결정합니다. 이전에 변수에 새로운 값이 할당되면, 새롭게 할당된 값의 타입이 변수의 타입과 동일한지 확인합니다.
즉, 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 할당 가능성 이라고 합니다.

// string
let firstName = "Lee";
firstName = "banana";

// number
let age = 5;
age = 25; 

let lastName = "hazel";
lastName = true;
// Error : type "boolean" is not assignable to type "string".

타입 애너테이션(Type annotation)

: 초깃값이 없는 경우라면 타입 애너테이션을 이용해 타입을 지정할 수 있다.
초기 타입을 유츄할 수 없는 변수는 진화하는 any 라고 부릅니다.

let myName: string;
myName = "hazel";
myName = 22; // Error : "number"은 "string" 형식에 할당 할 수 없다.

초깃값을 할당하지 않고도 변수의 타입을 선언할 수 있는 구문을 type annotation을 제공한다. 변수 이름뒤에 배치되며 콜론(:) 과 타입 이름을 차례대로 기재하면 된다.

타입 형태

: 변수에 할당된 값이 원래 타입과 일치하는지 확인하는 것 이상을 수행한다.

let cher = {
  firstName: "lee",
  lastName: "hazel",
};

cher.middleName;
// Error: Property "middleName" does not exist on type
// { firstName : stirng; lastName: string; }

모듈과 스크립트

: ECMA 스크립트 2015에는 파일 간에 가져오고 내보내는 구분을 표준화 하기 위해 ECMA 스크립트 모듈 ESM 사용한다.
참고로, 모듈 파일은 ./values 파일에서 value 를 가져오고, 변수 doubled를 내보낸다.

import {value} from "./values";
export const doubled = value * 2;

모듈 : export | import가 있는 파일
스크립트 : 모듈이 아닌 모든 파일

모듈
: 모듈 파일에 선언된 모든 것은 해당 파일에서 명시한 export 문에서 내보내지 않는 한 모듈 파일에서만 사용할 수 있다. 한 모듈에서 다른 파일에 선언된 변수와 동일한 이름으로 선언된 변수는 다른 파일의 변수를 가져오지 않는 한 이름 충돌로 간주 하지 않는다.

// a.ts
export const myName = "Lee";


// b.ts
expoprt const myName = "Lee";

// c.ts
import { myName } from "./a";
console.log(myName);

스크립트
: 파일이 스크립트라면 해당 파일을 전역 스코프로 간주하므로 모든 스크리트가 파일의 내용에 접근 할 수 있다. 즉 스크립트 파일에 선언된 변수는 다른 스크립트 파일에 선언된 동일하 이름을 가질 수 없다.

// a.ts
const myName = "Lee"
// Error : Cannot redeclare blok-scoped varible "myName".

// b.ts
const myName = "Lee";
// Error : Cannot redeclare block-scoped varible "myName".

// a.ts && b.ts
const myName = "Lee";  
export {};