Dani's Dev TokTok

json "scripts": { "build": "tsc", "start": "node build/index.js" }, 설정해주고 npm run build && npm run start 그리고 npm i -D ts-node 설치 빌드없이 타입스크립트 실행가능 개발 환경에서만 사용 "scripts": { "build": "tsc", "dev" : "ts-node src/index", "start": "node build/index.js" }, npm i nodemon -> 자동으로 커맨드 재실행 "scripts": { "build": "tsc", "dev": "nodemon --exec ts-node src/index.ts", "start": "node build/index.js" }, 설치받은 패키지가..

코멘트로 이루어진 문법 함수 바로 위에 코멘트를 적어주면 됨 자바스크립트 파일에서 사용, 제대로 작성하면 타입스크립트가 이 코멘트 읽는 것 가능 즉 js 파일에서 타입스크립트처럼 타입을 지정해주는 것이다. // @ts-check /** * Intialize the code * @param {object} config * @param {boolean} config.debug * @param {string} config.url * @returns {boolean} */ export function init(config){ return true; } /** * exit the program * @param {number} code * @returns {number} */ export function exit(..

Declaration files (정의 파일) 자바스크립트 코드의 모양을 타입스크립트에 설명해주는 파일 외부 라이브러리나 패키지를 가져왔을 때 대부분은 자바스크립트 코드로 있기 때문에 타입스크립트에서 쓰기 위해 해줘야함 .d.ts 파는 확장자를 가짐 해당 파일에서 호출하고자 하는 함수의 타입을 써줘야함 타입스크립트에게 타입에 대해서 설명해줌

타입스크립트 tsconfig.json 파일에서 자바스크립트 컴파일 옵션을 적어줌 "include" -> 해당 경로에 있는 파일을 자바스크립트로 컴파일 "compilerOPtions" : { "outDir" : "",-> 자바스크립트 파일이 생성될 디렉터리 저장 "target" : ""->어떤 버전의 자바스크립트를 사용할지 지정 "lib" : "" -> 합쳐진 라이브러리의 정의 파일을 특정해주는 역할, 어떤 환경에서 코드를 실행하는지 알려줌 ex) "DOM" -> 브라우저 환경 }

type Player = { nickname : string, healthBar : number } // 타입스크립트에게 object의 모양을 알려주는 것, 속성의 이름과 타입에 대해 알려줌 const kiki : Player = { nickname : "kiki", healthBar : 10 } type Food = string const kimchi:Food = "hot" Interface : 객체의 모양을 특정해주기 위해 사용 인터페이스는 자바스크립트로 컴파일되지 않는다.-> 파일의 크기를 줄일 수 있음 추상클래스와 비슷한 보호를 제공하지만, 자바스크립트 파일에선 보이지 않음 type Team = "red" | "blue" | "yellow" // concrete타의 특정값을 쓸 수도 있음 type..

// 타입스크립트 class Player { constructor( private firstName:string, // private 키워드 : 타입스크립트가 보호하기 위해서만 사용하는 것, 클래스 바깥에서 수정불가 private lastName:string, public nickname:string ) {} } // 타입스크립트로 위와 같이 쓰면 자바스크립트로 아래와 같이 컴파일됨 // 자바스크립트 class Player { constructor(firstName, lastName, nickName) this.firstName = firstName this.lastName = lastName this.nickName = nickName ) } class Player { constructor( priva..

Call Signature 함수 위에 마우스를 올렸을 때 보게 되는 것 함수를 어떻게 호출해야 하는 것인지 알려줌, 인자의 타입과 반환 타입을 알려줌 type Add = (a:number, b:number) => number const add:Add = (a, b) => a + b // Add에서 타입을 지정했기 때문에 위의 함수의 인자에 타입을 지정해 줄 필요가 없음 Overloading 함수가 서로 다른 여러 개의 call signature를 가지고 있을 때 발생시킴 라이브러리 등을 사용하다보면 오버로딩이 발생할 수 있음 type Add = { (a:number, b:number) : number (a:number, b:string) : number } const add: Add =(a, b) => ..

Implicit Types vs Explicit Typeslet a = "hello" // type : stringa = "bye" // type : string, 에러 없음a = 1 // type : number, 변수a의 type이 string 이기 때문에 number로 값을 재할당하면 에러남!let b : boolean = "x" // type을 boolean으로 지정했기 때문에 string으로 값을 할당하면 에러남let b : boolean false // type이 boolean이라서 boolean 값을 할당하면 에러없음// 명시적으로 쓰는것보다 let b = true 이런식으로 추론적으로 쓰는 것이 더 선호됨let c = [1,2,3] // typescript가 number의 array 라고..