Front-End: Web/TypeScript (23) 썸네일형 리스트형 [코딩애플] ts part 1-6. Type Alias type alias: 타입도 변수에 담아쓰세요 type 키워드 써서 type alias 타입 변수 타입이 너무 길어지는 경우에 변수로 만들어서 간단하게 사용함 type alias 만드는 법 type Animal = string | number | undefined; let 동물 :Animal = 'kim'; object 타입을 변수에 담아보자. let 동물 :{ name: string, age: number } = { name: 'kim', age: 20 } type이 기니까 type으로 만들자. 훨씬 더 깔끔해진다. type Animal = {name: string, age: number}; let 동물 :Animal = {name: 'kim', age: 20} type 변수 작명 관습 일반 변수와 차.. [코딩애플] ts part 1-5. Narrowing & Assertion 타입 확정하기 function 내함수(x :number|string) { return x + 1; // 에러 발생 } 내함수(123); x는 number도 string도 아닌 number| string, 즉 union type이다. 그래서 타입이 확정되지 않아서 연산이 되지 않아 에러가 발생한다 했다. 이처럼 **Type이 아직 하나로 확정되지 않았을 경우**에 **Type Narrowing**을 써야 한다. Narrowing 어떤 변수가 타입이 아직 불확실하다면, 꼭 if문 등으로 Narrowing 해줘야 조작이 가능하다. Narrowing -> **타입을 하나로 정한다, 거른다는 의미** function 내함수(x :number|string) { if (x의 타입이 string){ // Narrowi.. [코딩애플] ts part 1-4. function parameter & return 함수에 타입 지정하는 법 함수 길고 복잡한 코드 한 단어로 축약 가능 **숫자 집어넣으면 다른 숫자 나오는 블랙매직박스 역할(input & output)** 함수는 파라미터, return값 타입지정 가능 **변수만 만들면 :any 자동 할당된다**. function 함수(x :number) :number { return x * 2; } 함수('6'); // 에러 발생 함수(30); // 60 x파라미터 자리에 숫자타입만 입력가능 return 되는 값은 숫자타입으로 제한함 함수에서 void 타입 활용 가능 void 텅 비었다는 의미. 리턴 없음. 실수로 뭔가 return하는 걸 사전에 막을 수 있다. function 함수(x :number) :void { return 1 + 1; // 에러 발생. retu.. [코딩애플] ts part 1-3. 타입을 미리 정하기 애매할 때(union type, any, unknown) 타입을 미리 정하기 애매할 때(union type, any, unknown) Union Type 타입 2개 이상 합친 새로운 타입 만들 수 있음 문자 or 숫자 들어올 수 있는 변수 만들기 let 회원 :number | string = 123; // 하나로 확정되어 type이 이제 number임 let 회원 :(number | string | boolean) = 123; // 소괄호 쳐도 됨 숫자 or 문자가 가능한 array /object 타입 지정하기 let 회원들 :(number | string)[] = [1,'2',3]; let 오브젝트 :{ a: number | string } = { a: '123' } 소괄호 없이 쓰면 큰일남. let 회원들 :number | string[] = [1,'2',.. [코딩애플] ts part 1-2. primitive types 타입스크립트 기본 타입 정리 (primitive types) JS문법 그대로 TS에서 사용 가능한데, 타입만 잘 지정해주면 된다. 저번에 셋팅해놓은 곳에 코드를 짜보자. 변수 만들기(변수에 타입지정 가능) 변수명 :타입명 let 이름 :string = 'kim'; 이름 = 123; // 에러: Type 'number' is not assignable to type 'string' (장점) 타입이 실수로 변경될 때 에러내줌 = 변수에 실드를 씌우는 것임. 다른 타입은 못 오도록.  let 이름 :string = 'kim'; let 나이 :number = 50; let 결혼했니 :null = null; // boolean, undefined, null 타입도 있음(쓸 일은.. [코딩애플] ts part 1-1. 필수 문법 & 세팅 Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) Typescript쓰는 이유 Typescript = Javascript + Type 문법 "Javascript Superset" 1. JavaScript는 Dynamic Typing 가능 5 - '3' 원래는 숫자 - 숫자만 가능하지만, JS가 알아서 숫자로 바꿔줌. 개꿀 (프로젝트가 크면 단점이 됨) 코드 길게 짤 땐 자유도 & 유연성은 오히려 쓰레기임 TypeScript는 타입을 엄격히 검사해준다. 5 - '3' // TS Error: "문자랑 숫자빼는거 이상한데요, 빨리 수정하셈!" 2. 에러메시지 퀄리티가 오짐 에러메시지가 정확해진다. 자바스크립트 에러는 추상적이고 추적 어려운 에러가 많다. var counter =.. [해결] vscode에서 TypeScript 오류가 발생한 곳에 빨간색 밑줄이 안뜬다 Nest.js와 TypeScript를 공부하던 중, 자꾸 빨간색 밑줄로 오류가 발생해야 할 부분에서 오류가 발생하지 않아서 구글링으로 찾아본 결과 해결할 수 있었다. Ctrl + Shift + P 를 누른 후, Preferences: Open Settings (JSON)을 클릭한다. 그러면 vscode에 대한 전역설정을 담은 settings.json 파일이 열린다. 나의 경우에는 이렇게 작성되어 있었는데, 빨간색으로 표시된 저놈이 눈에 보였다. 혹시나 몰라서 "typescript.validate.enable" 을 true로 변경하니까, 이제 상단에 있는 index.ts 파일일 빨갛게 에러가 떴다. index.ts 파일을 들어가니까 그제야 오류가 잘 뜬다. 참고로 typescript.validate.ena.. 이전 1 2 3 다음
