목록Frontend/Typescript (5)
JiSoo's Devlog
타입스크립트는 자바스크립트의 '슈퍼셋' 언어자바스크립트를 기반으로 하되 더 확장된 프로그래밍 언어 타입스크립트는 리액트와 달리 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다가장 중요한 건 정적 타입의 특징을 갖는다는 것 !!런타임에 오류의 원인을 찾을 필요 없이 코드를 작성할 때 바로 오류가 표시된다 TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up you..
package.json 초기화 npm init -y typescript 설치 npm i -D typescript tsconfig.json 파일 만들기 code tsconfig.json tsconfig.json 파일이 있으면 vs code는 우리가 타입스크립트로 작업한다는 것을 즉시 알게 된다 { "include":[ "src" ] } include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉터리 넣기 -> 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미 compilerOptions에서 outDir라는 키를 만들어주는데 이 키는 자바스크립트 파일이 생성될 디렉터리를 저장한다 타입스크립트는 컴파일러니까 index.ts 같은 파일들을 일반적인 자바스크립트로 컴파일시켜준다 { "include": ..
타입스크립트에서는 파라미터들을 써주기만 하면 알아서 constructor 함수를 만들어 준다 필드의 보호 등급, 이름, 타입만 써주면 된다 private 키워드는 오로지 타입스크립트가 우리를 보호해 주기 위해서만 사용한다 abstract class User { constructor ( private firstName:string, private lastName:string, public nickname:string ) {} getFullName() { return `${this.firstName} ${this.lastName}` } } class Player extends User { } const jisoo = new Player("jisoo", "lim", "지수"); ❌ jisoo.firstName..
함수의 call signature 타입 만들기 type Add = (a:number, b:number) => number; const add:Add = (a, b) => a + b; a:number, b:number 이렇게 할 필요 X 오버로딩은 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생시킨다 직접 작성하기보다 외부 라이브러리에 자주 보이는 형태 다른 여러 개의 argument를 가지고 있을 때 발생하는 효과 type Add = { (a:number, b:number) : number (a:number, b:string) : number } const add: Add = (a, b) =>{ if(typeof b === "string") return a return a..
타입스크립트는 자바스크립트 기반으로 만들어진 언어 타입 안정성이 가장 큰 장점 strongly typed(강타입) 프로그래밍 언어 타입스크립트는 작성한 코드가 자바스크립트로 변환된다 타입 시스템 - 명시적 정의(변수 선언 시 타입 정의) -> Type Checker에게 타입을 추론하는 것을 허용 let a : boolean = true let b : number[] = [] b.push(1) - 변수만 생성 let a = "hello" optional const player : { name: string, age?:number } = { name: "jisoo" } player.age가 undefined일 가능성 체크 ↓ if(player.age && player.age < 10) { } : 앞에 ? 붙..