데브코스 강의로 배우는 타입스크립트, 이전 프로젝트에서 한번 맛봤기 때문에 부담없이 들을 수 있었다!
npx create react-app "프로젝트명" --template typescript
yarn create react-app typescript-todo --template typescript
최상단 폴더에 tsconfig.json파일 생성
// tsconfig.json
{
"include": ["src/**/*.ts"], //컴파일할 파일 경로
"exclude": ["node_modules"], //컴파일 대상을 제외
"compilerOptions": { // 실제 컴파일시 적용되는 옵션
"module": "Commonjs", //모듈 방식
"rootDir": "src", // 시작 루트폴더
"outDir": "dist", // 컴파일 후 js파일이 생성될 폴더명
"target": "es5", // 어떤 버전으로 컴파일 할 지
"sourceMap": true // 개발자도구에서 확장자의 실제 소스코드(ts)를 볼 수 있도록
}
}
이후 콘솔창에서 tsc 입력시, dist폴더와 함께 폴더 내에 js파일이 생성된다.
?: 타입지정 시 있어도 되고 없어도 되는 값
interface ComPany {
name: string;
age: number;
address?: string;
}
const dev: ComPany = {
name: "devCorse, Inc",
age: 3,
};
console.log(person?.age); // age가 없으면 자동으로 undefinded 출력
console.log(person?.age); // age가 없으면 자동으로 undefinded 출력
// Generic
interface Value<T> {
value: T;
}
const value: Value<number> = {
value: 1,
};
function logText<T>(text: T): T {
return text;
}
console.log(logText("5")); // string
console.log(logText(5)); // number
// 같은 의미의 코드
let str: <T>(text: T) => T = logText;
let string: { <T>(text: T): T } = logText;
넘긴 텍스트의 타입으로 제네릭 타입이 설정된다 (타입추론)
interface User {
id: number;
name: string;
age: number;
address: string;
createdAt?: string;
updatedAt?: string;
}
Partial: 모든 필드 Optional const parial: Partial<User> = { createdAt: "2", };
Required: 모든 필드 Required
const required: Required<User> = {
id: 1,
name: "Lee",
age: 0,
address: "Seoul",
createdAt: "필수",
updatedAt: "필수",
};
Pick: 특정 필드만 사용
const pick: Pick<User, "name" | "age"> = { name: "", age: 3, };
Omit: 특정 필드만 제외하고 사용
const omit: Omit<User, "id" | "createdAt"> = { name: "", age: 3, address: "", };
const mixed: Omit<User, "id" | "age" | "address"> & Pick<Partial<User>, "age"> =
{
name: "",
age: 3,
};
Mixed: Interface 여러개 동시 사용
interface Time {
hour: number;
minute: number;
}
interface DateTime extends Time {
month: number;
day: number;
}
interface TimeFormat extends Pick<Time, 'hour'> {
ampm: number;
}
extends: 인터페이스 상속