타입스크립트

1. 웹 개발의 역사자바스크립트1990년대 : 마이크로 소프트의 인터넷 익스플로러, 넷스케이프 커뮤니케이션즈의 넷스케이프 내비게이터 를 가장 많이 사용1995년대 : 넷스케이프의 브랜든 아이크는 웹의 다양한 콘텐츠를 표현하기 위해 플러그인 요소를 쉽게 조합 할 수 있는 새로운 언어가 필요하다고 생각 => 자바스크립트의 탄생익스플로러의 Jscript vs 넷스케이프의 Javasciprt : 둘다 사용자에게 유의미한 편의성은 제공하지 못함자바스크립트의 표준, ECMAScript 경쟁관계이던 익스플로러와 넷스케이프는 자신들의 브라우저 기능을 빠르게 늘리기 시작추가된 기능은 각자의 브라우저에서만 동작해, 웹페이지가 다르게 동작하거나 제대로 동작하지 않는 크로스 브라우징 이슈 발생개발자들은 어떤 기능을 추가하기 ..

Could not find a declaration file for module 'module-name'.Could not find a declaration file for module (모듈에 대한 선언 파일을 찾을 수 없습니다) 문제 발생구글 스프레드시트를 연동하는 라이브러리 사용중 다음과 같은 에러가 발생했다. 자바스크립트만 지원하는 npm 모듈을 TypeScript에서 사용할 때 발생하는 오류이다.npm 모듈 개발자가 TypeScript 타입을 지정하지 않고 자바스크립트만 지원하는 npm 모듈을 만든 경우 TypeScript에서 사용할 때 오류가 발생한다. 해당 라이브러리가 타입 정의를 지원할 경우 오류코드에 나와있는 것처럼 @types/google-spreadsheet 를 설치해도 해결되지만, ..

1. Interface란?인터페이스는 객체, 클래스, 함수 타입을 지정하는 또 다른 방법 중 하나이다. //객체 타입을 지정하는 여러가지 방법let person: { name: string; age: number } = { name: 'John', age: 30 };type TPerson = { name: string; age: number };let person: TPerson = { name: 'John', age: 30 };interface IPerson { name: string; age: number;}let person: IPerson = { name: 'John', age: 30 }; 보통 인터페이스는  I 를 붙여 명명한다.interface I인터페이스_이름 { 속성?: 타입;} 2...

1. Intersection TypeIntersection Type(교차 타입)은 TypeScript에서 두 개 이상의 타입을 합치는 방법 중 하나이다. `& 연산자`를 사용하여 여러 타입을 하나로 합친다. 합쳐진 타입은 모든 타입의 특성을 가지게 된다. interface Car { brand: string; speed: number;}interface Electric { battery: number;}type ElectricCar = Car & Electric;const myCar: ElectricCar = { brand: 'Tesla', speed: 200, battery: 75,};//이렇게도 가능type PositionX = { x: number };type PositionY = { y..

어떤 값에 대해 불변성을 갖도록 만들어주고 싶다면, readonly 타입으로 보호장치를 설정해 줄 수 있다. 타입스크립트에서 readonly 키워드는 변수, 객체, 배열 등에 사용되며 해당 요소를 읽기 전용으로 만든다. 값을 할당한 후에는 값을 변경할 수 없게 된다. (어디까지나 에디터 에러일 뿐 실제 자바스크립트 파일은 변경) type Player = { //대문자로 만들기 readonly name: string, //읽기 전용으로 설정}const nemo: Player = { name: "nemo",};nemo.name = "다른이름" //오류, 읽기전용이라 변경 불가const numbers: readonly numbers[] = [1,2,3]numbers.push(1) //오류let arr: R..

1. Type Aliases (별칭)Type Aliases(타입 별칭)는 TypeScript에서 타입을 새로운 이름으로 지정할 수 있다. 코드를 더 읽기 쉽고 재사용성이 높게 만들 수 있어 주로 복잡한 타입이나 반복되는 타입 정의를 간결하게 표현할 때 유용하다.type Animal = string | number | undefined;let 동물 :Animal;type Age = numbertype Player = { //대문자로 만들기 name: string, //별칭 만들기 age?: Age, //타입 지정한걸 가져오는것도 가능}//별칭을 그대로 지정해주기const nemo: Player = { name: "nemo", //age: 12};//대문자 또는 TAge 이런식으로 변수명 지정 함수에서..

객체에 대한 타입을 지정해야하는 경우,const 이름: PositionType = { name: "김사과", age: "12",}; 각각 해당 key와 value에 맞는 타입을 지정해줄 수 있다.//타입으로 선언type PositionType = { name: string; age: string;};const 이름: PositionType = { name: "김사과", age: "12",};//인터페이스로 선언interface PositionType { name: string; age: string;}const 이름: PositionType = { name: "김사과", age: "12",}; 하지만 만약 지정해야 되는 타입이 너무 많고, 모든 key와 value의 타입이 동일하다면 다..

1. 기본 타입 지정let name : type = 내용 기본적으로 타입을 지정할때는 변수 옆에 : 을 찍은 후 type을 적어준다.let str: string = 'hi';let num: number = 10;let isLoggedIn: boolean = false; 배열 타입은 타입을 적은 후 [] 로 배열을 표기한다.//배열안에 무조건 string만 가능let 팀: string[] = ["수지", "철수"];let arr: number[] = [1,2,3];let arr: Array = [1,2,3]; //제네릭표기 객체 타입은 객체를 만들어 key는 그대로, value에 타입을 적어주면 된다.//객체 타입 지정let 내정보 : { age : number } = { age : 20 } undefin..

1.  자바스크립트 냅두고 타입스크립트를 사용하는 이유는 뭘까?자바스크립트는 매우 유연한 언어.let answer = 1 + [1,2,3] // 11,2,3 숫자 + 배열 을 실행해도 오류 없이 계산해준다.프로젝트 규모가 작을때는 금방 오류를 찾을 수 있지만, 규모가 커질수록 위와 같은 오류들이 발생했을때 찾기 어려워진다.​이런 자바스크립트의 위험성에서 벗어나 더욱 안전하게 개발할 수 있도록 도와주는게 타입스크립트다. 2. 타입스크립트 사용의 이점정적 타입 검사: 타입스크립트는 코드를 작성할 때 변수, 함수 및 객체의 타입을 명시적으로 지정하므로 코드의 오류를 사전에 발견할 수 있다. 이로써 런타임 오류를 줄이고 안정성을 향상시킨다.코드 가독성과 유지 보수성 향상: 타입스크립트는 코드에 타입 정보를 포함..