TypeScript 7 설치와 tsconfig strict 첫 실행

중간부터 시작하는 전체 파일과 적용 순서

이번 글 시작 ZIP · 이번 글 완료 ZIP

시작 ZIP은 직전 프로젝트 단계 typescript-step-02-intro의 실제 완료 파일입니다. 프로젝트 순서를 이어가는 기준이며 사이트의 기술 읽기 순서와는 구분합니다.

1. 시작 ZIP을 새 폴더에 풉니다. 이 폴더가 작업 루트이며 기존 체크포인트 파일을 별도로 찾을 필요가 없습니다.
2. package.json·tsconfig.json·타입 계약 검증 파일을 추가합니다. 설치 후 npm run typecheck와 npm run build를 실행합니다.
3. 아래 변경 파일을 같은 상대 경로에 추가하거나 전체 교체합니다. 표시하지 않은 파일과 images는 시작본 그대로 유지합니다. package-lock.json은 완료 ZIP에 있는 파일을 함께 적용합니다.
4. 작업 루트에서 명령을 실행하고 예상 결과를 확인합니다. 완료 ZIP은 직접 적용한 결과를 비교하는 기준입니다.

추가·교체 파일

• package.json — 전체 교체
• CHANGES.md — 전체 교체
• README.md — 전체 교체
• tsconfig.json — 추가
• scripts/test.mjs — 추가
• scripts/check.mjs — 추가
• public/data/tasks.json — 추가
• tests/contracts.ts — 추가
• package-lock.json — 추가

실행과 확인

npm ci
npm run dev
npm run typecheck
npm test
npm run build

개발 서버는 실행 상태로 두고 다른 터미널에서 검사 명령을 실행하세요. Node.js 24.18.0에서 검증했습니다. JavaScript는 http://127.0.0.1:4173, TypeScript는 Vite 실행 출력의 주소로 접속합니다.

예상 결과: strict 검사에서 정상 계약은 통과하고 잘못된 completed 타입은 기대한 컴파일 오류로 검증됩니다.

기존 ZIP 검증 기록: TypeScript strict 검사·긍정/부정 타입 계약·런타임 검사·Vite 빌드 통과. 시작 ZIP에 이 글의 변경 파일만 적용한 결과와 완료 ZIP의 모든 파일 내용이 일치했습니다. 브라우저 화면 배치·실제 기기·외부 CDN 가용성은 이 검사에 포함하지 않았습니다.

이 절의 전체 파일은 ZIP과 일치합니다. 위쪽 원문의 짧은 예제나 생략 표시가 있는 부분 코드는 개념·변경 위치 설명용입니다. 서버 저장과 인증은 제공하지 않으며 JSON fixture는 로컬 읽기 실습용입니다.

복사할 변경 파일 전체 코드

package.json — 전체 파일

{
  "name": "taskflow-typescript-checkpoints",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 127.0.0.1",
    "start": "vite --host 127.0.0.1",
    "typecheck": "tsc --noEmit",
    "build": "tsc --noEmit && vite build",
    "test": "node scripts/test.mjs"
  },
  "devDependencies": {
    "typescript": "7.0.2",
    "vite": "8.3.0"
  },
  "dependencies": {}
}

tsconfig.json — 전체 파일

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": [
      "ES2022",
      "DOM"
    ],
    "jsx": "react-jsx",
    "noEmit": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "types": []
  },
  "include": [
    "src",
    "tests/contracts.ts"
  ]
}

scripts/test.mjs — 전체 파일

import { spawnSync } from 'node:child_process';
const compiler = spawnSync(process.execPath, ['node_modules/typescript/bin/tsc', '--noEmit', 'false', '--outDir', '.test-output', '--pretty', 'false'], {stdio:'inherit'});
if (compiler.status !== 0) process.exit(compiler.status ?? 1);
const test = spawnSync(process.execPath, ['scripts/check.mjs'], {stdio:'inherit'});
process.exit(test.status ?? 1);

scripts/check.mjs — 전체 파일

