타입스크립트

최근에 대다수의 프로젝트가 타입스크립트 기반으로 작성되었다. 코드를 작성하며 타입을 체크할 수 있는 타입스크립트는 코드를 더욱 안전하게 작성하면서도 잠재적인 버그도 크게 줄일 수 있다. 타입스크립트란?기존 자바스크립트 문법에 타입을 가미한 것이 타입스크립트라 할 수 있다. 동적 타입의 언어인 Javascript는 런타임에 에러를 확인할 수 있으며 동적 타입 언아라는 점은 개발자에게 자유를 줄 수 있지만 코드의 규모가 커질수록 오히려 발목을 잡는 경우도 있다.function test(a,b) { return a/b}test(5,2) // 2.5test('안녕하세요','하이')// NaN 두 인수를 받아 나눗셈한 결과를 반환하는데, 숫자가 아닌 타입의 값이 들어오면 NaN이 반환된다. 이러한 문제는 Java..
타입스트립트 컴파일러는 두 가지 역할을 수행한다.최신 TS/JS 코드를 브라우저에서 동작할 수 있도록 구버전의 JS로 트랜스파일 한다.코드의 타입 오류를 체크한다.이 두 가지는 서로 완벽히 독립적으로 동작한다. 즉, TS가 JS로 변환될 때 코드 내의 타입에는 영향을 주지 않으며 JS의 실행 시점(런타임)에도 타입은 영향을 미치지 않는다. 타입 오류가 있는 코드도 컴파일이 가능하다컴파일은 타입 체크와 독립적으로 동작하기에 타입 오류가 있는 코드도 컴파일이 가능하다.let x = 'hello';x = 1234;// '1234' 형식은 'string' 형식에 할당할 수 없다 타입 체크와 컴파일이 동시에 이뤄지는 C나 자바 같은 언어와는 달리 Typescript는 문제가 될 만한 부분을 알려주지만, 빌드는 멈..
본 시리즈에서는 책 "이펙티브 타입스크립트"를 읽고 내용을 정리할 예정입니다. 이 책에서는 타입스크립트란 무엇이고, 어떻게 여겨야 하는지, JS와 어떤 관계인지, TS의 타입들은 null이 가능한지, any 타입에서는 어떻게 동작하는지, 덕 타이핑이 가능한지 등을 알아 볼 예정이다. Typescript는 독특한 언어이다. 파이썬이나 루비와 같이 인터프리터로 실행되는 것도 아니고, C나 Java 처럼 저수준 언어로 컴파일되는 것도 아니다. Typescript는 고수준 언어인 Javascript로 컴파일되며, Javascript로 실행된다. 이처럼 TS와 JS의 관계는 매우 필연적이다. 타입스크립트와 자바스크립트의 관계 이해하기"타입스크립트는 자바스크립트의 상위 집합이다" 또는 "타입스크립트는 타입이 정의된..
· TypeScript
type과 interface는 타입스트립트에서 값의 타입을 지정하는 방법들이다. interface 형객체 구조를 정의할 때 사용되며 객체와 클래스의 타입을 정의할 때 사용된다.interface는 상속(extends)을 이용한 확장이 가능하며 다중 상속을 지원한다.interface Point { x: number; y: number;}interface Named { name: string;}interface Person extends Named { age: number;} 또한 이전 글에서 정리했듯이 interface에서 인덱스 시그니처를 이용하려면 명시적으로 선언해줘야 사용이 가능하다.export interface selectedStateInterface { position: { dueli..
· TypeScript
Generic 제네릭 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. function getSize(arr: T[]): number{ return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); const arr2 = ['a', 'b', 'c']; getSize(arr2); const arr3 = [false, true, true]; getSize(arr3); const arr4 = [{}, {}, {name: "Tom"}]; getSize(arr4); interface Mobile { name: string; price: number; option: T; } // option에 제네릭을 이용할 수 있다. 혹은 객체의 모습이 정해저 있다면 다..
· TypeScript
LitererType 리터럴 타입 const userName1 = 'bob'; // 문자열 리터럴 타입 let userName2 = 'tom'; const는 불변값이며 let은 스트링 타입으로 고정되어있기에 다른 타입의 값을 배정하면 안된다 다른 타입도 넣을려면 let userName3: string | number = 'Tom'; userName3 = 3; 타입으로도 만들 수 있다. type Job = 'police' | 'developer' | 'teacher'; 숫자형 리터럴 타입도 이용할 수 있다. type Grade = 1 | 2 | 3; interface User { name: string; job: Job; grade: Grade; } const user: User = { name: "bob..
58청춘
'타입스크립트' 태그의 글 목록