일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 자바스크립트
- DB Browser
- JS 개념
- Do it 자바스크립트 + 제이쿼리 입문
- 따라하며 배우는 노드 리액트 기본 강의
- Colaboratory 글자 깨짐
- 웹 게임을 만들며 배우는 리액트
- 노드에 리액트 추가하기
- vs code 내 node
- intellij
- props
- Python
- 인프런
- 계산맞추기 게임
- 리액트
- 거북이 대포 게임
- node.js 설치
- Spring-Framework
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 타자 게임 만들기
- react
- 모던자바스크립트
- 모두의 파이썬
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- node.js로 로그인하기
- react오류
- spring-boot
- Concurrently
- googleColaboratory
- Today
- Total
프로그래밍 삽질 중
TypeScript 개념 - 1 본문
* 출처 : https://github.com/ZeroCho/ts-all-in-one
* 타입스크립트는 최종적으로 자바스스크립트로 변환함
* tsc 기능
- type을 검사
- 타입스크립트를 자바스크립트로 변환(설사 오류가 있더라도 진행됨)
- 자바스크립트로 변환 시 콜론, 제너릭, 타입인터페이스, 타입들, as는 변환 시 사라짐
* 타입스크립트는 자바스크립트에서 변수, 속성, 매개변수, 리턴값에 타입을 붙인 것
* 타입스크립트가 추론하는 타입은 타이핑하지 않고, 추론하지 못하는 타입은 타이핑할 것
* 자바스크립트에 비해서 자유도가 확 줄어듦(ex: 변수에 문자열을 넣었다가 숫자로 바꾸는 등의 행동 어려워짐)
* any를 최대한 쓰지 않는 것을 목표로 할 것
* !보단 if문을 위주로 쓸 것
* 템플릿 리터럴타입(기존 typescript의 string liter type을 기반으로 새로운 타입을 만드는 도구) 타입이 존재
참고 : https://toss.tech/article/template-literal-types
* 객체는 상세할수록 더 좁은 타입
type A4 = {name: string};
type B4 = {age: number};
type AB4 = A4 | B4
//객체는 상세할수록 좁은 타입
type C3 = {name: string , age: number}
* type과 interface 구분하기
참고 : https://yceffort.kr/2021/03/typescript-interface-vs-type
- interface : 타입과 마찬가지로 객체의 타입의 이름을 지정하는 또 다른 방법
- type과 interface의 차이점 :
▶ type은 새로운 속성을 추가하기 위해서 다시 같은 이름 선언 불가, interface는 항상 선언적 확장 가능
▶ interface는 객체에서만 사용 가능, interface끼리는 서로 합쳐짐
//type
type A = { a: string };
const a: A = { a: 'hello' };
//interface
interface B { a: string }
// const b: B = { a: 'hello' }; //interface B를 한 번 더 추가 시 오류로 나옴
// type A = {b: string} //중복이라고 나옴
interface B { b: string }
const b: B = {a: "hello", b: "typescript"}
* union, intersection
참고 : https://velog.io/@soulee__/TypeScript-Union-Type
- union : 자바스크립트 연산자 OR연산자 같이 'A' 거나 'B'이다 (| 사용)
- union 장점 : 타입스크립트 이점을 살려서 동작 가능
- intersection type : 여러 타입을 모두 만족하는 하나의 타입
type A = {
a: string;
}
type B = {
b: string;
}
const aa: A | B = { a: 'hello', b: 'world' };
const bb: A & B = { a: 'hello', b: 'world' };
* 객체 리터럴은 잉여 속성 검사가 있음
- 객체 리터럴 : 객체 생성 방식 중 간단한 방식, 컨텐츠를 그대로 대입
참고 : https://velog.io/@seeh_h/%EA%B0%9D%EC%B2%B4-%EB%A6%AC%ED%84%B0%EB%9F%B4
참고 : https://greatpapa.tistory.com/162?category=559680
interface A {
a: string;
}
const obj1: A = { a: string, b: string }; // b에 대해서 잉여속성 검사를 한다. (바로 대입할 때)
// b 타입이 없다고 나온다.
const obj2 = { a: "hello", b: "world" };
const obj3: A = obj2; // 잉여 속성 검사를 하지 않는다.
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
TypeScript 개념 - 3 (0) | 2022.09.16 |
---|---|
TypeScript 개념 - 2 (0) | 2022.09.16 |
호출스택, 이벤트루프, 태스크큐, 백그라운드 (0) | 2022.09.15 |
비동기 Promise & async await 2 (1) | 2022.09.14 |
비동기 Promise & async await 1 (0) | 2022.09.14 |