import assert from 'node:assert/strict';
import { existsSync } from 'node:fs';
const load = name => import('../.test-output/src/'+name+'.js');
const has = name => existsSync(new URL('../.test-output/src/'+name+'.js',import.meta.url));
let count=0;
if(has('core/tasks')) {
 const c=await load('core/tasks'); const initial=[{id:'1',title:'공부',completed:false}];
 const added=c.addTask(initial,'새 작업');assert.equal(initial.length,1);assert.equal(added.length,2);
 assert.equal(c.toggleTask(added,'1')[0].completed,true);assert.equal(initial[0].completed,false);
 assert.equal(c.deleteTask(added,'missing').length,2);assert.equal(c.deleteTask(added,'1').length,1);count++;
}
if(has('core/selection')) {const c=await load('core/selection');assert.equal(c.getSelectedTask([],null),null);assert.equal(c.getSelectedTask([],'missing'),null);assert.equal(c.readTitle(null),null);assert.equal(c.readTitle({title:7}),null);assert.equal(c.readTitle({title:'ok'}),'ok');count++;}
if(has('core/collection')) {const c=await load('core/collection');assert.equal(c.first([]),undefined);assert.equal(c.last([1,2]),2);if(c.findById){assert.equal(c.findById([], 'x'),undefined);assert.equal(c.getValue({title:'ok'},'title'),'ok');}count++;}
if(has('core/edit')) {const c=await load('core/edit');const t=c.createTask({title:'ok'});assert.equal(t.completed,false);assert.notEqual(c.createTask({title:'ok'}).id,t.id);assert.equal(c.updateTask(t,{completed:true}).completed,true);assert.equal(t.completed,false);count++;}
if(has('core/state')) {const c=await load('core/state');assert.equal(c.getStateMessage({status:'idle'}),'대기 중');assert.equal(c.getStateMessage({status:'loading'}),'불러오는 중');assert.equal(c.getStateMessage({status:'success',data:[]}), '0개 작업');assert.equal(c.getStateMessage({status:'error',error:new Error('failed')}),'failed');count++;}
if(has('guards/task')) {const c=await load('guards/task');assert.equal(c.isTaskArray([]),true);for(const bad of [null,{},[{id:'1',title:1,completed:false}],[{id:'1',title:'x',completed:'no'}]])assert.equal(c.isTaskArray(bad),false);const api=await load('api/tasks');globalThis.fetch=async()=>({ok:false});await assert.rejects(()=>api.getTasks(),/요청/);globalThis.fetch=async()=>({ok:true,json:async()=>({bad:true})});await assert.rejects(()=>api.getTasks(),/형식/);globalThis.fetch=async()=>({ok:true,json:async()=>[]});assert.deepEqual(await api.getTasks(),[]);count++;}
if(has('components/TaskList')) {const React=await import('react');const {renderToStaticMarkup}=await import('react-dom/server');const {default:C}=await load('components/TaskList');const out=renderToStaticMarkup(React.createElement(C,{tasks:[{id:'1',title:'<unsafe>',completed:false}],onToggle(){},onDelete(){}}));assert(out.includes('&lt;unsafe&gt;'));assert(out.includes('삭제'));assert.equal((out.match(/<li/g)||[]).length,1);count++;}
if(has('components/TaskDetail')) {const React=await import('react');const {renderToStaticMarkup}=await import('react-dom/server');const {default:C}=await load('components/TaskDetail');assert(renderToStaticMarkup(React.createElement(C,{task:null})).includes('선택'));count++;}
if(has('features/tasks/mapper')) {const c=await load('features/tasks/mapper');assert.deepEqual(c.toTask({task_id:'x',task_title:'title',done:true}),{id:'x',title:'title',completed:true});count++;}
console.log(`PASS ${count} runtime groups; compile-time positive/negative contracts checked`);

public/data/tasks.json — 전체 파일

[
  {
    "id": "server-1",
    "title": "서버 작업 불러오기",
    "completed": false,
    "createdAt": "2026-09-20T02:00:00.000Z",
    "dueAt": null
  },
  {
    "id": "server-2",
    "title": "fetch 상태 확인",
    "completed": true,
    "createdAt": "2026-09-20T03:00:00.000Z",
    "dueAt": null
  }
]

tests/contracts.ts — 전체 파일

import type { Task } from '../src/types/task.js';
const valid: Task = {id:'1',title:'공부',completed:false};
// @ts-expect-error completed must be boolean
const invalid: Task = {id:'1',title:'공부',completed:'no'};
void valid; void invalid;