chez Manon

TypeScript is "superset" to Javascript. 자바스크립트는 타입에 관대하다. 5 - '3' 이렇게 숫자와 문자를 연산해도 알아서 타입을 바꿔서 연산해주는데, 이는 자바스크립트가 Dynamic typing(동적타이핑)을 지원하는 언어이기 때문이다. 이런 Dynamic typing은 큰 프로젝트 시 type과 관련된 버그들이 많이 발생하면서 단점이 된다. 이런문제점을 해결해주는 언어로 타입스크립트가 사용된다. 타입스크립트는 자바스크립트의 superset이라고 불린다. 자바스크립트를 기반으로 하는 프로그래밍 언어, 혹은 자바스크립트의 확장이라고 할 수 있다. 핵심언어는 여전히 자바스크립트이다! TypeScript adds static typing to JavaScript. 타입스크립..

keyof ✔️ keyof : Object 타입에 사용하면 object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내준다. object의 key를 봅아서 새로운 타입을 만들고 싶을 때 사용한다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" let a1: PersonKeys = "age"; let b1: PersonKeys = "agee"; //에러 [key : string]를 keyof 하면 stirng | number 타입이된다. object key 값에 숫자를 넣어도 문자로 치환되기 때문에 ( [key : number]는 typeof하면 numb..

declare 외부 js 파일 import 했을 때, 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 에러가 발생한다. 이럴 때 declare 쓰면 이미 정의된 변수나 함수,타입을 재정의하여 '타입에러나 변수없다는 에러' 방지할 수 있다, // data.js let a = 1; let b = {name : 'kim'} //index.ts (data.js파일에서 변수 a를 가져다가 쓰고싶을 때) declare let a : number; 'a 라는 변수를 이 파일에서 잠깐 정의한다" (a라는 변수 어디에 있으니까 그만 징징거려라) js로만 작성된 외부 라이브러리 쓸 때 유용, ts 버전이 없다면 직접 declare로 타입작성하면 된다. ts파일들은 변수만들 타입 까먹어도 자동으로 타입지정이 되어있으니..

React - TypeScript typescript 셋팅이 완료된 react 프로젝트 설치 npx create-react-app 프로젝트명 --template typescript 기존 프로젝트에 typescript만 더하고 싶으면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 🔻 JSX문법을 지원하는 tsx 확장자 사용 JSX 타입지정 🔻 JSX.Element let 박스 :JSX.Element = let 버튼 :JSX.Element = 좀 더 정확하게 타입을 지정하고 싶으면 같은 기본 태그들은 JSX.IntrinsicElements let 박스 :JSX.IntrinsicElements['div'] ..

Rest parameter rest parameter는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해준다. function Plus(...a: number[]) { console.log(a); } Plus(1, 2, 3, 4, 5); Destructuring 1. parameter에 object처럼 타입지정. 2. type 키워드로 따로 만들어서 지정. // Object let person = { student: true, age: 20 }; // 파라미터에 object처럼 타입지정 function 함수({ student, age }: { student: boolean; age: number }) { console.log(student, age); } 함수({ student: true, ..

HTML 변경 🔻 null이 들어오는 경우 체크해주는 옵션 tsconfig.json 파일에서 "strickNullChecks" 옵션을 true로 지정한다. 혹은 그냥 "strict" : true 를 하면 strickNullChecks 자동으로 true로 켜진다. 🔻 selector로 html을 찾으면 못찾을 경우가 null값이 되어서 변수가 union type이다. ( Element | null ) let 제목 = document.querySelector("#title"); 제목.innerHTML = 'hi' //error 해결책 1) narrowing if (제목 != null) { 제목.innerHTML = "hi"; } 해결책2 ) instanceof 사용하는 narrowing if (제목 inst..

Type Aliases - 타입을 여러가지 써야할 때 길어서 보기싫거나, 나중에 또 사용하고싶을 때 변수에 담아서 사용한다. ( 타입 키워드는 재정의가 불가능하다. 보통 대문자로 시작하거나 뒤에 type이라고 붙여서 작명해준다. ) - Alias는 새로운 type 변수를 생성하는 것이 아니라, 정의한 타입에대해 쓰기쉽게 새로운 별칭을 부여하는 것과 같다. 1. 변수에 저장 type 타입변수명 = 타입종류 type 저장 = string | number | undefined; let 변수1 : 저장 = 1; 2. Object // type 키워드 쓰지않을 때 코드 let 학생: { name: string, age: number } = { name: "kim", age: 23, }; type 사람 = { na..

Install npm install -g typescript 에러발생 1. node 최신버전 설치 2. 보안에러 sudo npm install -g typescript Setting 1. filename.ts 파일생성 2. js파일로 compile tsc filename.ts 컴파일 이후 자동으로 변경사항 발생시 컴파일되게 하려면 watch mode 실행 tsc -w 3. html 파일 등에서 ts 작성코드 사용하려면 tsconfig.json compile 세부 설정 : tsconfig.json 파일 생성 tsc --init { "compilerOptions": { "target": "es5", "module": "commonjs" } } target : ts파일을 어떤 버전의 js로 바꿀지 지정 mod..