Everyday Types

gimsoari·2022년 12월 13일
0

TypeScript Handbook

목록 보기
1/1

What is TypeScript?
=> 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확이하는 도구(타입검사)임

컴파일러 옵션의 효과 설명하기.

들어가기 전
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

const user ={
	name: "Hayes",
    id: 0,
}

//interface로 객체의 모양을 명시적 선언 

interface User {
	name: string;
    id: number; 

일치하지 않을 경우 TS에서 경고

1장

function fn(x) {
	return x.flip()
}

flip을 가져야만 위 함수가 잘 동작함을 우리는 '코드를 읽음으로써'알 수 있음. 하지만 JS는 fn이 특정 값과 어떤 동작을 수행하는지 알 수 있는 방법은 호출하고 무슨 일이 벌어지는지 보는 것 뿐. = JS는 오직 동적타입만 제공
그래서 실행 전 예측을 어렵게 만듬.
이런 측면에서 '타입'이란 어떤 값이 fn으로 전달될 수 있꼬, 어떤 값은 실행에 실패할 것임을 설명한 개념

정적 타입 검사

코드를 실행하기 전 미리 버그를 발견할 수 있는 도구 TypeScript

TypeScript로 실행하면, 코드가 실행되기에 앞서 오류 메세지를 확인할 수 있음.

//JS

const user = {
	name: 'Daniel",
    age: 26,
};

user.location
//undifined 

오류 아닌 오류가 난다.

하지만 TS에서는
Property 'location' does not exist on type '{ name: string; age:number;}'.
명확한 오류가 난다.
이처럼 TS는 명시적 버그는 아니지만, 겉으로 드러나지 않는 버그를 꽤 많이 잡아냄.
ex) 오타, 호출되지 않은 함수, 논리 오류

tsc, TypeScript 컴파일러
npm install -g typescript tsc 전역 설치

tsc hello.ts
변환된 JS파일이 다운레벨링을 통해 생성(템플릿리터럴 x)

tsc --target es2015 input.ts = ECMAScript 5로 실행해서 템플릿 리터럴 수정 X

Everyday Types

원시 타입: string, number, boolean
TS에서 각자 대응하는 타입이 존재.

  • string: "Hello world"와 같은 문자열 값
  • number: 42와 같은 숫자. int, float가 별도로 존재 X 모든 수는 number
  • boolean: true / false

배열

  • [1, 2, 3]같은 배열의 타입을 지정은 number[] 구문 사용
    string[] = 문자열
    [number] = 전혀 다른 의미를 가짐(튜플 타입 부분 참조)

any

TS는 any라는 특별한 타입이 있음. 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용.

let obj:any = {x: 0};

obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
// 이와 같은 코드들은 모두 오류 없이 정산적으로 실행
// `any` 사용하면 추가적인 타입 검사가 비활성화 

변수에 대한 타입 표기

const, var, let 등을 사용해서 변수를 선언할 떄,
let myName: string = "Alice";

  • 하지만 위와 같은 경우 대부분은 타입을 표기하지 않음
    대부분 TS가 타입을 변수의 초깃값의 타입을 바탕으로 추론

함수

매개변수 타입 표기
function greet(name: string) { console.log("Hello, " + name.toUpperCase() + "!!"); }
greet(42)
실행되면 런타임 오류 발생

profile
[...김가네 솔이는 코딩을 합니다.]

0개의 댓글